/* global React, Phone */
const { useState, useEffect } = React;

// ============== Reusable atoms ==============
function Eyebrow({ children, color }) {
  return (
    <span className="eyebrow" style={color ? { color } : undefined}>{children}</span>);

}

function Sticker({ children, variant = "white", style }) {
  return (
    <div className={`sticker ${variant !== "white" ? `sticker--${variant}` : ""}`} style={style}>
      {children}
    </div>);

}

function MIcon({ name, size = 24, color, fill = 0, weight = 600, style }) {
  return (
    <span className="material-symbols-outlined" style={{
      fontSize: size, color, lineHeight: 1, flexShrink: 0,
      fontVariationSettings: `'wght' ${weight}, 'FILL' ${fill}`,
      ...style
    }}>{name}</span>);

}

// Hand-drawn squiggle SVG
function Squiggle({ width = 100, color = "#1B1B1D", style }) {
  return (
    <svg width={width} height={width * 0.18} viewBox="0 0 100 18" fill="none" style={style}>
      <path d="M2 9 Q 12 1, 22 9 T 42 9 T 62 9 T 82 9 T 98 9" stroke={color} strokeWidth="3" strokeLinecap="round" />
    </svg>);

}

function Arrow({ rotate = 0, color = "#1B1B1D", style }) {
  return (
    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" style={{ transform: `rotate(${rotate}deg)`, ...style }}>
      <path d="M5 30 Q 20 5, 40 25 Q 55 40, 70 25" stroke={color} strokeWidth="3" strokeLinecap="round" fill="none" />
      <path d="M62 18 L 70 25 L 62 32" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>);

}

// ============== Nav ==============
function Nav({ accent }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="nav-logo">
          <img src="assets/app_icon.png" alt="" />
          <span>Ultimate Shopper</span>
        </a>
        <div className="nav-links">
          <a href="#features">Features</a>
          <a href="#how">So funktioniert's</a>
          <a href="#kategorien">Kategorien</a>
          <a href="#beta">Beta</a>
          <a href="#familie">Familie</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <span className="chip chip--live">Closed Beta</span>
          <a href="#waitlist" className="btn" style={{ minHeight: 44, padding: "10px 18px", fontSize: 13 }}>Auf Warteliste</a>
        </div>
      </div>
    </nav>);

}

// ============== Hero ==============
const HEADLINES = [
{
  eyebrow: "Closed Beta · Frühling 2026",
  h1: ["Endlich", null, " kaufen\nalle im", null, "im Takt."],
  sub: "Eine Liste. Alle WG- und Familienmitglieder. Live synchronisiert. Mit Robo, dem freundlichsten Einkaufshelfer Deutschlands.",
  hl: 2 // index in h1 array to highlight
},
{
  eyebrow: "Closed Beta · Frühling 2026",
  h1: ["Schluss mit", null, "doppelt eingekauft."],
  sub: "Wer holt die Milch? Steht das Brot schon im Korb? Ultimate Shopper sortiert, reserviert und synchronisiert in Echtzeit – im DACH-typischen Stil.",
  hl: 1
},
{
  eyebrow: "Closed Beta · Frühling 2026",
  h1: ["Die Einkaufsliste,", null, "die mit dir mitdenkt."],
  sub: "Automatische Kategorien, »Ich hol das«-Reservierung und ein Robo, der dir liebevoll zur Seite steht. Auf Deutsch, für DACH-Haushalte.",
  hl: 1
}];


function HeroCopy({ headlineIndex, layout, accent }) {
  const data = HEADLINES[headlineIndex] || HEADLINES[0];
  const center = layout === "stack";
  return (
    <div className={`hero-copy ${center ? "center" : ""}`}>
      <Eyebrow>● {data.eyebrow}</Eyebrow>
      <h1 className="display" style={{ marginTop: 18 }}>
        {data.h1.map((part, i) => {
          if (part === null) return <br key={i} />;
          if (i === data.hl) return <span key={i} className="hl">{part}</span>;
          return <span key={i}>{part}</span>;
        }).reduce((acc, el, i, arr) => {
          // add a space between consecutive non-br pieces
          if (i === 0) return [el];
          const prev = arr[i - 1];
          if (prev && prev.type === "br") return [...acc, el];
          if (el && el.type === "br") return [...acc, el];
          return [...acc, " ", el];
        }, [])}
      </h1>
      <p className="lead">{data.sub}</p>
      <div className="hero-cta-row">
        <a href="#waitlist" className="btn btn--lg">
          <MIcon name="mark_email_read" size={22} weight={700} /> Warteliste sichern
        </a>
        <a href="#how" className="btn btn--lg btn--ghost">
          <MIcon name="play_circle" size={22} fill={1} /> So funktioniert's
        </a>
      </div>
      <div className="hero-meta">
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <MIcon name="lock" size={16} /> Keine Werbung, keine Tracker
        </span>
        <span className="dot" />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <MIcon name="bolt" size={16} fill={1} /> Realtime-Sync
        </span>
        <span className="dot" />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <MIcon name="public" size={16} /> 🇩🇪 🇦🇹 🇨🇭 DACH-first
        </span>
      </div>
    </div>);

}

function HeroStage({ layout, mockup }) {
  // Layout A: phone+robo side, B: side-by-side phones, C: stacked center
  if (layout === "side-by-side") {
    return (
      <div className="hero-stage">
        <div style={{ position: "absolute", left: "8%", top: "8%", transform: "rotate(-4deg)", zIndex: 2 }}>
          <Phone variant={mockup === "intake" ? "list" : "intake"} />
        </div>
        <div style={{ position: "absolute", right: "5%", top: "20%", transform: "rotate(3deg)", zIndex: 3 }}>
          <Phone variant={mockup} />
        </div>
        <Sticker variant="cyan" style={{ top: 30, right: 30, transform: "rotate(-4deg)" }}>
          <MIcon name="cloud_done" size={18} fill={1} /> LIVE-SYNC
        </Sticker>
        <Sticker variant="orange" style={{ bottom: 60, left: 20, transform: "rotate(3deg)" }}>
          <MIcon name="back_hand" size={18} fill={1} color="#fff" /> ICH HOL'S!
        </Sticker>
      </div>);

  }

  if (layout === "stack") {
    return (
      <div className="hero-stage">
        <img src="assets/robo.png" alt="" style={{ position: "absolute", left: "10%", bottom: 0, width: 200, transform: "rotate(-6deg)", filter: "drop-shadow(4px 4px 0 #1B1B1D)" }} className="float-a" />
        <div style={{ position: "relative", zIndex: 2 }}>
          <Phone variant={mockup} />
        </div>
        <div className="float-cat float-b" style={{ top: 20, right: "12%", "--r": "-6deg" }}>
          <img src="assets/categories/01.png" alt="" />
        </div>
        <div className="float-cat float-a" style={{ bottom: 80, right: "8%", width: 72, height: 72, "--r": "6deg" }}>
          <img src="assets/categories/03.png" alt="" />
        </div>
        <Sticker variant="cyan" style={{ top: 60, left: "2%", transform: "rotate(-3deg)" }}>
          <MIcon name="cloud_done" size={18} fill={1} /> LIVE
        </Sticker>
      </div>);

  }

  // Default A: phone in center with robo + floating stickers
  return (
    <div className="hero-stage">
      {/* Big robo in background */}
      <img
        src="assets/robo.png" alt=""
        className="float-a"
        style={{
          position: "absolute", right: -40, bottom: -10, width: 280,
          filter: "drop-shadow(6px 6px 0 #1B1B1D)",
          opacity: 0.95, zIndex: 1,
          "--r": "5deg"
        }} />
      

      {/* Phone */}
      <div style={{ position: "relative", zIndex: 2, transform: "rotate(-3deg)" }}>
        <Phone variant={mockup} />
      </div>

      {/* Floating category stickers */}
      <div className="float-cat float-a" style={{ top: 20, left: "8%", "--r": "-8deg" }}>
        <img src="assets/categories/01.png" alt="Obst & Gemüse" />
      </div>
      <div className="float-cat float-b" style={{ top: "30%", right: "0%", width: 76, height: 76, "--r": "6deg" }}>
        <img src="assets/categories/08.png" alt="Getränke" />
      </div>
      <div className="float-cat float-a" style={{ bottom: 30, left: "0%", width: 80, height: 80, "--r": "4deg" }}>
        <img src="assets/categories/05.png" alt="Brot" />
      </div>

      {/* Speech stickers */}
      <Sticker variant="cyan" style={{ top: 50, right: "5%", transform: "rotate(-5deg)", zIndex: 4 }}>
        <MIcon name="cloud_done" size={18} fill={1} /> LIVE-SYNC
      </Sticker>
      <Sticker variant="orange" style={{ top: "42%", left: "-2%", transform: "rotate(4deg)", zIndex: 4 }}>
        <MIcon name="back_hand" size={18} fill={1} color="#fff" /> ICH HOL'S!
      </Sticker>
      <Sticker variant="yellow" style={{ bottom: 100, right: "5%", transform: "rotate(3deg)", zIndex: 4 }}>
        <MIcon name="auto_awesome" size={18} fill={1} /> 14 KATEGORIEN
      </Sticker>
    </div>);

}

function Hero({ headline, layout, mockup, accent }) {
  const gridClass = layout === "stack" ? "hero-grid--stack" :
  layout === "robo-left" ? "hero-grid--robo-left" : "";
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className={`hero-grid ${gridClass}`}>
          <HeroCopy headlineIndex={headline} layout={layout} accent={accent} />
          <HeroStage layout={layout} mockup={mockup} />
        </div>
      </div>
    </section>);

}

// ============== Logo strip / shoutouts ==============
function Strip() {
  const items = [
  "Realtime-Sync via Firestore",
  "14 illustrierte Kategorien",
  "»Ich hol das«-Reservierung",
  "Mengen, Notizen, Einheiten",
  "Offline-fähig",
  "Lädenverwaltung",
  "Geteilte Listen",
  "Kontaktverwaltung"];

  const all = [...items, ...items];
  return (
    <div className="strip">
      <div className="strip-inner">
        {all.map((it, i) =>
        <span key={i} className="strip-item">
            <span className="dot" /> {it}
          </span>
        )}
      </div>
    </div>);

}

// ============== Feature grid ==============
const FEATURES = [
{
  icon: "cloud_sync", label: "live", variant: "",
  title: "Live-Sync ohne Stress",
  body: "Anna streicht die Milch, du siehst es sofort. Realtime-Updates über alle Geräte – auch wenn ihr im selben Supermarkt seid.",
  pill: "Firestore-powered"
},
{
  icon: "back_hand", label: "claim", variant: "feature--orange",
  title: "»Ich hol das«-Reservierung",
  body: "Ein Tap und der Artikel ist gelb markiert – mit deinem Namen. Niemand kauft mehr doppelt das gleiche Brot.",
  pill: "WG-tested"
},
{
  icon: "category", label: "kategorien", variant: "feature--blue",
  title: "14 handgemalte Kategorien",
  body: "Brot, Milch, Konserven, Drogerie. Artikel werden automatisch sortiert – im liebevollen Sketchnote-Look.",
  pill: "Liebevoll illustriert"
},
{
  icon: "edit_note", label: "erfassen", variant: "feature--yellow",
  title: "Erfassen in 3 Sekunden",
  body: "Tippe »Tomaten 500 g« – fertig. Mengen-Stepper, 21 Einheiten und Notizen direkt am Eingabefeld.",
  pill: "21 Einheiten"
},
{
  icon: "not_interested", label: "skip", variant: "feature--ink",
  title: "Nicht verfügbar? Kein Problem.",
  body: "Markiere fehlende Artikel, ohne sie zu löschen. Sie wandern in eine eigene Sektion – fürs nächste Mal.",
  pill: "Realitätsnah"
},
{
  icon: "store", label: "läden", variant: "feature--green",
  title: "Deine Läden, deine Reihenfolge",
  body: "Bio-Markt, Aldi, der Späti um die Ecke. Jeder Laden bekommt eigene Listen – und Robo merkt sich, wo du was kaufst.",
  pill: "Bald: Routenplaner"
}];


function FeatureGrid() {
  return (
    <section className="section" id="features">
      <div className="container">
        <div className="section-head">
          <Eyebrow>● Was Ultimate Shopper kann</Eyebrow>
          <h2 className="h1">Sechs Dinge, die euer<br />Wocheneinkauf endlich braucht.</h2>
          <p className="lead">Keine Buzzwords. Keine 47 Buttons. Eine Einkaufsliste, die einfach mitdenkt – im liebevollen Comic-Stil.</p>
        </div>
        <div className="features">
          {FEATURES.map((f, i) =>
          <div key={i} className={`feature ${f.variant}`}>
              <div className="feature-icon">
                <MIcon name={f.icon} size={32} weight={600} />
              </div>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
              <span className="feature-pill">{f.pill}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============== How it works (3 steps) ==============
function HowItWorks() {
  const steps = [
  {
    num: "01",
    title: "Liste anlegen.",
    body: "Tippe einen Namen ein. Lade deine WG, Familie oder Pärchen-Hälfte ein. Fertig.",
    icon: "list_alt"
  },
  {
    num: "02",
    title: "Artikel erfassen.",
    body: "»Tomaten 500 g«. Robo sortiert automatisch in die richtige Kategorie. Notizen optional.",
    icon: "edit_note"
  },
  {
    num: "03",
    title: "Einkauf starten.",
    body: "Im Laden wischt jeder ab, was er hat. Live-Sync hält alle auf dem Stand – auch offline.",
    icon: "shopping_cart"
  }];

  return (
    <section className="section" id="how" style={{ background: "var(--us-orange-soft)", borderTop: "3px solid var(--us-ink)", borderBottom: "3px solid var(--us-ink)" }}>
      <div className="container">
        <div className="section-head">
          <Eyebrow>● So funktioniert's</Eyebrow>
          <h2 className="h1">In 3 Schritten<br />zum gemeinsamen Einkauf.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="how-grid">
          {steps.map((s, i) =>
          <div key={i} className="card" style={{ padding: 32, position: "relative" }}>
              <div style={{
              position: "absolute", top: -22, left: 24,
              background: "var(--us-ink)", color: "#fff",
              padding: "6px 16px", borderRadius: 999,
              border: "3px solid var(--us-ink)",
              fontWeight: 900, fontSize: 14, letterSpacing: "0.12em",
              boxShadow: "2px 2px 0 0 var(--us-ink)"
            }}>SCHRITT {s.num}</div>
              <div style={{
              width: 64, height: 64, marginTop: 12, marginBottom: 18,
              background: "var(--accent)",
              border: "3px solid var(--us-ink)",
              borderRadius: 14,
              boxShadow: "3px 3px 0 0 var(--us-ink)",
              display: "flex", alignItems: "center", justifyContent: "center"
            }}>
                <MIcon name={s.icon} size={32} weight={600} />
              </div>
              <h3 style={{ fontSize: 26, fontWeight: 900, margin: "0 0 10px" }}>{s.title}</h3>
              <p style={{ margin: 0, color: "var(--us-ink-3)", fontSize: 16, lineHeight: 1.55 }}>{s.body}</p>
            </div>
          )}
        </div>
        <style>{`
          @media (max-width: 820px) {
            .how-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </div>
    </section>);

}

// ============== Deep-dive sections ==============
function DiveStage({ variant, stickers }) {
  return (
    <div className="dive-stage">
      <Phone variant={variant} />
      {stickers}
    </div>);

}

function DeepDives() {
  return (
    <section className="section" id="deep-dives">
      <div className="container">

        {/* Dive 1: Live-Sync */}
        <div className="dive">
          <div className="dive-copy">
            <Eyebrow>● Live-Sync</Eyebrow>
            <h2 className="h1" style={{ marginTop: 16 }}>Eine Liste.<br />Alle Hände. <span className="hl" style={{ background: "var(--us-orange)", color: "#fff" }}>Eine Wahrheit.</span></h2>
            <p className="lead">Während Lukas im Bioladen die Milch streicht, sieht Anna im Discounter live, dass sie die Tomaten doch noch braucht. Realtime-Sync über Firestore – ohne Refresh, ohne Verwirrung, ohne doppelte Croissants.</p>
            <ul className="dive-bullets">
              <li><span className="check"><MIcon name="check" size={16} weight={700} /></span><span><strong>LIVE-Status</strong> in der App-Bar zeigt Verbindung in Echtzeit.</span></li>
              <li><span className="check"><MIcon name="check" size={16} weight={700} /></span><span><strong>Konfliktfrei.</strong> Wer zuerst tappt, hat den Artikel reserviert.</span></li>
              <li><span className="check"><MIcon name="check" size={16} weight={700} /></span><span><strong>Offline-fähig.</strong> Erfassen ohne Empfang – synct, sobald du wieder online bist.</span></li>
            </ul>
          </div>
          <DiveStage variant="intake" stickers={<>
            <Sticker variant="cyan" style={{ top: "5%", right: "0%", transform: "rotate(-5deg)" }}>
              <MIcon name="cloud_done" size={18} fill={1} /> LIVE
            </Sticker>
            <div className="float-cat" style={{ position: "absolute", top: "15%", left: 0, width: 76, height: 76, transform: "rotate(-8deg)", zIndex: 4 }}>
              <img src="assets/categories/03.png" alt="" />
            </div>
            <Sticker variant="yellow" style={{ bottom: "20%", left: "-4%", transform: "rotate(4deg)" }}>
              <MIcon name="bolt" size={18} fill={1} /> &lt; 50ms
            </Sticker>
          </>} />
        </div>

        {/* Dive 2: Claim */}
        <div className="dive dive--rev">
          <div className="dive-copy">
            <Eyebrow>● Reservieren</Eyebrow>
            <h2 className="h1" style={{ marginTop: 16 }}>»Ich hol das« – <span className="hl">und alle wissen's.</span></h2>
            <p className="lead">Tap auf den Artikel, und er wird gelb markiert mit deinem Vornamen. Andere sehen sofort: schon vergeben. Kein »hast du die Eier eingepackt?« mehr. Nicht mehr nachfragen, nicht mehr doppelt kaufen.</p>
            <ul className="dive-bullets">
              <li><span className="check"><MIcon name="check" size={16} weight={700} /></span><span><strong>Ein Tap reserviert</strong>, ein zweiter gibt frei.</span></li>
              <li><span className="check"><MIcon name="check" size={16} weight={700} /></span><span><strong>Status-Sektionen</strong> für »Erledigt« und »Nicht verfügbar«.</span></li>
              <li><span className="check"><MIcon name="check" size={16} weight={700} /></span><span><strong>Mit Notizen.</strong> »Bitte Bio, Anna mag das so.«</span></li>
            </ul>
          </div>
          <DiveStage variant="shopping" stickers={<>
            <Sticker variant="orange" style={{ top: "8%", left: "-6%", transform: "rotate(-5deg)" }}>
              <MIcon name="back_hand" size={18} fill={1} color="#fff" /> ANNA HOLT'S
            </Sticker>
            <Sticker variant="white" style={{ top: "30%", right: "-4%", transform: "rotate(4deg)" }}>
              <MIcon name="check_circle" size={18} fill={1} color="#00863E" /> ERLEDIGT
            </Sticker>
            <Sticker variant="white" style={{ bottom: "25%", left: "-2%", transform: "rotate(-3deg)", background: "rgba(255,75,75,0.15)" }}>
              <MIcon name="not_interested" size={18} fill={1} color="#C92A2A" /> NICHT DA
            </Sticker>
          </>} />
        </div>

        {/* Dive 3: Erfassen */}
        <div className="dive">
          <div className="dive-copy">
            <Eyebrow>● Erfassen</Eyebrow>
            <h2 className="h1" style={{ marginTop: 16 }}>Tippen. Mengen. <span className="hl" style={{ background: "var(--us-blue)", color: "#fff" }}>Fertig.</span></h2>
            <p className="lead">Eine Eingabezeile, ein Mengen-Stepper, 21 sinnvolle Einheiten von »Stk« bis »Bund«. Robo sortiert automatisch in die richtige der 14 Kategorien. Tippst du »Vollmilch«, landet sie unter »Milch, Käse & Eier« – ohne dass du was machen musst.</p>
            <ul className="dive-bullets">
              <li><span className="check"><MIcon name="check" size={16} weight={700} /></span><span><strong>Auto-Kategorisierung</strong> für 1.000+ deutsche Begriffe.</span></li>
              <li><span className="check"><MIcon name="check" size={16} weight={700} /></span><span><strong>Mengen & Einheiten</strong> für alle DACH-Verpackungsgrößen.</span></li>
              <li><span className="check"><MIcon name="check" size={16} weight={700} /></span><span><strong>Notizen pro Artikel.</strong> Marke, Bio-Wunsch, Allergie-Hinweis.</span></li>
            </ul>
          </div>
          <DiveStage variant="list" stickers={<>
            <div className="float-cat" style={{ position: "absolute", top: "8%", right: "-4%", width: 76, height: 76, transform: "rotate(8deg)", zIndex: 4 }}>
              <img src="assets/categories/08.png" alt="" />
            </div>
            <Sticker variant="blue" style={{ bottom: "30%", right: "-6%", transform: "rotate(5deg)" }}>
              <MIcon name="auto_fix" size={18} fill={1} color="#fff" /> AUTO-SORT
            </Sticker>
            <div className="float-cat" style={{ position: "absolute", bottom: "10%", left: "-2%", width: 80, height: 80, transform: "rotate(-6deg)", zIndex: 4 }}>
              <img src="assets/categories/05.png" alt="" />
            </div>
          </>} />
        </div>

      </div>
    </section>);

}

// ============== Categories showcase ==============
const CATEGORY_LIST = [
{ img: "01", name: "Obst & Gemüse" },
{ img: "02", name: "Fleisch & Fisch" },
{ img: "03", name: "Milch & Eier" },
{ img: "04", name: "Tiefkühl" },
{ img: "05", name: "Brot" },
{ img: "06", name: "Konserven" },
{ img: "07", name: "Nudeln & Reis" },
{ img: "08", name: "Getränke" },
{ img: "09", name: "Süßes" },
{ img: "10", name: "Gewürze" },
{ img: "11", name: "Drogerie" },
{ img: "12", name: "Haushalt" },
{ img: "13", name: "Tierbedarf", ext: "svg", file: "13-new" },
{ img: null, name: "Sonstiges" }];


function Categories() {
  return (
    <section className="section" id="kategorien" style={{ background: "var(--us-bg-2)", borderTop: "3px solid var(--us-ink)", borderBottom: "3px solid var(--us-ink)" }}>
      <div className="container">
        <div className="section-head">
          <Eyebrow>● 14 Kategorien · handgemalt</Eyebrow>
          <h2 className="h1">Jeder Artikel<br />findet sein Zuhause.</h2>
          <p className="lead">Keine generischen Iconpacks. Jede Kategorie ist eine eigene kleine Illustration im Sketchnote-Look – damit deine Liste nicht aussieht wie eine Excel-Tabelle.</p>
        </div>
        <div className="cats">
          {CATEGORY_LIST.map((c, i) =>
          <div key={i} className="cat">
              {c.img ?
            <img src={c.file ? `assets/categories/${c.file}.${c.ext || "png"}` : `assets/categories/${c.img}.png`} alt={c.name} /> :

            <div style={{
              width: "100%", height: "70%", background: "var(--us-yellow)",
              border: "2px solid var(--us-ink)", borderRadius: 8,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontWeight: 900, fontSize: 36, color: "var(--us-ink)"
            }}>?</div>
            }
              <div className="cat-name">{c.name}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============== Beta program ==============
function BetaProgram() {
  const tracks = [
  {
    title: "Alltagslisten",
    body: "Wocheneinkauf, Drogerie, Bio-Markt: Wir suchen Haushalte, die echte wiederkehrende Listen nutzen.",
    icon: "list_alt",
    tag: "Phase 1"
  },
  {
    title: "Gemeinsam einkaufen",
    body: "Paare, WGs und Familien testen Live-Sync, Reservieren und paralleles Abhaken im Supermarkt.",
    icon: "groups",
    tag: "Kernfokus"
  },
  {
    title: "Offline-Zonen",
    body: "Kühlregal-Funklöcher sind willkommen. Jede Rückmeldung hilft, Graceful Degradation sauber zu schleifen.",
    icon: "wifi_off",
    tag: "Realitätscheck"
  }];

  return (
    <section className="section beta-program" id="beta">
      <div className="container">
        <div className="beta-grid">
          <div className="beta-copy">
            <Eyebrow>● Beta-Test · DACH-Haushalte gesucht</Eyebrow>
            <h2 className="h1" style={{ marginTop: 18 }}>Teste die Einkaufsliste, die nicht beim ersten Funkloch nervös wird.</h2>
            <p className="lead">Die Closed Beta ist bewusst klein: Wir wollen echte Einkaufsabläufe sehen, nicht nur Demo-Klicks. Beta-Tester bekommen frühe Builds, kurze Feedback-Fragen und direkten Einfluss auf die V1-Prioritäten.</p>
            <div className="beta-metrics" aria-label="Beta Eckdaten">
              <div><strong>100</strong><span>neue Plätze pro Woche</span></div>
              <div><strong>8</strong><span>Personen pro Liste in V1</span></div>
              <div><strong>0</strong><span>Werbetracker</span></div>
            </div>
          </div>
          <div className="beta-cards">
            {tracks.map((track) =>
            <div key={track.title} className="beta-card">
                <span className="feature-pill">{track.tag}</span>
                <div className="feature-icon">
                  <MIcon name={track.icon} size={30} weight={650} />
                </div>
                <h3>{track.title}</h3>
                <p>{track.body}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ============== Roadmap / Robo-family ==============
function Roadmap() {
  const family = [
  {
    status: "live",
    statusLabel: "Verfügbar",
    name: "Ultimate Shopper",
    meta: "Einkaufslisten · seit 2025",
    body: "Die geteilte Einkaufsliste mit Live-Sync, Reservieren und 14 Kategorien. Genau die App, auf der du dich gerade befindest.",
    icon: "assets/app_icon.png",
    iconBg: "var(--us-cyan)"
  },
  {
    status: "soon",
    statusLabel: "In Entwicklung",
    name: "Ultimate Vorrat",
    meta: "Vorratskammer · Beta Sommer '26",
    body: "Was steht im Schrank? Welches Mehl ist bald abgelaufen? Vorrat scannt, zählt und schubst Produkte direkt in deine Einkaufsliste, sobald sie zur Neige gehen.",
    icon: "assets/Einmachglas.png",
    iconBg: "var(--us-orange-soft)"
  },
  {
    status: "later",
    statusLabel: "Geplant",
    name: "Ultimate Rezepte",
    meta: "Kochbuch · 2027",
    body: "Rezept aussuchen, Zutaten gegen Vorrat abgleichen, Rest in die Einkaufsliste. Die Robo-Familie schließt den Kreis vom »Was kochen wir?« bis zum »Was holen wir?«.",
    icon: "assets/robo.png",
    iconBg: "var(--us-cyan-soft)"
  }];

  return (
    <section className="section roadmap" id="familie">
      <div className="container">
        <div className="section-head">
          <Eyebrow>● Robo-Familie · Roadmap</Eyebrow>
          <h2 className="h1">Eine App ist erst der Anfang.</h2>
          <p className="lead">Ultimate Shopper ist Teil einer kleinen Familie von DACH-Haushaltshelfern. Jede App löst eine Frage – und zusammen lösen sie das ganze »Was haben wir und was brauchen wir?«.</p>
        </div>

        <div className="family">
          {family.map((m, i) =>
          <div key={i} className={`family-card family-card--${m.status === "live" ? "current" : m.status === "soon" ? "soon" : "soon"}`}>
              <span className={`family-status family-status--${m.status}`}>{m.statusLabel}</span>
              <div className="family-icon" style={{ background: m.iconBg }}>
                <img src={m.icon} alt="" style={{ padding: m.status !== "live" ? 12 : 4 }} />
              </div>
              <h3>{m.name}</h3>
              <div className="family-meta">{m.meta}</div>
              <p>{m.body}</p>
            </div>
          )}
        </div>

        <div style={{ textAlign: "center", marginTop: 56 }}>
          <a href="#waitlist" className="btn btn--lg" style={{ background: "var(--us-cyan)", color: "var(--us-ink)" }}>
            <MIcon name="mark_email_read" size={22} weight={700} /> Auf Warteliste – für alle drei
          </a>
        </div>
      </div>
    </section>);

}

// ============== FAQ ==============
const FAQS = [
{ q: "Wann startet Ultimate Shopper offiziell?", a: "Wir sind aktuell in der Closed Beta. Ein offizieller Release im DACH-Raum ist für Sommer 2026 geplant. Auf der Warteliste bekommst du als Erste:r einen Beta-Code." },
{ q: "Was kostet Ultimate Shopper?", a: "Die Basis-Version ist und bleibt kostenlos – inklusive geteilter Listen, Live-Sync und allen 14 Kategorien. Über ein optionales Pro-Tier denken wir später nach, frühestens nach dem Release." },
{ q: "Werden meine Einkaufsdaten verkauft oder analysiert?", a: "Nein. Keine Werbung, keine Tracker, keine Analytics-Pixel. Daten liegen bei Firebase/Firestore in der EU und werden nur für die Synchronisation deiner eigenen Listen verwendet." },
{ q: "Funktioniert die App offline?", a: "Ja. Du kannst Artikel auch ohne Empfang erfassen und abhaken. Sobald du wieder online bist, syncen sich alle Änderungen automatisch mit deinen Mit-Einkäufer:innen." },
{ q: "Wie viele Personen können gleichzeitig in einer Liste sein?", a: "In der Beta haben wir das Limit auf 8 Personen pro Liste gesetzt – mehr als genug für WGs, Patchwork-Familien und Kleingruppen. Das Limit kann zum Release angepasst werden." },
{ q: "Welche Plattformen werden unterstützt?", a: "Aktuell Android und iOS (native Flutter-App). Eine schlanke Web-App für Desktop ist auf der Roadmap, aber kein primäres Ziel – Einkaufen passiert mobil." },
{ q: "Kann ich auch alleine eine Liste benutzen?", a: "Klar. Die Reservier- und Sync-Features kommen auch Single-Haushalten zugute, wenn du z. B. Telefon und Tablet nutzt oder einfach gerne Listen führst." },
{ q: "Wie kommt die Robo-Familie ins Spiel?", a: "Ultimate Shopper ist die erste App. »Vorrat« und »Rezepte« folgen – mit demselben Login, demselben Designsystem und der Möglichkeit, Daten zwischen den Apps fließen zu lassen (z. B. Vorrat → Einkaufsliste)." }];


function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <Eyebrow>● FAQ</Eyebrow>
          <h2 className="h1">Wahrscheinlich fragst du dich…</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((item, i) =>
          <div key={i} className={`faq ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-toggle" />
                <span className="faq-q-text">{item.q}</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{item.a}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============== Waitlist CTA ==============
const WAITLIST_STORAGE_KEY = "ultimate-shopper-beta-signups";
const BETA_SIGNUP_ENDPOINT = "api/beta-signup.php";
const INITIAL_BETA_SIGNUPS = [
{ name: "Anna", email: "anna@example.test", persona: "familie", platform: "ios", region: "Muenchen", createdAt: "2026-05-08T09:20:00.000Z" },
{ name: "Lukas", email: "lukas@example.test", persona: "wg", platform: "android", region: "Koeln", createdAt: "2026-05-09T17:45:00.000Z" },
{ name: "Mira", email: "mira@example.test", persona: "paar", platform: "both", region: "Wien", createdAt: "2026-05-10T12:05:00.000Z" }];

function readStoredSignups() {
  try {
    const raw = window.localStorage.getItem(WAITLIST_STORAGE_KEY);
    if (!raw) return INITIAL_BETA_SIGNUPS;
    const parsed = JSON.parse(raw);
    return Array.isArray(parsed) ? parsed : INITIAL_BETA_SIGNUPS;
  } catch (error) {
    return INITIAL_BETA_SIGNUPS;
  }
}

function writeStoredSignups(signups) {
  try {
    window.localStorage.setItem(WAITLIST_STORAGE_KEY, JSON.stringify(signups));
  } catch (error) {
    // Local storage can be unavailable in private browsing; the UI still confirms.
  }
}

function buildCsv(signups) {
  const columns = ["name", "email", "persona", "platform", "region", "createdAt"];
  const escapeCell = (value) => `"${String(value ?? "").replace(/"/g, '""')}"`;
  return [columns.join(","), ...signups.map((row) => columns.map((col) => escapeCell(row[col])).join(","))].join("\n");
}

function Waitlist() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    persona: "familie",
    platform: "android",
    region: "",
    consent: false
  });
  const [signups, setSignups] = useState(readStoredSignups);
  const [submittedEmail, setSubmittedEmail] = useState("");
  const [error, setError] = useState("");
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    writeStoredSignups(signups);
  }, [signups]);

  const update = (key, value) => {
    setForm((current) => ({ ...current, [key]: value }));
    setError("");
  };

  const submit = async (e) => {
    e?.preventDefault();
    if (submitting) return;
    const email = form.email.trim().toLowerCase();
    const name = form.name.trim();
    if (!name || !email.includes("@")) {
      setError("Bitte Name und eine gültige E-Mail eintragen.");
      return;
    }
    if (!form.consent) {
      setError("Bitte bestätige die Beta-Kommunikation.");
      return;
    }
    if (signups.some((entry) => entry.email.toLowerCase() === email)) {
      setError("Diese E-Mail steht bereits auf der Beta-Liste.");
      return;
    }

    const nextSignup = {
      name,
      email,
      persona: form.persona,
      platform: form.platform,
      region: form.region.trim(),
      createdAt: new Date().toISOString()
    };

    setSubmitting(true);
    try {
      const body = new URLSearchParams();
      Object.entries({ ...nextSignup, consent: "1", website: "" }).forEach(([key, value]) => {
        body.append(key, value ?? "");
      });
      const response = await fetch(BETA_SIGNUP_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8" },
        body
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok || result.ok === false) {
        throw new Error(result.message || "Die Anmeldung konnte gerade nicht gespeichert werden.");
      }

      setSignups((current) => [nextSignup, ...current]);
      setSubmittedEmail(result.email || email);
      setForm({ name: "", email: "", persona: form.persona, platform: form.platform, region: "", consent: false });
    } catch (requestError) {
      const isLocal = ["localhost", "127.0.0.1", ""].includes(window.location.hostname);
      if (isLocal) {
        setSignups((current) => [nextSignup, ...current]);
        setSubmittedEmail(email);
        setForm({ name: "", email: "", persona: form.persona, platform: form.platform, region: "", consent: false });
      } else {
        setError(requestError.message || "Die Anmeldung konnte gerade nicht gespeichert werden.");
      }
    } finally {
      setSubmitting(false);
    }
  };

  const downloadCsv = () => {
    const blob = new Blob([buildCsv(signups)], { type: "text/csv;charset=utf-8" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "ultimate-shopper-beta-anmeldeliste.csv";
    link.click();
    URL.revokeObjectURL(url);
  };

  const resetDemoList = () => {
    setSignups(INITIAL_BETA_SIGNUPS);
    setSubmittedEmail("");
    setError("");
  };

  const visibleSignups = signups.slice(0, 6);
  const personaLabels = { wg: "WG", familie: "Familie", paar: "Pärchen", solo: "Solo" };
  const platformLabels = { android: "Android", ios: "iOS", both: "Android + iOS" };

  return (
    <section className="section waitlist" id="waitlist">
      {/* decorative robo */}
      <img src="assets/robo.png" alt="" style={{
        position: "absolute", left: -40, bottom: -20, width: 200,
        transform: "rotate(-8deg)", filter: "drop-shadow(4px 4px 0 var(--us-ink))",
        opacity: 0.85, pointerEvents: "none"
      }} className="float-a" />
      <img src="assets/categories/01.png" alt="" style={{
        position: "absolute", right: 40, top: 60, width: 90, height: 90,
        border: "3px solid var(--us-ink)", borderRadius: 14,
        boxShadow: "4px 4px 0 0 var(--us-ink)",
        transform: "rotate(8deg)", objectFit: "cover",
        pointerEvents: "none"
      }} className="float-b" />

      <div className="container">
        <div className="waitlist-grid">
          <div>
            <Eyebrow>● Closed Beta · 100 Plätze pro Woche</Eyebrow>
            <h2 className="h1" style={{ marginTop: 18, marginBottom: 18 }}>
              Sei dabei,<br />bevor Robo offiziell startet.
            </h2>
            <p className="lead" style={{ maxWidth: 540 }}>
              Sichere dir einen Beta-Zugang und teste geteilte Listen mit deiner WG, Familie oder Pärchen-Hälfte. Wir laden wöchentlich neue Personen ein. Kein Spam, keine Werbung, nur Beta-Kommunikation.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
              <span className="chip"><MIcon name="lock" size={14} /> DSGVO-konform</span>
              <span className="chip"><MIcon name="cloud_queue" size={14} /> Firebase-ready</span>
              <span className="chip"><MIcon name="mail" size={14} /> Einladung per E-Mail</span>
            </div>
          </div>
          <div className="waitlist-form">
            {submittedEmail ?
            <>
                <h3>Du bist auf der Liste.</h3>
                <p className="sub">Robo schickt dir einen Beta-Code, sobald du dran bist. Deine Anmeldung wurde serverseitig gespeichert.</p>
                <div className="waitlist-success">
                  <div className="ok"><MIcon name="check" size={22} weight={700} /></div>
                  <div>
                    <strong>{submittedEmail}</strong>
                    <p>Du bekommst ausschließlich Beta-Kommunikation zu Ultimate Shopper.</p>
                  </div>
                </div>
                <button onClick={() => setSubmittedEmail("")} className="btn btn--ghost" style={{ width: "100%", marginTop: 16, minHeight: 48, fontSize: 13 }}>Weitere Person anmelden</button>
              </> :

            <form onSubmit={submit}>
                <h3>Warteliste · Closed Beta</h3>
                <p className="sub">Robo merkt sich deine Daten für die Beta-Auswahl. Die Anmeldung wird serverseitig gespeichert.</p>
                <label className="field-label" htmlFor="waitlist-name">Name</label>
                <input
                id="waitlist-name"
                className="waitlist-input"
                type="text"
                placeholder="Anna"
                value={form.name}
                onChange={(e) => update("name", e.target.value)}
                required />
                <label className="field-label" htmlFor="waitlist-email">E-Mail</label>
                <input
                id="waitlist-email"
                className="waitlist-input"
                type="email"
                placeholder="lukas@beispiel.de"
                value={form.email}
                onChange={(e) => update("email", e.target.value)}
                required />
              
                <label className="field-label">Haushalt</label>
                <div className="choice-grid choice-grid--four">
                  {[
                { id: "wg", label: "WG", icon: "group" },
                { id: "familie", label: "Familie", icon: "family_restroom" },
                { id: "paar", label: "Pärchen", icon: "favorite" },
                { id: "solo", label: "Solo", icon: "person" }].
                map((p) =>
                <button
                  key={p.id} type="button"
                  onClick={() => update("persona", p.id)}
                  className={`choice ${form.persona === p.id ? "choice--active" : ""}`}>
                      <MIcon name={p.icon} size={20} fill={form.persona === p.id ? 1 : 0} />
                      {p.label}
                    </button>
                )}
                </div>
                <label className="field-label">Testplattform</label>
                <div className="choice-grid">
                  {[
                { id: "android", label: "Android", icon: "android" },
                { id: "ios", label: "iOS", icon: "phone_iphone" },
                { id: "both", label: "Beides", icon: "devices" }].
                map((p) =>
                <button key={p.id} type="button" onClick={() => update("platform", p.id)} className={`choice ${form.platform === p.id ? "choice--active" : ""}`}>
                      <MIcon name={p.icon} size={20} fill={form.platform === p.id ? 1 : 0} />
                      {p.label}
                    </button>
                )}
                </div>
                <label className="field-label" htmlFor="waitlist-region">Region optional</label>
                <input
                id="waitlist-region"
                className="waitlist-input"
                type="text"
                placeholder="Berlin, Wien, Zürich..."
                value={form.region}
                onChange={(e) => update("region", e.target.value)} />
                <input
                type="text"
                name="website"
                tabIndex="-1"
                autoComplete="off"
                aria-hidden="true"
                className="hp-field" />
                <label className="check-row">
                  <input type="checkbox" checked={form.consent} onChange={(e) => update("consent", e.target.checked)} />
                  <span>Ich möchte Beta-Einladungen und kurze Rückfragen zu Ultimate Shopper erhalten.</span>
                </label>
                {error && <div className="form-error" role="alert">{error}</div>}
                <button type="submit" className="btn btn--lg" disabled={submitting}>
                  <MIcon name={submitting ? "progress_activity" : "mark_email_read"} size={22} weight={700} /> {submitting ? "Speichert..." : "Platz reservieren"}
                </button>
                <p className="legal">
                  Mit der Anmeldung stimmst du Beta-Einladungen und kurzen Rückfragen zu. Du kannst dich jederzeit per Antwort auf die Einladung austragen.
                </p>
              </form>
            }
          </div>
        </div>
        <div className="signup-board" aria-label="Beta-Tester-Anmeldeliste">
          <div className="signup-board-head">
            <div>
              <Eyebrow>● Beta-Tester-Anmeldeliste</Eyebrow>
              <h3>{signups.length} lokale Demo-Einträge</h3>
            </div>
            <div className="signup-actions">
              <button type="button" className="btn btn--ghost" onClick={downloadCsv}>
                <MIcon name="download" size={18} weight={700} /> CSV
              </button>
              <button type="button" className="btn btn--ghost" onClick={resetDemoList}>
                <MIcon name="restart_alt" size={18} weight={700} /> Demo reset
              </button>
            </div>
          </div>
          <div className="signup-table">
            <div className="signup-row signup-row--head">
              <span>Name</span><span>Haushalt</span><span>Plattform</span><span>Region</span>
            </div>
            {visibleSignups.map((entry) =>
            <div className="signup-row" key={`${entry.email}-${entry.createdAt}`}>
                <span><strong>{entry.name}</strong><small>{entry.email}</small></span>
                <span>{personaLabels[entry.persona] || entry.persona}</span>
                <span>{platformLabels[entry.platform] || entry.platform}</span>
                <span>{entry.region || "Offen"}</span>
              </div>
            )}
          </div>
          <p>Die öffentliche Vorschau zeigt nur lokale Demo-Einträge. Echte Beta-Anmeldungen werden über den PHP-Endpunkt serverseitig gespeichert und nicht öffentlich angezeigt.</p>
        </div>
      </div>
    </section>);

}

// ============== Footer ==============
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#top" className="nav-logo">
              <img src="assets/app_icon.png" alt="" />
              <span>Ultimate Shopper</span>
            </a>
            <p>Die geteilte Einkaufsliste für DACH-Haushalte. Liebevoll handgemalt, technisch in Echtzeit. Made in Germany.</p>
            <div className="footer-socials">
              <a className="footer-social" href="#" aria-label="Instagram"><MIcon name="photo_camera" size={18} /></a>
              <a className="footer-social" href="#" aria-label="GitHub"><MIcon name="code" size={18} /></a>
              <a className="footer-social" href="#" aria-label="Mastodon"><MIcon name="forum" size={18} /></a>
              <a className="footer-social" href="#" aria-label="Mail"><MIcon name="mail" size={18} /></a>
            </div>
          </div>
          <div className="footer-col">
            <h4>Produkt</h4>
            <ul>
              <li><a href="#features">Features</a></li>
              <li><a href="#how">So funktioniert's</a></li>
              <li><a href="#kategorien">Kategorien</a></li>
              <li><a href="#familie">Robo-Familie</a></li>
              <li><a href="#waitlist">Beta beitreten</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Unternehmen</h4>
            <ul>
              <li><a href="#">Über uns</a></li>
              <li><a href="#">Roadmap</a></li>
              <li><a href="#">Blog &amp; Updates</a></li>
              <li><a href="#">Presse-Kit</a></li>
              <li><a href="#">Kontakt</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Rechtliches</h4>
            <ul>
              <li><a href="#">Datenschutz</a></li>
              <li><a href="#">AGB</a></li>
              <li><a href="#">Impressum</a></li>
              <li><a href="#">Cookies</a></li>
              <li><a href="#">Beta-Regeln</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Ultimate Shopper UG · v1.0.0-beta · Made with 🤖 </div>
          <div style={{ display: "flex", gap: 16 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <MIcon name="public" size={14} /> 🇩🇪 Deutsch (DE)
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 8, height: 8, background: "var(--us-green)", border: "1.5px solid var(--us-ink)", borderRadius: 999 }} /> Status: All systems
            </span>
          </div>
        </div>
      </div>
    </footer>);

}

window.LandingComponents = {
  Nav, Hero, Strip, FeatureGrid, HowItWorks, DeepDives, Categories, BetaProgram, Roadmap, FAQ, Waitlist, Footer
};