/* RA | AI | RO — About screen. Full narrative: the builder identity, the Verein,
   values, ecosystem logic, non-partisan stance, leadership. Exposes window.RAAIROAbout. */
const ADS = window.RAAIRODesignSystem_d9bba9;
const { Hero, SectionBand, StatBlock, CTABand, Testimonial, FAQAccordion, Badge, Button, Icon } = ADS;

const VALUES = [
  { icon: "hand-heart", t: "Human first", d: "We build for real people in hard situations — jobseekers, newcomers, seniors, residents — not for demos or headlines." },
  { icon: "check", t: "Trust as a feature", d: "We're upfront about data, consent, fees, and scope. gericht.online says plainly it gives information, not advice; our language school explains its AI safeguards." },
  { icon: "scale", t: "Strictly non-partisan", d: "We engage with technology-led solutions, never a party or ideology. US-Politics24 runs balanced Democratic and GOP hubs by design." },
  { icon: "briefcase", t: "Builders, not talkers", d: "Every idea ships as working software running in a real community — measured, iterated, and sustained." },
];

function ValueCard({ v }) {
  return (
    <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: "var(--space-5)", display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
      <span style={{ width: 46, height: 46, borderRadius: "50%", border: "1.5px solid var(--color-forest-200)", background: "var(--color-forest-50)", color: "var(--brand-primary)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name={v.icon} size={22} />
      </span>
      <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-lg)", margin: 0, color: "var(--text-body)" }}>{v.t}</h3>
      <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", margin: 0, lineHeight: 1.55 }}>{v.d}</p>
    </div>
  );
}

function Step({ n, t, d }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-sm)", color: "var(--brand-accent)", fontWeight: 600 }}>{n}</span>
      <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-lg)", margin: "0 0 2px" }}>{t}</h3>
      <p style={{ fontSize: "var(--text-base)", color: "var(--text-muted)", margin: 0, lineHeight: 1.6 }}>{d}</p>
    </div>
  );
}

function SubLink({ label, onClick }) {
  return (
    <button onClick={onClick} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-3)", width: "100%", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", padding: "var(--space-4) var(--space-5)", cursor: "pointer", color: "var(--text-body)", fontFamily: "var(--font-display)", fontSize: "var(--text-md)", fontWeight: "var(--fw-medium)" }}>
      {label}
      <span style={{ color: "var(--text-subtle)", display: "inline-flex" }}><Icon name="chevron-right" size={18} /></span>
    </button>
  );
}

function RAAIROAbout({ nav }) {
  const { ecoStats } = window.RAAIRO_DATA;
  return (
    <div>
      <Hero tone="forest"
        eyebrow="About us"
        title="A builder of applied AI for social challenges."
        lead="We started in Switzerland as a small non-profit. Global adoption grew far beyond anything we expected — and so the work became RA | AI | RO: an international ecosystem shipping real software that helps real people, run in the world." />

      {/* The story */}
      <SectionBand narrow eyebrow="Who we are" heading="One idea, applied many times.">
        <p style={{ fontSize: "var(--text-md)", lineHeight: 1.7, color: "var(--text-body)", margin: "0 0 var(--space-4)" }}>
          RA | AI | RO stands for <strong>Responsibly Applied AI &amp; Robotics</strong>. It began in Switzerland as a single small non-profit project. As adoption spread — across Latin America and Europe — the demand outgrew one team, and so the work grew into an <strong>ecosystem</strong>: independent partner organisations, each shipping focused software and hosting internships, sharing one brand, one method, and one standard of responsibility.
        </p>
        <p style={{ fontSize: "var(--text-md)", lineHeight: 1.7, color: "var(--text-muted)", margin: "0 0 var(--space-4)" }}>
          The throughline never changed: <em>use AI to solve a social challenge a community actually has.</em> Housing that builds ownership, language that builds belonging, legal information that builds confidence, work that fits a life — that's how a Swiss-born non-profit now runs a portfolio spanning two continents.
        </p>
        <p style={{ fontSize: "var(--text-md)", lineHeight: 1.7, color: "var(--text-muted)", margin: 0 }}>
          We're a nonprofit. 100% of what we raise goes back into keeping projects live and responsible — never into hidden margins.
        </p>
      </SectionBand>

      {/* Numbers */}
      <SectionBand eyebrow="By the numbers" heading="Real reach, measured" tone="band">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-7) var(--space-6)" }}>
          <StatBlock value="350" label="People" caption="supported" />
          <StatBlock value={ecoStats.npos} label="Partner orgs" caption={ecoStats.projekte + " web properties"} />
          <StatBlock value="12" label="Countries" caption="worldwide" />
          <StatBlock value="100%" label="Non-profit" caption="every franc reinvested" />
        </div>
      </SectionBand>

      {/* Values */}
      <SectionBand eyebrow="What we stand for" heading="Four values, in everything we ship">
        <div style={{ display: "grid", gap: "var(--space-4)", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))" }}>
          {VALUES.map((v) => <ValueCard key={v.t} v={v} />)}
        </div>
      </SectionBand>

      {/* How we work */}
      <SectionBand eyebrow="How we work" heading="From a real problem to running software" tone="band">
        <div style={{ display: "grid", gap: "var(--space-5)", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))" }}>
          <Step n="01" t="Find a real problem" d="We start with a social challenge a community actually has — not a technology looking for a use." />
          <Step n="02" t="Build responsibly" d="Volunteers and interns ship focused software, transparent about data, consent, and scope from day one." />
          <Step n="03" t="Run it in the world" d="Projects go live with real users under a partner organisation, measured and sustained — not left as a pilot." />
        </div>
        <div style={{ marginTop: "var(--space-7)" }}>
          <Button variant="secondary" onClick={() => nav("projects")} iconRight={<Icon name="arrow-right" size={18} />}>Explore the ecosystem</Button>
        </div>
      </SectionBand>

      {/* Non-partisan band */}
      <SectionBand tone="clay-soft" narrow eyebrow="On policy" heading="Technology-led, strictly non-partisan.">
        <p style={{ fontSize: "var(--text-md)", lineHeight: 1.7, color: "var(--text-body)", margin: 0 }}>
          Where we engage with public questions, we contribute working software and evidence — never support for a party, movement, or ideology. It's a principle we build into the products themselves: our editorial project runs balanced Democratic and GOP news hubs side by side, on purpose.
        </p>
      </SectionBand>

      {/* Leadership / quote */}
      <SectionBand eyebrow="Leadership" heading="Guided by a working board">
        <div style={{ display: "grid", gap: "var(--space-6)", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", alignItems: "center" }}>
          <Testimonial
            quote="Future arises where people get new opportunities and language builds bridges."
            name="Management Board"
            role="KIERO Solutions" />
          <div>
            <p style={{ fontSize: "var(--text-base)", lineHeight: 1.65, color: "var(--text-muted)", margin: "0 0 var(--space-5)" }}>
              RA | AI | RO is run by a volunteer board and a network of 150+ contributors — builders, designers, lawyers, and researchers who give their skills to projects across the ecosystem.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
              <SubLink label="Structure & governance" onClick={() => nav("projects")} />
              <SubLink label="Our volunteers" onClick={() => nav("bootcamps")} />
              <SubLink label="Certificates & recognition" onClick={() => nav("bootcamps")} />
            </div>
          </div>
        </div>
      </SectionBand>

      {/* FAQ */}
      <SectionBand eyebrow="Good to know" heading="Questions about the organisation" narrow tone="band">
        <FAQAccordion defaultOpen={[0]} items={[
          { q: "How did RA | AI | RO start?", a: "It began in Switzerland as a small non-profit project. As adoption spread across Latin America and Europe, the work outgrew a single team and became an international ecosystem of partner organisations — Responsibly Applied AI & Robotics." },
          { q: "Where does the money go?", a: "We're 100% non-profit. Funds keep live projects running — hosting, safeguards, coordination, and support for the volunteers and interns who build them. We report use of funds to donors and members." },
          { q: "How are you non-partisan?", a: "We never act for a party or ideology. Where a project touches politics, we build for balance by design — for example, running Democratic and GOP news hubs side by side." },
          { q: "How can I get involved?", a: "Join a partner organisation as a volunteer or intern, partner as a company, or support the work. Start from Bootcamps & internships or the Partners page." },
        ]} />
      </SectionBand>

      <CTABand tone="forest" heading="Build with us, or back the work."
        text="Volunteer your skills, host or take an internship, partner your organisation, or support a project directly."
        primaryCta={{ label: "Get involved", href: "#bootcamps" }}
        secondaryCta={{ label: "Support the work", href: "#donate" }} />
    </div>
  );
}

window.RAAIROAbout = RAAIROAbout;
