// ---- Site chrome: announcement, header, footer, cart drawer ---------

function AnnouncementBar() {
  const items = [
    "Versand für 4,95 € in ganz Deutschland",
    "Produziert in Deutschland",
    "Jedes Buch ein Unikat, auf dich personalisiert",
    "Lieferung in 8 bis 10 Tagen",
  ];
  return (
    <div style={{ background: "var(--espresso)", color: "var(--cream)", fontFamily: "var(--ui)",
      fontSize: 12.5, letterSpacing: ".08em", padding: "9px 0", textTransform: "uppercase" }}>
      <Marquee items={items} speed={42} />
    </div>
  );
}

function Header({ go, route, cartCount, openCart }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const nav = [
    { label: "Das Journal", to: () => go("product") },
    { label: "So funktioniert's", to: () => go("home", "how") },
    { label: "Magazin", to: () => go("blog") },
    { label: "Bewertungen", to: () => go("home", "reviews") },
    { label: "FAQ", to: () => go("home", "faq") },
  ];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(255,247,229,.92)" : "var(--cream)",
      backdropFilter: scrolled ? "saturate(1.1) blur(10px)" : "none",
      borderBottom: "1px solid " + (scrolled ? "var(--line)" : "transparent"),
      transition: "background .3s, border-color .3s" }}>
      <div className="j-wrap" style={{ display: "grid", gridTemplateColumns: "auto 1fr auto",
        alignItems: "center", height: 76, gap: 24 }}>
        <button onClick={() => go("home")} style={{ background: "none", border: "none", cursor: "pointer",
          display: "flex", justifyContent: "flex-start" }} aria-label="Journella Startseite">
          <LogoWord color="brown" height={26} />
        </button>
        <nav className="j-desktop" style={{ display: "flex", gap: 26, justifyContent: "center",
          fontFamily: "var(--ui)", fontSize: 14.5 }}>
          {nav.map(n => (
            <button key={n.label} onClick={n.to} className="j-navlink"
              style={{ background: "none", border: "none", cursor: "pointer", color: "var(--espresso)",
                fontFamily: "inherit", fontSize: "inherit", padding: "6px 0" }}>
              {n.label}
            </button>
          ))}
        </nav>
        <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 6 }}>
          <button className="j-iconbtn j-desktop" aria-label="Suche"><Icon name="search" size={20} /></button>
          <button className="j-iconbtn j-desktop" aria-label="Konto"><Icon name="user" size={20} /></button>
          <button className="j-iconbtn" onClick={openCart} aria-label="Warenkorb" style={{ position: "relative" }}>
            <Icon name="cart" size={20} />
            {cartCount > 0 && <span className="j-cart-badge">{cartCount}</span>}
          </button>
        </div>
      </div>
    </header>
  );
}

function CartDrawer({ open, onClose, items, setItems, go }) {
  const [stage, setStage] = useState("cart"); // cart | success
  useEffect(() => { if (open) setStage("cart"); }, [open]);
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  const setQty = (i, q) => {
    if (q < 1) { setItems(items.filter((_, idx) => idx !== i)); return; }
    setItems(items.map((it, idx) => idx === i ? { ...it, qty: q } : it));
  };
  return (
    <>
      <div onClick={onClose} className="j-scrim" style={{
        opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none" }} />
      <aside className="j-drawer" style={{ transform: open ? "translateX(0)" : "translateX(102%)" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "22px 26px", borderBottom: "1px solid var(--line)" }}>
          <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 23 }}>
            {stage === "cart" ? "Dein Warenkorb" : "Bestellung bestätigt"}
          </span>
          <button className="j-iconbtn" onClick={onClose} aria-label="Schließen"><Icon name="close" size={20} /></button>
        </div>

        {stage === "success" ? (
          <div style={{ padding: "48px 28px", textAlign: "center" }}>
            <div className="j-success-tick"><Icon name="check" size={34} stroke={2} /></div>
            <h3 style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 28, margin: "22px 0 8px" }}>Danke von Herzen.</h3>
            <p style={{ color: "var(--ink-soft)", lineHeight: 1.6, maxWidth: 320, margin: "0 auto" }}>
              Dein Journal wird jetzt eigens für dich gebunden. Eine Bestätigung ist auf dem Weg in dein Postfach.
            </p>
            <div style={{ marginTop: 28 }}>
              <Button variant="outline" onClick={() => { onClose(); }}>Weiter stöbern</Button>
            </div>
          </div>
        ) : items.length === 0 ? (
          <div style={{ padding: "60px 28px", textAlign: "center", color: "var(--ink-soft)" }}>
            <div style={{ display: "grid", placeItems: "center", marginBottom: 16, color: "var(--rose)" }}>
              <Icon name="cart" size={40} stroke={1.4} />
            </div>
            <p style={{ marginBottom: 22 }}>Dein Warenkorb ist noch leer.</p>
            <Button onClick={() => { onClose(); go("product"); }}>Journal personalisieren</Button>
          </div>
        ) : (
          <>
            <div style={{ flex: 1, overflowY: "auto", padding: "8px 26px" }}>
              {items.map((it, i) => (
                <div key={i} style={{ display: "flex", gap: 16, padding: "22px 0", borderBottom: "1px solid var(--line)" }}>
                  <div style={{ width: 84, flexShrink: 0 }}>
                    <div className="j-cover-mini"><JournalCover data={it.data} accent={it.accent} flat scale={1} /></div>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 19, lineHeight: 1.15 }}>Schwangerschaftsjournal</div>
                    <div style={{ fontSize: 12.5, color: "var(--ink-soft)", marginTop: 4, lineHeight: 1.5 }}>
                      {it.data.name ? <>für {it.data.name}<br/></> : null}
                      {window.formatDateDE(it.data.et) || "Termin offen"}, {BIRTHPLACES[it.data.ort].label}
                    </div>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 12 }}>
                      <div className="j-qty">
                        <button onClick={() => setQty(i, it.qty - 1)} aria-label="weniger"><Icon name="minus" size={14} /></button>
                        <span>{it.qty}</span>
                        <button onClick={() => setQty(i, it.qty + 1)} aria-label="mehr"><Icon name="plus" size={14} /></button>
                      </div>
                      <span style={{ fontFamily: "var(--ui)", fontWeight: 600 }}>{eur(it.price * it.qty)}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ padding: "20px 26px 26px", borderTop: "1px solid var(--line)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                <span style={{ color: "var(--ink-soft)" }}>Zwischensumme</span>
                <span style={{ fontWeight: 600, fontFamily: "var(--ui)" }}>{eur(subtotal)}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 18, fontSize: 14, color: "var(--ink-soft)" }}>
                <span>Versand</span><span style={{ fontFamily: "var(--ui)" }}>4,95 €</span>
              </div>
              <Button full size="lg" onClick={() => setStage("success")}>Zur Kasse · {eur(subtotal + 4.95)}</Button>
              <p style={{ textAlign: "center", fontSize: 12, color: "var(--ink-soft)", marginTop: 12 }}>
                30 Tage Geld-zurück-Garantie · Sichere Zahlung
              </p>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

function Footer({ go }) {
  const cols = [
    { h: "Journella", links: ["Das Journal", "So funktioniert's", "Magazin", "Bewertungen", "Geschenkgutschein"] },
    { h: "Hilfe", links: ["Kontakt", "Versand und Lieferung", "Personalisierung ändern", "Retoure"] },
    { h: "Rechtliches", links: ["AGB", "Datenschutz", "Widerrufsrecht", "Impressum"] },
  ];
  return (
    <footer style={{ background: "var(--espresso)", color: "var(--cream)" }}>
      <div className="j-wrap" style={{ paddingBlock: "70px" }}>
        <div className="j-foot-grid">
          <div style={{ maxWidth: 320 }}>
            <LogoWord color="cream" height={30} />
            <p style={{ marginTop: 20, lineHeight: 1.7, color: "rgba(255,247,229,.7)", fontSize: 15 }}>
              Ein personalisiertes Schwangerschaftsjournal, das bleibt. Plane voraus, halte fest, was war.
            </p>
            <form onClick={(e)=>e.preventDefault()} className="j-news">
              <input placeholder="Deine E-Mail" aria-label="E-Mail" />
              <button aria-label="Anmelden"><Icon name="arrow" size={18} /></button>
            </form>
            <p style={{ fontSize: 12.5, color: "rgba(255,247,229,.55)", marginTop: 10 }}>10% auf deine erste Bestellung.</p>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div className="j-foot-h">{c.h}</div>
              <ul>{c.links.map(l => <li key={l}><a href="#" onClick={(e)=>e.preventDefault()}>{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="j-foot-bottom">
          <span>© {new Date().getFullYear()} Journella · journella.de</span>
          <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
            Produziert in Deutschland
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { AnnouncementBar, Header, CartDrawer, Footer });
