/* RA | AI | RO app-shell Home screen (matches the live mobile product).
   Full-bleed photo hero, tappable link cards, "Our brands" grid. Content only —
   the TopAppBar and BottomTabBar are provided by the app shell (index.html).
   Exposes window.RAAIROHome. */
const DS = window.RAAIRODesignSystem_d9bba9;
const { LinkCard, Button, Icon, Hero, SectionBand, StatBlock, CTABand } = DS;

const BRANDS = [
  { name: "pagararriendo.com", label: "RA | AI | RO Living", icon: "building-2", slug: "kiero-living" },
  { name: "gericht.online", label: "Gericht Online", icon: "scale", slug: "gericht-online" },
  { name: "myjobmy.life", label: "My Job My Life", icon: "briefcase", slug: "myjobmylife" },
  { name: "suiza.co", label: "Suiza.co", icon: "map-pin", slug: null },
  { name: "alemania.co", label: "Alemania.co", icon: "map-pin", slug: null },
  { name: "aiapply.club", label: "AI Jobfinder Verein", icon: "users", slug: null, soon: true },
];

function BrandTile({ b, nav }) {
  return (
    <button
      onClick={() => b.slug ? nav("detail", b.slug) : nav("projects")}
      style={{
        display: "flex", flexDirection: "column", alignItems: "center", gap: 8, textAlign: "center",
        background: "var(--surface-card)", border: "1px solid var(--border-subtle)",
        borderRadius: "var(--radius-lg)", padding: "18px 12px", cursor: "pointer",
        color: "var(--text-body)", minHeight: 120, justifyContent: "center",
      }}
    >
      <span style={{
        width: 52, height: 52, borderRadius: "var(--radius-md)",
        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={b.icon} size={26} />
      </span>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-semibold)", fontSize: "var(--text-sm)", lineHeight: 1.2 }}>{b.label}</span>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", color: "var(--text-subtle)" }}>{b.name}</span>
      {b.soon && <span style={{ fontFamily: "var(--font-mono)", fontSize: "9px", letterSpacing: "0.08em", color: "var(--brand-accent)", textTransform: "uppercase" }}>Coming soon</span>}
    </button>
  );
}

function RAAIROHome({ nav }) {
  return (
    <div style={{ background: "var(--bg-page)" }}>
      {/* Full-bleed photo hero */}
      <div style={{ position: "relative", width: "100%", aspectRatio: "3 / 4", maxHeight: 440, overflow: "hidden" }}>
        <image-slot id="home-hero" shape="rect" fit="cover"
          placeholder="Drop a warm, human photo (people in real life)"></image-slot>
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "linear-gradient(180deg, rgba(11,46,30,0.15) 0%, rgba(11,46,30,0.35) 45%, rgba(11,46,30,0.82) 100%)",
        }} />
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "var(--space-6)", color: "#fff", pointerEvents: "none" }}>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-semibold)", fontSize: "clamp(2rem, 8vw, 2.5rem)", lineHeight: 1.08, letterSpacing: "-0.01em", margin: "0 0 var(--space-4)", color: "#fff" }}>
            We&rsquo;re creating opportunities.<br />For people.<br /><em style={{ fontStyle: "italic", fontWeight: "var(--fw-medium)" }}>For the future.</em>
          </h1>
          <p style={{ fontSize: "var(--text-base)", lineHeight: 1.55, color: "rgba(255,255,255,0.9)", margin: "0 0 var(--space-5)", maxWidth: 380 }}>
            We help people like you and me — in difficult situations of life that no one expected, or that no one else has addressed. Help us help people like us.
          </p>
          <div style={{ pointerEvents: "auto", display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
            <Button variant="accent" size="lg" onClick={() => nav("donate")}>Help us help people</Button>
            <Button variant="ghost" size="lg" onClick={() => nav("about")}
              style={{ color: "#fff", border: "1.5px solid rgba(255,255,255,0.5)" }}>About us</Button>
          </div>
        </div>
      </div>

      {/* Layout composition — Hero · Section · Stats · CTA */}
      <Hero
        eyebrow="Applied AI for social challenges"
        title="Technology built for real communities."
        lead="RA | AI | RO ships software that solves social problems — 27 projects, 150 volunteers, running in the real world."
        primaryCta={{ label: "Explore projects", href: "#projects" }}
        secondaryCta={{ label: "Donate", href: "#donate" }}
      />
      <SectionBand eyebrow="Bringing together more" heading="People, partners, and reach" 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="9" label="Partner" caption="organisations" />
          <StatBlock value="12" label="Countries" caption="worldwide" />
          <StatBlock value="100%" label="Non-profit" caption="every franc reinvested" />
        </div>
      </SectionBand>
      <CTABand eyebrow="Get involved" heading="Help us apply AI where it matters."
        text="Volunteer, partner, or support the work."
        primaryCta={{ label: "Support RA | AI | RO", href: "#donate" }} />

      {/* Link cards */}
      <div style={{ padding: "var(--space-5) var(--space-4)", display: "flex", flexDirection: "column", gap: "var(--space-3)" }}>
        <LinkCard icon="briefcase" title="Bootcamps & opportunities"
          description="Positive-prompting / responsible-AI bootcamps, plus seats with partner companies worldwide." onClick={() => nav("bootcamps")} />
        <LinkCard icon="users" title="About RA | AI | RO"
          description="Who we are: the builder identity, the ecosystem, our values, and the non-partisan stance." onClick={() => nav("about")} />
        <LinkCard compact badge="🏆" title="Praktikant:innen, die das Programm abgeschlossen haben" onClick={() => nav("bootcamps")} />
        <LinkCard icon="hand-heart" accent="amber" title="CSR · Donations & Sponsoring"
          description="Support our mission — four portfolios for each brand-fit." onClick={() => nav("donate")} />
        <LinkCard icon="graduation-cap" title="Language for Connection"
          description="AI-supported language learning for newcomers — safeguards and consent, explained." onClick={() => nav("detail", "language-for-connection")} />
        <LinkCard icon="scale" title="Legal information, not legal advice"
          description="gericht.online helps you understand your situation in plain language." onClick={() => nav("detail", "gericht-online")} />
        <LinkCard icon="handshake" accent="amber" title="Partners · Corporate sponsorship"
          description="Six impact projects in four portfolio packages, tailored to your organisation." onClick={() => nav("partners")} />
      </div>

      {/* Our brands */}
      <div style={{ padding: "var(--space-6) var(--space-4) var(--space-4)", background: "var(--bg-band)", borderTop: "1px solid var(--border-subtle)" }}>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--text-subtle)", textAlign: "center", margin: "0 0 4px" }}>Our brands</p>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--brand-accent)", textAlign: "center", margin: "0 0 var(--space-5)" }}>Powered by volunteers</p>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-3)" }}>
          {BRANDS.map((b) => <BrandTile key={b.name} b={b} nav={nav} />)}
        </div>
        <div style={{ marginTop: "var(--space-5)", display: "flex", justifyContent: "center" }}>
          <Button variant="secondary" onClick={() => nav("projects")} iconRight={<Icon name="arrow-right" size={18} />}>Explore all 27 projects</Button>
        </div>
      </div>

      {/* Support our mission — donate + banking */}
      <div id="donate-home" style={{ background: "var(--bg-inverse)", color: "#fff", padding: "var(--space-8) var(--space-4)" }}>
        <p className="raairo-eyebrow" style={{ color: "var(--color-amber-200)", textAlign: "center", margin: "0 0 var(--space-2)" }}>Support our mission</p>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-semibold)", fontSize: "clamp(1.75rem, 6vw, 2.25rem)", lineHeight: 1.15, textAlign: "center", color: "#fff", margin: "0 0 var(--space-6)" }}>
          Give people new opportunities.
        </h2>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: "var(--space-7)" }}>
          <Button variant="accent" size="lg" onClick={() => nav("donate")} iconLeft={<Icon name="hand-heart" size={20} />}>Donate online</Button>
        </div>
        <p style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "0.12em", color: "rgba(255,255,255,0.6)", textAlign: "center", margin: "0 0 var(--space-6)" }}>
          Sicher via HappyPot
        </p>

        {/* Banking */}
        <div style={{ maxWidth: 420, margin: "0 auto", background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.14)", borderRadius: "var(--radius-lg)", padding: "var(--space-5)" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: "var(--space-3)", marginBottom: "var(--space-4)", paddingBottom: "var(--space-3)", borderBottom: "1px solid rgba(255,255,255,0.14)" }}>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: "var(--fw-semibold)", fontSize: "var(--text-md)" }}>Banking</span>
            <span style={{ fontSize: "var(--text-xs)", color: "rgba(255,255,255,0.7)" }}>KIERO Solutions · PostFinance</span>
          </div>
          {[
            { cur: "CHF", iban: "CH53 0900 0000 1674 7366 9" },
            { cur: "EUR", iban: "CH23 0900 0000 1679 1420 1" },
            { cur: "USD", iban: "CH81 0900 0000 1679 1422 4" },
          ].map((row) => (
            <div key={row.cur} style={{ display: "flex", alignItems: "center", gap: "var(--space-4)", padding: "var(--space-2) 0" }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-xs)", fontWeight: "var(--fw-semibold)", color: "var(--color-amber-200)", width: 36, flexShrink: 0 }}>{row.cur}</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-sm)", color: "rgba(255,255,255,0.92)", letterSpacing: "0.02em" }}>{row.iban}</span>
            </div>
          ))}
        </div>

        {/* Board quote */}
        <figure style={{ maxWidth: 520, margin: "var(--space-8) auto 0", textAlign: "center" }}>
          <blockquote style={{ margin: 0, fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: "var(--fw-medium)", fontSize: "var(--text-lg)", lineHeight: 1.4, color: "#fff" }}>
            &bdquo;Future arises where people get new opportunities and language builds bridges.&ldquo;
          </blockquote>
          <figcaption style={{ marginTop: "var(--space-4)", fontFamily: "var(--font-mono)", fontSize: "var(--text-2xs)", textTransform: "uppercase", letterSpacing: "0.08em", color: "rgba(255,255,255,0.65)" }}>
            — KIERO Solutions · Management Board
          </figcaption>
        </figure>
      </div>

      {/* Legal line */}
      <div style={{ padding: "var(--space-6) var(--space-4)", textAlign: "center" }}>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "var(--space-2) var(--space-4)", marginBottom: "var(--space-3)" }}>
          {["Impressum", "Datenschutz", "Statuten", "AGB"].map((l) => (
            <a key={l} href={"#" + l.toLowerCase()} style={{ fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>{l}</a>
          ))}
        </div>
        <p style={{ fontSize: "var(--text-xs)", color: "var(--text-subtle)", lineHeight: 1.6, margin: 0 }}>
          RA | AI | RO — Responsibly Applied AI &amp; Robotics. Swiss-born, globally adopted.
          <br />
          HR Bern CH-036.6.104.113-3 · UID CHE-449.056.305
        </p>
      </div>
    </div>
  );
}

window.RAAIROHome = RAAIROHome;