/* RA | AI | RO Partners — Corporate sponsorship. Six impact projects managed in
   four portfolio packages, each tailored to a sponsor type. Exposes window.RAAIROPartners. */
const PTDS = window.RAAIRODesignSystem_d9bba9;
const { SectionBand, CTABand, Button, Badge, Icon } = PTDS;

const PORTFOLIOS = [
  {
    key: "A", theme: "business", isNew: false,
    title: "The Economic Resilience Fund",
    sector: "Business & SMEs",
    blurb: "Back our programs and strengthen the Swiss economy from the ground up.",
    focus: ["Swiss SME AI Accelerator", "AI No-Code Product Coach"],
    sponsors: ["UBS", "Swiss tech firms", "Cantonal business associations"],
  },
  {
    key: "B", theme: "housing", isNew: false,
    title: "Smart Cities & Social Care",
    sector: "Real Estate & Social",
    blurb: "Help us ease loneliness among seniors — and modernise urban infrastructure.",
    focus: ["PropTech Automation", "Intergenerational Companion (AI-safeguarded)", "Conversation volunteers"],
    sponsors: ["Real-estate groups", "Swiss Life", "Zurich Insurance", "Health-tech"],
  },
  {
    key: "C", theme: "education", isNew: false,
    title: "The Global Education Equalizer",
    sector: "Education & Global",
    blurb: "Sponsor our digital infrastructure — and give 5,000 learners worldwide access to education.",
    focus: ["Global German Academy"],
    sponsors: ["Global software firms", "Education foundations", "Multinational groups"],
  },
  {
    key: "D", theme: "employment", isNew: true,
    title: "The Career Re-Launch Fund",
    sector: "HR & Career",
    blurb: "Give displaced workers an AI-assisted fast-track back into the economy.",
    focus: ["AI Career Placement & Automation"],
    sponsors: ["Adecco", "Manpower", "Swiss HR firms"],
  },
];

function MetaList({ label, items, mono }) {
  return (
    <div>
      <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-subtle)", margin: "0 0 var(--space-2)" }}>{label}</p>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
        {items.map((it) => (
          <li key={it} style={{ display: "flex", alignItems: "flex-start", gap: "var(--space-2)", fontSize: "var(--text-sm)", color: "var(--text-body)", lineHeight: 1.4 }}>
            <span style={{ color: "var(--brand-accent-bright)", marginTop: 2, flexShrink: 0, display: "inline-flex" }}><Icon name="check" size={14} /></span>
            {it}
          </li>
        ))}
      </ul>
    </div>
  );
}

function PortfolioCard({ p, nav }) {
  const themeColor = `var(--theme-${p.theme})`;
  return (
    <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", overflow: "hidden", display: "flex", flexDirection: "column", boxShadow: "var(--shadow-xs)" }}>
      {/* Header band */}
      <div style={{ padding: "var(--space-5)", borderTop: `4px solid ${themeColor}` }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-3)", marginBottom: "var(--space-3)" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--text-subtle)" }}>Portfolio {p.key}</span>
          {p.isNew && <Badge tone="employment" variant="solid">Neu</Badge>}
        </div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-semibold)", fontSize: "var(--text-xl)", lineHeight: 1.15, margin: "0 0 var(--space-2)", color: "var(--text-body)" }}>{p.title}</h3>
        <Badge tone={p.theme}>{p.sector}</Badge>
        <p style={{ fontSize: "var(--text-base)", lineHeight: 1.55, color: "var(--text-muted)", margin: "var(--space-4) 0 0" }}>{p.blurb}</p>
      </div>

      {/* Details */}
      <div style={{ padding: "0 var(--space-5) var(--space-5)", display: "flex", flexDirection: "column", gap: "var(--space-5)", flex: 1 }}>
        <MetaList label="Fokus" items={p.focus} />
        <MetaList label="Zielsponsoren" items={p.sponsors} />
      </div>

      {/* Actions */}
      <div style={{ padding: "var(--space-4) var(--space-5)", borderTop: "1px solid var(--border-subtle)", background: "var(--bg-band)", display: "flex", gap: "var(--space-3)" }}>
        <Button variant="secondary" size="sm" onClick={() => nav("contact")} style={{ flex: 1 }}>Ask a question</Button>
        <Button variant="accent" size="sm" onClick={() => nav("donate")} style={{ flex: 1 }}>Direkt spenden</Button>
      </div>
    </div>
  );
}

function RAAIROPartners({ nav }) {
  return (
    <div>
      <SectionBand eyebrow="Partners · Corporate sponsorship" heading="Six impact projects, four sponsor packages"
        intro="Each portfolio bundles our impact projects into a package tailored to a sponsor type — so your support lands where your organisation can do the most good.">
        <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-4)", alignItems: "center", marginTop: "var(--space-2)" }}>
          <div>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-bold)", fontSize: "var(--text-2xl)", color: "var(--brand-primary)", lineHeight: 1 }}>CHF 20&rsquo;000</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--text-subtle)", marginTop: 4 }}>Direktspenden 2026</div>
          </div>
          <Badge tone="business" variant="soft">100% gemeinnützig</Badge>
        </div>
      </SectionBand>

      <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter) var(--space-9)" }}>
        <div style={{ display: "grid", gap: "var(--space-5)", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))" }}>
          {PORTFOLIOS.map((p) => <PortfolioCard key={p.key} p={p} nav={nav} />)}
        </div>
      </div>

      {/* Private donation */}
      <SectionBand tone="band" eyebrow="Privat spenden" heading="Direkt an den Verein" narrow>
        <p style={{ fontSize: "var(--text-md)", lineHeight: 1.6, color: "var(--text-muted)", margin: "0 0 var(--space-6)" }}>
          Sicher und einfach — per Banküberweisung an die PostFinance-Konten des Vereins, oder online über HappyPot.
        </p>
        <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
          <Button variant="accent" size="lg" onClick={() => nav("donate")} iconLeft={<Icon name="hand-heart" size={20} />}>Jetzt spenden auf HappyPot</Button>
          <Button variant="secondary" size="lg" onClick={() => nav("donate")}>Banking &amp; IBANs</Button>
        </div>
      </SectionBand>

      <CTABand tone="forest" heading="Let&rsquo;s find the right portfolio for you."
        text="Tell us about your organisation and we&rsquo;ll match you to the package where your support does the most."
        primaryCta={{ label: "Contact the team", href: "#contact" }}
        secondaryCta={{ label: "Browse projects", href: "#projects" }} />
    </div>
  );
}

window.RAAIROPartners = RAAIROPartners;