/* RA | AI | RO Partners — Corporate sponsorship. Exposes window.RAAIROPartners. */
const PTDS = window.RAAIRODesignSystem_d9bba9;
const { SectionBand, CTABand, Button, Badge, Icon } = PTDS;

const PORTFOLIOS = [
  {
    key: "A", theme: "business", isNew: false,
    title: { en: "The Economic Resilience Fund", de: "Der Wirtschaftsresilienz-Fonds" },
    sector: { en: "Business & SMEs", de: "Wirtschaft & KMU" },
    blurb: { en: "Back our programs and strengthen the Swiss economy from the ground up.", de: "Unterstützen Sie unsere Programme und stärken Sie die Schweizer Wirtschaft von der Basis auf." },
    focus: { en: ["Swiss SME AI Accelerator", "AI No-Code Product Coach"], de: ["Schweizer KMU AI Accelerator", "AI No-Code Produkt-Coach"] },
    sponsors: { en: ["UBS", "Swiss tech firms", "Cantonal business associations"], de: ["UBS", "Schweizer Tech-Unternehmen", "Kantonale Wirtschaftsverbände"] },
  },
  {
    key: "B", theme: "housing", isNew: false,
    title: { en: "Smart Cities & Social Care", de: "Smart Cities & Soziale Fürsorge" },
    sector: { en: "Real Estate & Social", de: "Immobilien & Soziales" },
    blurb: { en: "Help us ease loneliness among seniors — and modernise urban infrastructure.", de: "Helfen Sie uns, Einsamkeit unter Senior:innen zu lindern — und städtische Infrastruktur zu modernisieren." },
    focus: { en: ["PropTech Automation", "Intergenerational Companion (AI-safeguarded)", "Conversation volunteers"], de: ["PropTech-Automatisierung", "Intergenerationeller Begleiter (AI-gesichert)", "Konversations-Freiwillige"] },
    sponsors: { en: ["Real-estate groups", "Swiss Life", "Zurich Insurance", "Health-tech"], de: ["Immobiliengruppen", "Swiss Life", "Zürich Versicherung", "Health-Tech"] },
  },
  {
    key: "C", theme: "education", isNew: false,
    title: { en: "The Global Education Equalizer", de: "Der globale Bildungsequalizer" },
    sector: { en: "Education & Global", de: "Bildung & Global" },
    blurb: { en: "Sponsor our digital infrastructure — and give 5,000 learners worldwide access to education.", de: "Sponsern Sie unsere digitale Infrastruktur — und geben Sie 5.000 Lernenden weltweit Zugang zu Bildung." },
    focus: { en: ["Global German Academy"], de: ["Globale Deutschakademie"] },
    sponsors: { en: ["Global software firms", "Education foundations", "Multinational groups"], de: ["Globale Software-Unternehmen", "Bildungsstiftungen", "Multinationale Konzerne"] },
  },
  {
    key: "D", theme: "employment", isNew: true,
    title: { en: "The Career Re-Launch Fund", de: "Der Career Re-Launch Fonds" },
    sector: { en: "HR & Career", de: "HR & Karriere" },
    blurb: { en: "Give displaced workers an AI-assisted fast-track back into the economy.", de: "Geben Sie entlassenen Arbeitnehmer:innen einen KI-gestützten Schnellweg zurück in die Wirtschaft." },
    focus: { en: ["AI Career Placement & Automation"], de: ["KI-gestützte Karrierevermittlung & Automatisierung"] },
    sponsors: { en: ["Adecco", "Manpower", "Swiss HR firms"], de: ["Adecco", "Manpower", "Schweizer HR-Unternehmen"] },
  },
];

function MetaList({ label, items }) {
  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, L, de }) {
  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)" }}>
      <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">{de ? "Neu" : "New"}</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)" }}>{de ? p.title.de : p.title.en}</h3>
        <Badge tone={p.theme}>{de ? p.sector.de : p.sector.en}</Badge>
        <p style={{ fontSize: "var(--text-base)", lineHeight: 1.55, color: "var(--text-muted)", margin: "var(--space-4) 0 0" }}>{de ? p.blurb.de : p.blurb.en}</p>
      </div>

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

      <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("partners")} style={{ flex: 1 }}>{de ? "Frage stellen" : "Ask a question"}</Button>
        <Button variant="accent" size="sm" onClick={() => nav("donate")} style={{ flex: 1 }}>{de ? "Direkt spenden" : "Donate now"}</Button>
      </div>
    </div>
  );
}

function RAAIROPartners({ nav, lang = "EN" }) {
  const de = lang === "DE";
  return (
    <div>
      <SectionBand
        eyebrow={de ? "Partner · Unternehmens-Sponsoring" : "Partners · Corporate sponsorship"}
        heading={de ? "Sechs Impact-Projekte, vier Sponsor-Pakete" : "Six impact projects, four sponsor packages"}
        intro={de
          ? "Jedes Portfolio bündelt unsere Impact-Projekte in ein Paket, das auf einen Sponsor-Typ zugeschnitten ist — damit Ihre Unterstützung genau dort ankommt, wo Ihre Organisation den grössten Nutzen stiftet."
          : "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 }}>{de ? "Direktspenden 2026" : "Direct donations 2026"}</div>
          </div>
          <Badge tone="business" variant="soft">{de ? "100% gemeinnützig" : "100% non-profit"}</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} de={de} />)}
        </div>
      </div>

      <SectionBand tone="band" eyebrow={de ? "Privat spenden" : "Private donations"} heading={de ? "Direkt an den Verein" : "Directly to the association"} narrow>
        <p style={{ fontSize: "var(--text-md)", lineHeight: 1.6, color: "var(--text-muted)", margin: "0 0 var(--space-6)" }}>
          {de
            ? "Sicher und einfach — per Banküberweisung an die PostFinance-Konten des Vereins, oder online über HappyPot."
            : "Safe and simple — by bank transfer to the association's PostFinance accounts, or online via 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} />}>{de ? "Jetzt spenden auf HappyPot" : "Donate via HappyPot"}</Button>
          <Button variant="secondary" size="lg" onClick={() => nav("donate")}>{de ? "Banking & IBANs" : "Banking & IBANs"}</Button>
        </div>
      </SectionBand>

      <CTABand tone="forest"
        heading={de ? "Wir finden das richtige Portfolio für Sie." : "Let\u2019s find the right portfolio for you."}
        text={de
          ? "Erzählen Sie uns von Ihrer Organisation — wir empfehlen Ihnen das Paket, das die grösste Wirkung erzielt."
          : "Tell us about your organisation and we\u2019ll match you to the package where your support does the most."}
        primaryCta={{ label: de ? "Team kontaktieren" : "Contact the team", href: "#contact" }}
        secondaryCta={{ label: de ? "Projekte entdecken" : "Browse projects", href: "#projects" }} />
    </div>
  );
}

window.RAAIROPartners = RAAIROPartners;