// ── Header ───────────────────────────────────────────────────────────────────
function Header({ cartCount, onOpenCart, onOrder, onReserve }) {
  const [solid, setSolid] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setSolid(window.scrollY > 40);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  const links = [
    { href: "#story", label: "Über uns" },
    { href: "#menu", label: "Speisekarte" },
    { href: "#besuch", label: "Besuch" },
  ];

  return (
    <header className={cx(
      "fixed top-0 inset-x-0 z-40 transition-all duration-500",
      solid ? "bg-paper/85 backdrop-blur-md border-b border-line" : "bg-transparent border-b border-transparent"
    )}>
      <div className="mx-auto max-w-[1240px] px-5 sm:px-8 h-[68px] flex items-center justify-between gap-4">
        <a href="#top" className="flex items-baseline gap-2 group" aria-label="Baarerhof Olivo Startseite">
          <span className={cx("font-serif text-[22px] leading-none transition-colors", solid ? "text-ink" : "text-paper")}>Olivo</span>
          <span className={cx("font-serif italic text-[18px] leading-none transition-colors", solid ? "text-terra" : "text-terra")}>· Baarerhof</span>
        </a>

        <nav className="hidden md:flex items-center gap-8">
          {links.map((l) => (
            <a key={l.href} href={l.href}
               className={cx("text-[15px] tracking-wide transition-colors hover:text-terra", solid ? "text-ink/80" : "text-paper/90")}>
              {l.label}
            </a>
          ))}
          <button onClick={onReserve}
            className={cx("text-[15px] tracking-wide transition-colors hover:text-terra", solid ? "text-ink/80" : "text-paper/90")}>
            Reservieren
          </button>
        </nav>

        <div className="flex items-center gap-2.5">
          <button onClick={onOpenCart}
            className={cx("relative inline-flex items-center justify-center w-11 h-11 rounded-full transition-colors",
              solid ? "text-ink hover:bg-ink/5" : "text-paper hover:bg-white/10")}
            aria-label={`Warenkorb (${cartCount})`}>
            <Ico.bag className="w-[22px] h-[22px]" />
            {cartCount > 0 && (
              <span className="absolute -top-0.5 -right-0.5 min-w-[20px] h-5 px-1 rounded-full bg-terra text-white text-[11px] font-semibold grid place-items-center">{cartCount}</span>
            )}
          </button>
          <button onClick={onOrder}
            className="hidden sm:inline-flex items-center gap-2 h-11 px-5 rounded-full bg-terra text-white text-[15px] font-medium hover:bg-terra-d transition-colors">
            Takeaway bestellen
          </button>
          <button onClick={() => setMenuOpen(true)}
            className={cx("md:hidden inline-flex items-center justify-center w-11 h-11 rounded-full", solid ? "text-ink hover:bg-ink/5" : "text-paper hover:bg-white/10")}
            aria-label="Menü öffnen">
            <Ico.menu className="w-6 h-6" />
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      {menuOpen && (
        <div className="md:hidden fixed inset-0 z-50 anim-fade" role="dialog" aria-modal="true">
          <div className="absolute inset-0 bg-ink/40 backdrop-blur-sm" onClick={() => setMenuOpen(false)} />
          <div className="absolute top-0 right-0 h-full w-[80%] max-w-xs bg-paper p-6 flex flex-col anim-sheet" style={{ animationName: "fadeIn" }}>
            <div className="flex justify-between items-center mb-10">
              <span className="font-serif text-xl">Menü</span>
              <button onClick={() => setMenuOpen(false)} className="w-11 h-11 grid place-items-center rounded-full hover:bg-ink/5" aria-label="Schliessen"><Ico.close className="w-6 h-6" /></button>
            </div>
            <nav className="flex flex-col gap-1">
              {links.map((l) => (
                <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}
                   className="font-serif text-[28px] py-2 text-ink hover:text-terra transition-colors">{l.label}</a>
              ))}
              <button onClick={() => { setMenuOpen(false); onReserve(); }}
                className="font-serif text-[28px] py-2 text-left text-ink hover:text-terra transition-colors">Reservieren</button>
            </nav>
            <button onClick={() => { setMenuOpen(false); onOrder(); }}
              className="mt-auto h-14 rounded-full bg-terra text-white text-base font-medium">Takeaway bestellen</button>
          </div>
        </div>
      )}
    </header>
  );
}

// ── Hero ─────────────────────────────────────────────────────────────────────
function Hero({ variant = "overlay", onOrder, onReserve }) {
  const sentence = "Mediterrane Küche mitten in Zug — italienisch, kroatisch, griechisch. Bei Familie Grgic, unter Olivenbäumen und mit gedecktem Tisch für dich. Auch zum Mitnehmen.";

  const Cta = ({ light }) => (
    <div className={cx("flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:gap-4", light && "justify-center")}>
      <button onClick={onOrder}
        className="group inline-flex items-center justify-center gap-2.5 h-14 px-7 rounded-full bg-terra text-white text-[16px] font-medium hover:bg-terra-d transition-all shadow-lg shadow-black/10">
        Takeaway bestellen
        <Ico.arrow className="w-5 h-5 transition-transform group-hover:translate-x-1" />
      </button>
      <button onClick={onReserve}
        className={cx("inline-flex items-center justify-center gap-2 h-14 px-6 rounded-full border text-[16px] font-medium transition-colors",
          light ? "border-white/35 text-paper hover:bg-white/10" : "border-ink/20 text-ink hover:bg-ink/5")}>
        Tisch reservieren
      </button>
    </div>
  );

  if (variant === "split") {
    return (
      <section id="top" className="relative pt-[68px]">
        <div className="mx-auto max-w-[1240px] px-5 sm:px-8 grid lg:grid-cols-2 gap-10 lg:gap-16 items-center min-h-[88vh] py-16">
          <div className="reveal in">
            <div className="font-mono text-xs uppercase tracking-[0.24em] text-terra mb-6">Cucina mediterranea · Zug</div>
            <h1 className="font-serif leading-[0.95] text-[clamp(2.8rem,8vw,5.5rem)]">
              Olivo<br /><span className="italic text-terra">Baarerhof</span>
            </h1>
            <p className="mt-7 text-[18px] sm:text-[20px] leading-relaxed text-muted max-w-md">{sentence}</p>
            <div className="mt-9"><Cta light={false} /></div>
          </div>
          <div className="relative reveal in">
            <FoodPlaceholder tone={20} label="Hero · Pasta-Teller" className="aspect-[4/5] w-full shadow-2xl shadow-black/15" />
            <div className="absolute -bottom-5 -left-5 hidden sm:block bg-card border border-line rounded-xl2 px-5 py-4 shadow-xl">
              <div className="font-mono text-[10px] uppercase tracking-widest text-muted">Abholbereit in</div>
              <div className="font-serif text-2xl text-ink">~ 20 Min.</div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  if (variant === "editorial") {
    return (
      <section id="top" className="relative pt-[68px]">
        <div className="mx-auto max-w-[1240px] px-5 sm:px-8 pt-10 pb-6">
          <div className="flex flex-wrap items-end justify-between gap-6 reveal in">
            <h1 className="font-serif leading-[0.9] text-[clamp(3rem,12vw,8.5rem)]">
              Olivo <span className="italic text-terra">Baarerhof</span>
            </h1>
            <p className="text-[17px] leading-relaxed text-muted max-w-xs">{sentence}</p>
          </div>
        </div>
        <div className="relative mx-auto max-w-[1240px] px-5 sm:px-8">
          <FoodPlaceholder tone={22} label="Hero · Tavola italiana" className="aspect-[16/7] w-full reveal in" />
          <div className="absolute inset-x-0 bottom-6 flex justify-center"><Cta light /></div>
        </div>
      </section>
    );
  }

  // default: overlay (zentriert)
  return (
    <section id="top" className="relative min-h-[100svh] flex items-center justify-center text-center grain">
      <div className="absolute inset-0">
        <FoodPlaceholder tone={24} label="Hero · Tavola della casa" rounded="rounded-none" showLabel={false} className="w-full h-full" />
      </div>
      <div className="absolute inset-0" style={{ background: "linear-gradient(to top, rgba(24,15,9,.62) 0%, rgba(30,19,12,.34) 55%, rgba(24,15,9,.44) 100%)" }} />
      <div className="absolute inset-0" style={{ background: "radial-gradient(74% 56% at 50% 46%, rgba(16,10,6,.52), transparent 72%)" }} />
      <span className="absolute left-5 sm:left-8 top-[88px] z-10 font-mono text-[10px] uppercase tracking-widest text-white/55 bg-black/25 px-2 py-1 rounded">Foto · Hero</span>
      <div className="relative z-10 mx-auto max-w-3xl w-full px-5 sm:px-8 pt-24 pb-16">
        <div className="font-mono text-xs uppercase tracking-[0.26em] mb-6 reveal in" style={{ color: "color-mix(in oklab, var(--accent) 62%, white)" }}>Cucina mediterranea · Zug</div>
        <h1 className="font-serif text-paper leading-[0.92] text-[clamp(3rem,10vw,7rem)] reveal in">
          Olivo<br /><span className="italic text-paper/80">Baarerhof</span>
        </h1>
        <p className="mt-7 text-[18px] sm:text-[22px] leading-relaxed text-paper max-w-xl mx-auto reveal in" style={{ textShadow: "0 1px 18px rgba(12,7,3,.6)" }}>{sentence}</p>
        <div className="mt-10 flex justify-center reveal in"><Cta light /></div>
      </div>
    </section>
  );
}

// ── Über uns (echt: Familie Grgic) ───────────────────────────────────────────
function Story() {
  return (
    <section id="story" className="py-24 sm:py-32">
      <div className="mx-auto max-w-[1240px] px-5 sm:px-8 grid lg:grid-cols-12 gap-10 lg:gap-16 items-center">
        <div className="lg:col-span-5 order-2 lg:order-1 relative reveal">
          <FoodPlaceholder tone={70} label="Rosi & Ivan Grgic" className="aspect-[4/5] w-full" />
          <FoodPlaceholder tone={94} label="Olivenbäume im Garten" className="absolute -bottom-8 -right-4 w-2/5 aspect-square border-4 border-paper hidden sm:block" />
        </div>
        <div className="lg:col-span-7 order-1 lg:order-2 reveal">
          <SectionHead kicker="Chi siamo · Über uns" title="Mediterrane Gastfreundschaft bei Familie Grgic." />
          <div className="mt-7 space-y-5 text-[17px] leading-relaxed text-muted max-w-xl">
            <p>Olivenbäume am Eingang und im Garten, dunkle Kassettenwände, warmes Licht und gedeckte Tische: <strong className="text-ink font-medium">Rosi und Ivan Grgic</strong> haben dem traditionsreichen Baarerhof eine mediterrane Seele gegeben — neu als <span className="italic font-serif text-ink">Olivo · Baarerhof</span>.</p>
            <p>Ursprünglich aus Kroatien, leben die beiden seit über drei Jahrzehnten in der Schweiz und kennen die Gastronomie aus dem Effeff. Ivan steht als Küchenchef am Herd, Rosi führt den Service. Auf den Teller kommt der ganze Mittelmeerraum: italienisch, kroatisch, griechisch und französisch.</p>
            <p>Ihr Anspruch ist einfach: ein behagliches Speiserestaurant mit gutem Preis-Leistungs-Verhältnis, in dem sich alle wohlfühlen — ob mittags schnell, abends in Ruhe oder im Sommer draussen unter altem Baumbestand.</p>
          </div>
          <div className="mt-9 flex flex-wrap gap-x-10 gap-y-5">
            {[["7 Tage", "geöffnet bis 24 Uhr"], ["Gartenterrasse", "ruhig & schattig"], ["Parkplätze", "direkt vor Ort"]].map(([a, b]) => (
              <div key={a}>
                <div className="font-serif text-3xl text-ink">{a}</div>
                <div className="font-mono text-[11px] uppercase tracking-widest text-muted mt-1">{b}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Besuch: Öffnungszeiten + Kontakt + Standort ──────────────────────────────
function Visit({ onOrder, onReserve }) {
  return (
    <section id="besuch" className="py-24 sm:py-32 bg-ink text-paper grain">
      <div className="relative z-10 mx-auto max-w-[1240px] px-5 sm:px-8">
        <div className="reveal"><SectionHead kicker="Besuch & Kontakt" title="Komm vorbei — oder hol dir Olivo nach Hause." light /></div>

        <div className="mt-14 grid lg:grid-cols-12 gap-8 lg:gap-10">
          {/* Öffnungszeiten */}
          <div className="lg:col-span-4 reveal">
            <div className="flex items-center gap-2 text-terra mb-5"><Ico.clock className="w-5 h-5" /><span className="font-mono text-xs uppercase tracking-[0.2em]">Öffnungszeiten</span></div>
            <ul className="divide-y divide-white/10">
              {RESTAURANT.hours.map((h) => (
                <li key={h.d} className="flex justify-between items-baseline gap-4 py-3">
                  <span className={cx("text-[15px]", h.closed ? "text-paper/45" : "text-paper/90")}>{h.d}</span>
                  <span className={cx("text-[15px] text-right tabular-nums", h.closed ? "text-paper/45 italic" : "text-paper")}>{h.t}</span>
                </li>
              ))}
            </ul>
            <div className="mt-5 flex flex-wrap items-center gap-2">
              <span className="inline-flex items-center gap-2 rounded-full bg-terra/15 border border-terra/30 text-terra px-3.5 py-2 text-[13px]">
                <Ico.bag className="w-4 h-4" /> Takeaway: {RESTAURANT.takeawayHours}
              </span>
              <span className="inline-flex items-center gap-2 rounded-full border border-white/15 text-paper/70 px-3.5 py-2 text-[13px]">
                Gartenterrasse · genügend Parkplätze
              </span>
            </div>
          </div>

          {/* Kontakt */}
          <div className="lg:col-span-4 reveal">
            <div className="flex items-center gap-2 text-terra mb-5"><Ico.pin className="w-5 h-5" /><span className="font-mono text-xs uppercase tracking-[0.2em]">Standort</span></div>
            <address className="not-italic text-[17px] leading-relaxed text-paper/90">
              {RESTAURANT.address.street}<br />{RESTAURANT.address.city}<br />{RESTAURANT.address.country}
            </address>
            <div className="mt-6 flex flex-col gap-3">
              <a href={RESTAURANT.phoneHref} className="inline-flex items-center gap-3 text-[16px] text-paper/90 hover:text-terra transition-colors">
                <Ico.phone className="w-5 h-5 text-terra" /> {RESTAURANT.phone}
              </a>
              <a href={"mailto:" + RESTAURANT.email} className="inline-flex items-center gap-3 text-[16px] text-paper/90 hover:text-terra transition-colors">
                <span className="w-5 text-center text-terra">@</span> {RESTAURANT.email}
              </a>
            </div>
          </div>

          {/* Karten-Platzhalter + CTA */}
          <div className="lg:col-span-4 reveal">
            <div className="relative rounded-xl2 overflow-hidden border border-white/10 aspect-[4/3] grain"
                 style={{ background: "linear-gradient(135deg, #3a342c, #2a251f)" }}>
              <div className="absolute inset-0 opacity-[0.18]" style={{ backgroundImage: "linear-gradient(var(--paper) 1px, transparent 1px), linear-gradient(90deg, var(--paper) 1px, transparent 1px)", backgroundSize: "28px 28px" }} />
              <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-terra"><Ico.pin className="w-9 h-9" /></div>
              <span className="absolute left-3 bottom-3 z-10 font-mono text-[10px] uppercase tracking-widest text-paper/55">Karte · Baarerstrasse 65, Zug</span>
            </div>
            <div className="mt-5 grid grid-cols-2 gap-2.5">
              <button onClick={onReserve} className="h-13 py-3.5 rounded-full border border-white/25 text-paper text-[15px] font-medium hover:bg-white/10 transition-colors">
                Reservieren
              </button>
              <button onClick={onOrder} className="h-13 py-3.5 rounded-full bg-terra text-white text-[15px] font-medium hover:bg-terra-d transition-colors">
                Takeaway
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Footer ───────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="bg-ink text-paper/60 border-t border-white/10">
      <div className="mx-auto max-w-[1240px] px-5 sm:px-8 py-12 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
        <div className="flex items-baseline gap-2">
          <span className="font-serif text-xl text-paper">Olivo</span>
          <span className="font-serif italic text-lg text-terra">· Baarerhof</span>
        </div>
        <p className="text-[13px] leading-relaxed max-w-sm">
          Cucina mediterranea · {RESTAURANT.address.street}, {RESTAURANT.address.city}. Geführt von {RESTAURANT.owners}.
        </p>
        <div className="font-mono text-[11px] uppercase tracking-widest">© {new Date().getFullYear()} Olivo · Baarerhof</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, Story, Visit, Footer });