/* sections.jsx — header, hero, menu, subscription, about, newsletter, footer */

function Header({ count, onCart, onNav, scrolled, pop }) {
  return (
    <header className={"hdr" + (scrolled ? " scrolled" : "")}>
      <div className="wrap hdr-in">
        <a className="brand" href="#top" onClick={(e) => { e.preventDefault(); onNav("top"); }}>
          <span className="brand-mark"><Icon.bowl /></span>
          <span className="brand-name">Christines<small>Suppenküche</small></span>
        </a>
        <nav className="nav">
          <a href="#menu" onClick={(e) => { e.preventDefault(); onNav("menu"); }}>Speisekarte</a>
          <a href="#abo" onClick={(e) => { e.preventDefault(); onNav("abo"); }}>Suppen-Abo</a>
          <a href="#about" onClick={(e) => { e.preventDefault(); onNav("about"); }}>Über Christine</a>
          <a href="#footer" onClick={(e) => { e.preventDefault(); onNav("footer"); }}>Liefergebiet</a>
        </nav>
        <button className="cart-btn" onClick={onCart}>
          <Icon.bag /> <span className="cart-btn-label">Warenkorb</span>
          {count > 0 && <span className={"cart-count" + (pop ? " pop" : "")}>{count}</span>}
        </button>
      </div>
    </header>
  );
}

/* ---------------- HERO ---------------- */
function Hero({ variant, onBrowse, onAbo }) {
  const meta = (
    <div className="hero-meta">
      <div className="m"><b>6</b><span>Sorten frisch gekocht</span></div>
      <div className="m"><b>2×</b><span>Lieferung pro Woche</span></div>
      <div className="m"><b>100%</b><span>Hausgemacht in Zürich</span></div>
    </div>
  );
  const cta = (
    <div className="hero-cta">
      <button className="btn btn-primary btn-lg" onClick={onBrowse}>Zur Speisekarte <Icon.arrowR /></button>
      <button className="btn btn-ghost btn-lg" onClick={onAbo}>Suppen-Abo ansehen</button>
    </div>
  );

  if (variant === "fullbleed") {
    return (
      <section className="hero hero-fullbleed" id="top">
        <div className="hb-stage">
          <Photo id="hero-main" label="Hero-Foto: dampfende Suppe" tint="#c0612f" />
          <div className="hb-scrim"></div>
          <div className="hb-copy">
            <div className="wrap">
              <span className="eyebrow">Hausgemacht in Zürich</span>
              <h1 className="h-title">Wärme,<br/>im <em>Löffel</em> serviert.</h1>
              <p className="h-sub">Christine kocht jede Woche frische Suppen aus saisonalem Gemüse – mit Liebe, ohne Zusätze. Bestellen, und wir liefern bis vor die Tür.</p>
              {cta}
            </div>
          </div>
        </div>
      </section>
    );
  }

  if (variant === "centered") {
    return (
      <section className="hero hero-centered" id="top">
        <div className="wrap hero-in">
          <div className="hc-head">
            <span className="eyebrow center">Hausgemacht in Zürich</span>
            <h1 className="h-title">Suppe, wie sie <em>früher</em> geschmeckt hat.</h1>
            <p className="h-sub">Frisch gekocht aus saisonalem Gemüse, in kleinen Mengen, jede Woche neu. Christine bringt sie persönlich vorbei oder schickt sie dir gekühlt nach Hause.</p>
            {cta}
          </div>
          <div className="hc-strip">
            <div><Photo id="hero-1" label="Suppe 1" tint="#d98b3a" /></div>
            <div><Photo id="hero-2" label="Suppe 2" tint="#b8402f" /></div>
            <div><Photo id="hero-3" label="Suppe 3" tint="#8e3554" /></div>
          </div>
        </div>
      </section>
    );
  }

  // editorial (default)
  return (
    <section className="hero hero-editorial" id="top">
      <div className="wrap hero-in">
        <div className="hero-copy">
          <span className="eyebrow">Hausgemacht in Zürich</span>
          <h1 className="h-title">Wärme,<br/>im <em>Löffel</em><br/>serviert.</h1>
          <p className="h-sub">Christine kocht jede Woche frische Suppen aus saisonalem Gemüse – mit Liebe, ohne Zusätze. Bestellen, und wir liefern bis vor die Tür.</p>
          {cta}
          {meta}
        </div>
        <div className="hero-art">
          <Photo id="hero-main" label="Hero-Foto: dampfende Suppe" tint="#c0612f" radius="28" />
          <div className="hero-badge">
            <span className="seal"><Icon.leaf /></span>
            <div><b>Saisonal & frisch</b><span>Gemüse vom Markt, jede Woche neu</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- PRODUCT CARD ---------------- */
function ProductCard({ soup, variant, qtyInCart, onAdd, fav, onFav }) {
  const [justAdded, setJustAdded] = React.useState(false);
  const overlay = variant === "overlay";
  const handleAdd = () => {
    onAdd(soup);
    setJustAdded(true);
    setTimeout(() => setJustAdded(false), 1100);
  };
  return (
    <article className="card">
      <div className="card-media">
        <Photo id={soup.imgId} label={soup.name} tint={soup.tint} />
        {overlay && <div className="card-scrim"></div>}
        {!overlay && variant !== "horizontal" && (
          <span className="card-price-pill">{CHF(soup.price)}</span>
        )}
        <button className={"card-fav" + (fav ? " on" : "")} onClick={() => onFav(soup.id)} aria-label="merken">
          <Icon.heart filled={fav} />
        </button>
      </div>
      <div className="card-body">
        <div className="card-tags">
          {soup.tags.map((t) => <Tag key={t} k={t} />)}
        </div>
        <h3>{soup.name}</h3>
        <p className="card-desc">{soup.desc}</p>
        <div className="card-info">
          <span className="ci"><Icon.bowl /> {soup.size}</span>
          <span className="ci"><Icon.flame /> {soup.kcal} kcal</span>
        </div>
        {!overlay && <p className="card-allergen">{soup.allergens}</p>}
        <div className="card-foot">
          <span className="price">{CHF(soup.price)}<small>/ Portion</small></span>
          <button className={"card-add" + (justAdded ? " added" : "")} onClick={handleAdd}>
            {justAdded ? (<><Icon.check /> Drin{qtyInCart > 1 ? ` ·${qtyInCart}` : ""}</>) : (<><Icon.plus /> In den Korb</>)}
          </button>
        </div>
      </div>
    </article>
  );
}

function Menu({ soups, layout, cart, onAdd, favs, onFav }) {
  return (
    <section className="section" id="menu">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Diese Woche im Topf</span>
            <h2>Die Speisekarte</h2>
          </div>
          <p className="lead">Jede Suppe wird frisch gekocht und gekühlt geliefert – einfach erwärmen und geniessen. Preise pro Portion.</p>
        </div>
        <div className={"menu-grid layout-" + layout}>
          {soups.map((s) => {
            const inCart = cart.find((c) => c.id === s.id);
            return (
              <ProductCard
                key={s.id}
                soup={s}
                variant={layout}
                qtyInCart={inCart ? inCart.qty : 0}
                onAdd={onAdd}
                fav={favs.includes(s.id)}
                onFav={onFav}
              />
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- SUBSCRIPTION ---------------- */
function Subscription({ plans, onChoose }) {
  return (
    <section className="section sub" id="abo">
      <div className="wrap">
        <div className="section-head center">
          <span className="eyebrow center">Nie mehr ohne Suppe</span>
          <h2>Das Suppen-Abo</h2>
          <p>Lass dir wöchentlich frische Suppen liefern. Du wählst die Sorten, wir kümmern uns um den Rest – jederzeit pausierbar oder kündbar.</p>
        </div>
        <div className="sub-grid">
          {plans.map((p) => (
            <div key={p.id} className={"plan" + (p.featured ? " featured" : "")}>
              <h3>{p.name}</h3>
              <div className="plan-sub">{p.sub}</div>
              <div className="plan-price">{CHF(p.price).replace("CHF ", "")}<small> CHF {p.per}</small></div>
              <ul>
                {p.feats.map((f, i) => <li key={i}><Icon.check /> {f}</li>)}
              </ul>
              <button className={"btn " + (p.featured ? "btn-primary" : "btn-ghost")} onClick={() => onChoose(p)}>
                Abo starten
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- ABOUT ---------------- */
function About() {
  return (
    <section className="section" id="about">
      <div className="wrap about-grid">
        <div className="about-art">
          <Photo id="about-christine" label="Foto von Christine" tint="#a98a52" radius="30" />
          <div className="stamp">Seit<br/>2019</div>
        </div>
        <div className="about-copy">
          <span className="eyebrow">Die Geschichte dahinter</span>
          <h2>Hallo, ich bin Christine.</h2>
          <p className="q">„Eine gute Suppe ist das ehrlichste Essen, das ich kenne – ein Topf, etwas Zeit und gutes Gemüse.“</p>
          <p>Was als sonntägliches Ritual für Familie und Nachbarn begann, ist heute meine kleine Suppenküche in Wollishofen. Ich koche in kleinen Mengen, von Hand, mit Gemüse vom Markt – ohne Geschmacksverstärker, ohne Konservierungsstoffe.</p>
          <p>Jede Woche stelle ich eine neue Auswahl zusammen. Was ich nicht selbst in Zürich vorbeibringe, schicke ich dir frisch gekühlt nach Hause.</p>
          <div className="about-sign">
            <span className="sig">Christine</span>
            <span className="who">Christine Pfluger · Köchin & Gründerin</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- NEWSLETTER ---------------- */
function Newsletter() {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email && /\S+@\S+\.\S+/.test(email)) setDone(true);
  };
  return (
    <section className="section" style={{ paddingTop: 20 }}>
      <div className="wrap">
        <div className="news">
          <h2>Die Suppe der Woche, frisch ins Postfach</h2>
          <p>Jeden Montag verrate ich dir, was diese Woche im Topf landet – plus kleine Rezepte und Saisonales.</p>
          {done ? (
            <span className="news-ok"><Icon.check style={{ width: 18, height: 18 }} /> Danke! Du bist dabei – bis Montag.</span>
          ) : (
            <form className="news-form" onSubmit={submit}>
              <input type="email" placeholder="deine@email.ch" value={email} onChange={(e) => setEmail(e.target.value)} />
              <button className="btn btn-primary" type="submit">Abonnieren</button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer({ site, onNav }) {
  return (
    <footer className="footer" id="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-col brand-col">
            <a className="brand" href="#top" onClick={(e) => { e.preventDefault(); onNav("top"); }}>
              <span className="brand-mark"><Icon.bowl /></span>
              <span className="brand-name">Christines<small>Suppenküche</small></span>
            </a>
            <p className="footer-blurb">Hausgemachte Suppen aus frischem, saisonalem Gemüse – gekocht mit Liebe in Zürich Wollishofen.</p>
            <div className="foot-tags">
              <span className="tag tag-vegan"><Icon.leaf /> Vegan-Optionen</span>
              <span className="tag tag-gf">Glutenfrei</span>
            </div>
          </div>
          <div className="footer-col">
            <h4>Entdecken</h4>
            <a href="#menu" onClick={(e) => { e.preventDefault(); onNav("menu"); }}>Speisekarte</a>
            <a href="#abo" onClick={(e) => { e.preventDefault(); onNav("abo"); }}>Suppen-Abo</a>
            <a href="#about" onClick={(e) => { e.preventDefault(); onNav("about"); }}>Über Christine</a>
          </div>
          <div className="footer-col">
            <h4>Liefergebiet</h4>
            {site.areas.map((a, i) => <p key={i}><span style={{ display: "inline-flex", gap: 7, alignItems: "center" }}><Icon.pin style={{ width: 14, height: 14, opacity: .7 }} /> {a}</span></p>)}
            <p style={{ display: "inline-flex", gap: 7, alignItems: "center", color: "var(--ink-mute)", fontSize: 13 }}><Icon.clock style={{ width: 14, height: 14 }} /> {site.delivery}</p>
          </div>
          <div className="footer-col">
            <h4>Kontakt</h4>
            <a href={"mailto:" + site.email}><span style={{ display: "inline-flex", gap: 7, alignItems: "center" }}><Icon.mail style={{ width: 14, height: 14, opacity: .7 }} /> {site.email}</span></a>
            <a href={"tel:" + site.phone.replace(/\s/g, "")}><span style={{ display: "inline-flex", gap: 7, alignItems: "center" }}><Icon.info style={{ width: 14, height: 14, opacity: .7 }} /> {site.phone}</span></a>
          </div>
        </div>
        <div className="footer-bot">
          <span>© {new Date().getFullYear()} {site.name} · Mit Liebe gekocht in Zürich</span>
          <span>Impressum · Datenschutz · AGB</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, ProductCard, Menu, Subscription, About, Newsletter, Footer });