/* RAAIRO Support / Donate screen. Four giving channels + FAQ + newsletter.
   Exposes window.RAAIROSupport. */
const SDS = window.RAAIRODesignSystem_d9bba9;
const { Hero, SectionBand, CTABand, Button, Badge, FAQAccordion, NewsletterForm } = SDS;

function Channel({ tag, title, body, cta, tone, note, onCta }) {
  return (
    <div style={{ display: "grid", gap: "var(--space-5)", gridTemplateColumns: "minmax(0,1fr)", alignItems: "start" }}>
      <div>
        <Badge tone={tone}>{tag}</Badge>
        <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-xl)", margin: "var(--space-3) 0 var(--space-3)" }}>{title}</h3>
        <p style={{ fontSize: "var(--text-md)", lineHeight: 1.65, color: "var(--text-muted)", margin: "0 0 var(--space-4)" }}>{body}</p>
        {note && <p style={{ fontSize: "var(--text-sm)", lineHeight: 1.55, color: "var(--text-subtle)", margin: "0 0 var(--space-5)", padding: "var(--space-3) var(--space-4)", background: "var(--color-clay-50)", borderRadius: "var(--radius-md)" }}>{note}</p>}
        <Button variant="accent" onClick={onCta}>{cta}</Button>
      </div>
    </div>
  );
}

function RAAIROSupport({ nav }) {
  return (
    <div>
      <Hero tone="forest"
        eyebrow="Support RA | AI | RO"
        title="Fund software that works in the world."
        lead="RA | AI | RO runs on 150 volunteers and the people who back them. Every franc keeps live projects running for the communities that depend on them."
        primaryCta={{ label: "Give monthly", href: "#recurring" }}
        secondaryCta={{ label: "Other ways to give", href: "#ways" }} />

      <SectionBand id="ways" eyebrow="Four ways to give" heading="Choose how you support the work"
        intro="Whatever suits you — a small recurring gift, a legacy, property, or your company's backing. All of it goes into keeping applied-AI projects live and responsible.">
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-9)", marginTop: "var(--space-6)" }}>
          <Channel tone="employment" tag="Recurring" title="Give monthly"
            body="A steady monthly gift is the single most useful thing you can do. It lets us commit to projects and volunteers with confidence, instead of chasing one-off funding. Start at any amount; change or cancel anytime."
            cta="Set up a monthly gift" />
          <Channel tone="justice" tag="Legacy" title="Leave a legacy"
            body="Include RA | AI | RO in your will and help fund social-impact technology for the next generation. We'll work with you and your family to make sure your intentions are honoured."
            note="We encourage you to involve your own legal or financial advisor when planning a legacy gift."
            cta="Talk to us about legacies" />
          <Channel tone="housing" tag="RA | AI | RO Real Estate" title="Donate property"
            body="Gift property — or a share of its value — to fund the work. Real-estate donations can be tax-efficient and transformative for our project portfolio."
            note="Property gifts have personal tax and legal implications. Please involve your own advisor; we'll coordinate with them, never around them."
            cta="Explore property giving" />
          <Channel tone="business" tag="Sponsoring & CSR" title="Partner as a company"
            body="Sponsor a project, fund a bootcamp cohort, or bring your team's expertise. Six impact projects, four portfolio packages tailored to your organisation — we report openly on where corporate support goes and what it achieves."
            cta="View sponsorship portfolios" onCta={() => nav("partners")} />
        </div>
      </SectionBand>

      <SectionBand eyebrow="Questions, answered plainly" heading="Giving with confidence" narrow tone="band">
        <FAQAccordion defaultOpen={[0]} items={[
          { q: "Is my donation tax-deductible?", a: "RA | AI | RO is a registered Swiss nonprofit Verein. Deductibility depends on your canton and country of residence — TODO: confirm exact cantonal status with counsel. We provide a receipt for every gift." },
          { q: "Where does my money actually go?", a: "Into keeping live projects running: hosting, safeguards, coordination, and support for the volunteers who build them. We publish how funds are used to members and donors." },
          { q: "Can I give to a specific project?", a: "Yes. You can direct a gift to a theme or a named project, or give to the general fund and let us allocate where the need is greatest." },
          { q: "How do I change or cancel a recurring gift?", a: "Anytime, from a link in every receipt email or by contacting us. No hoops — cancelling should be as easy as starting." },
          { q: "Will you share my details?", a: "No. We store only what's needed to process and acknowledge your gift, in line with revFADP/GDPR, and we never sell or share donor data." },
        ]} />
      </SectionBand>

      <SectionBand id="recurring" eyebrow="Stay close to the work" heading="Get updates as projects launch" narrow>
        <p style={{ color: "var(--text-muted)", fontSize: "var(--text-md)", lineHeight: 1.65, marginBottom: "var(--space-6)" }}>
          Prefer to follow before you give? Get a few updates a month on new projects, bootcamp cohorts, and events — and decide in your own time.
        </p>
        <NewsletterForm />
      </SectionBand>

      <CTABand tone="clay" heading="Not sure where to start?"
        text="Tell us what matters to you and we'll point you to the project — or the giving channel — that fits."
        primaryCta={{ label: "Contact the team", href: "#contact" }}
        secondaryCta={{ label: "Browse projects", href: "#projects" }} />
    </div>
  );
}

window.RAAIROSupport = RAAIROSupport;