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

/* =================================================================
   COPY — Italian, surf/skate hype tone
   ================================================================= */

const HERO_HEADLINES = {
  A: { line1: "Drop in.", line2: "Pinta su.", line3: "Marea alta." },
  B: { line1: "Ride", line2: "the Drop!", line3: "" }
};

const SLOGANS = [
"Da Fregene su una ruota",
"Live Music",
"Dj Set",
"Cibo che spacca",
"Vibes alte",
"Fino a tarda notte",
"HB MÜNCHEN",
"ECB",
"Burger spaziali",
"Prendi l'onda"];


const ANTIPASTI = [
{ n: "01", name: "Super Nachos", desc: "Cheddar · guacamole · chili con carne · jalapeños", price: "9" },
{ n: "02", name: "Tagliere Drop's", desc: "Salumi · formaggi · bruschettine · per 2 persone", price: "15" },
{ n: "03", name: "Drop's Chili", desc: "Chili con carne di manzo · cumino · coriandolo", price: "8", spicy: true },
{ n: "04", name: "Olive Ascolane", desc: "Artigianali · porzione abbondante", price: "5" }];


const PRIMI = [
{ n: "05", name: "Drop's Cheese Burger", desc: "Scottona 180g · Edam · bacon · salsa rosa", price: "14" },
{ n: "06", name: "Big Kahuna", desc: "Scottona · salsa cheddar · pulled pork · bacon · cicoria", price: "18" },
{ n: "07", name: "Los Lobos", desc: "Cotoletta crunchy di pollo · bacon · coleslaw · salsa ranch", price: "14" },
{ n: "08", name: "Teahupo'o", desc: "Pulled pork · coleslaw · salsa BBQ al whiskey", price: "14" }];


const BOARD = [
{ n: "09", name: "Surfing Ribs", desc: "Costine di maiale marinate cotte al forno · piccanti", price: "18" },
{ n: "10", name: "Drop's Schnitzel", desc: "Cotoletta di vitello 300g · french fries · marmellata mirtilli", price: "18" },
{ n: "11", name: "Galletto Kentucky", desc: "Al forno · erbe aromatiche · peperoncino · patate", price: "16", spicy: true },
{ n: "12", name: "Bavarian Mix", desc: "Tris di wrustel · bratwrust, servelade, bauernwrust · crauti", price: "14" }];


const TAPS = [
{ n: 1, name: "Hofbräu Original", style: "Lager · 5,1°", origin: "München", note: "La spina di ordinanza · maltata, pulita", big: "0,4 L · € 6", small: "0,25 L · € 4" },
{ n: 2, name: "Hofbräu Keller", style: "Keller · 5,1°", origin: "München", note: "Non filtrata · rotonda · da bere", big: "0,4 L · € 6", small: "0,25 L · € 4" },
{ n: 3, name: "Hofbräu Münchner Weisse", style: "Weisse · 5,1°", origin: "München", note: "Frumento · banana · chiodi di garofano", big: "0,4 L · € 6", small: "0,25 L · € 4" },
{ n: 4, name: "ECB Lupa", style: "IPA · 6,2°", origin: "Italia", note: "Tropicale · luppoli americani", big: "0,5 L · € 8", small: "0,3 L · € 6" },
{ n: 5, name: "ECB 30 Sacchi", style: "Double IPA · 7,8°", origin: "Italia", note: "Bomba luppolata · i gradi si sentono", big: "0,5 L · € 8", small: "0,3 L · € 6" },
{ n: 6, name: "Guinness", style: "Dry Stout · 4,2°", origin: "Ireland", note: "Cacao · caffè · ovviamente perfetta", big: "0,5 L · € 8", small: "0,3 L · € 6" }];


const COCKTAILS = [
{ name: "Drop's Spritz", price: "7", ing: "Venturo · prosecco · soda (segreto della casa)" },
{ name: "Aperol Spritz", price: "7", ing: "Aperol · prosecco · soda" },
{ name: "Whisky Sour", price: "8", ing: "Bulleit bourbon · limone · zucchero" },
{ name: "Gin Basil Sour", price: "8", ing: "Tanqueray · basilico · limone" },
{ name: "Cosmopolitan", price: "8", ing: "Vodka · triple sec · cranberry · lime" },
{ name: "Barman Special", price: "12", ing: "Proposta del mese dai nostri bartender" }];


const EVENTS = [
{ day: "VEN", date: "23 MAG", title: "Vinile Reggae Sunset", dj: "DJ Sandalo · solo 45 giri", hour: "19:00 → 24:00" },
{ day: "SAB", date: "24 MAG", title: "Live · Mareggiata Trio", dj: "Surf-rock romano dal vivo", hour: "21:30 → tardi" },
{ day: "DOM", date: "25 MAG", title: "Brunch & Surf Check", dj: "Forecast a colazione", hour: "10:00 → 14:00" },
{ day: "MER", date: "28 MAG", title: "Skate Jam · Best Trick", dj: "Premi: birre a vita (quasi)", hour: "18:00 → 21:00" }];


const HOURS = [
{ d: "Lunedì", h: "19:00 → 02:00" },
{ d: "Martedì", h: "19:00 → 02:00" },
{ d: "Mercoledì", h: "19:00 → 02:00" },
{ d: "Giovedì", h: "19:00 → 02:00" },
{ d: "Venerdì", h: "19:00 → 02:00" },
{ d: "Sabato", h: "19:00 → 02:00" },
{ d: "Domenica", h: "19:00 → 02:00" }];


/* =================================================================
   Small reusable bits
   ================================================================= */

function Marquee({ items }) {
  const loop = [...items, ...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {loop.map((t, i) =>
        <span className="marquee-item" key={i}>
            <span>{t}</span>
            <span className="dot"></span>
          </span>
        )}
      </div>
    </div>);

}

function WaveLine({ height = 60, opacity = 1, stroke = 2 }) {
  // long horizontal wave path, animated drift
  return (
    <svg viewBox="0 0 1280 60" width="100%" height={height} preserveAspectRatio="none" style={{ opacity, display: "block" }}>
      <path className="wave-anim" d="M-100 30 Q 20 0, 140 30 T 380 30 T 620 30 T 860 30 T 1100 30 T 1340 30 T 1580 30"
      fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" />
    </svg>);

}

function StampMini({ children, rot = -8 }) {
  return <span className="stamp" style={{ transform: `rotate(${rot}deg)` }}>{children}</span>;
}

/* =================================================================
   HERO SLIDER — rotating background images with Ken Burns
   ================================================================= */
function HeroSlider({ images, interval = 5500 }) {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % images.length), interval);
    return () => clearInterval(t);
  }, [images.length, interval]);
  return (
    <div className="hero-slider" aria-hidden="true">
      {images.map((src, idx) =>
      <div
        key={src}
        className={"hero-slide" + (idx === i ? " is-active" : "")}
        style={{ backgroundImage: `url(${src})` }} />

      )}
      <div className="hero-slide-overlay" />
      <div className="hero-slider-dots">
        {images.map((_, idx) =>
        <button
          key={idx}
          type="button"
          aria-label={`Slide ${idx + 1}`}
          className={"hero-slider-dot" + (idx === i ? " is-active" : "")}
          onClick={() => setI(idx)} />

        )}
      </div>
    </div>);

}

/* =================================================================
   SITE HEADER — fixed at top, persists across scroll
   ================================================================= */
function SiteHeader() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Lock body scroll while overlay is open — iOS-safe pattern.
  // On iOS Safari `overflow: hidden` alone doesn't stop scroll; you must pin
  // the body with position: fixed and restore the scroll position on close,
  // otherwise the page underneath drifts and feels "stuck".
  React.useEffect(() => {
    if (!menuOpen) return;
    const scrollY = window.scrollY;
    const body = document.body;
    const prev = {
      position: body.style.position,
      top: body.style.top,
      left: body.style.left,
      right: body.style.right,
      width: body.style.width,
      overflow: body.style.overflow
    };
    body.style.position = "fixed";
    body.style.top = `-${scrollY}px`;
    body.style.left = "0";
    body.style.right = "0";
    body.style.width = "100%";
    body.style.overflow = "hidden";
    return () => {
      body.style.position = prev.position;
      body.style.top = prev.top;
      body.style.left = prev.left;
      body.style.right = prev.right;
      body.style.width = prev.width;
      body.style.overflow = prev.overflow;
      window.scrollTo(0, scrollY);
    };
  }, [menuOpen]);

  // Close on ESC
  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [menuOpen]);

  const closeMenu = () => setMenuOpen(false);

  return (
    <React.Fragment>
      <header className={"site-header" + (scrolled ? " is-scrolled" : "")} data-screen-label="Header">
        <div className="site-header-inner">
          <nav className="hero-nav-side hero-nav-left mono">
            <a href="index.html#about">IL PUB</a>
            <a href="index.html#menu">Cucina</a>
            <a href="index.html#birre">Birre</a>
          </nav>

          <a href="index.html" className="header-logo" aria-label="Drop's home">
            <img src="assets/logo.png" alt="Drop's Fregene Beach" />
          </a>

          <nav className="hero-nav-side hero-nav-right mono">
            <a href="seleziona_menu.html" className="nav-menu-cta">Menu</a>
            <a href="index.html#gallery" style={{ fontSize: "24px" }}>UPDATES</a>
            <a href="index.html#info">Trovaci</a>
          </nav>

          {/* Burger toggle — only visible on mobile via CSS */}
          <button
            type="button"
            className={"burger-btn" + (menuOpen ? " is-open" : "")}
            aria-label={menuOpen ? "Chiudi menu" : "Apri menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}>

            <span className="burger-lines" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </span>
          </button>
        </div>
      </header>

      {/* Mobile fullscreen overlay menu */}
      <div
        className={"mobile-menu" + (menuOpen ? " is-open" : "")}
        role="dialog"
        aria-modal="true"
        aria-hidden={!menuOpen}>

        <div className="mobile-menu-top">
          <a href="index.html" className="mobile-menu-logo" onClick={closeMenu} aria-label="Drop's home">
            <img src="assets/logo.png" alt="Drop's Fregene Beach" />
          </a>
          <button
            type="button"
            className="mobile-menu-close"
            aria-label="Chiudi menu"
            onClick={closeMenu}>

            <span aria-hidden="true">×</span>
          </button>
        </div>

        <nav className="mobile-menu-nav" aria-label="Navigazione principale">
          <a href="index.html#about" onClick={closeMenu}>
            <span className="mobile-menu-num mono">01</span>
            <span className="mobile-menu-label">Il Pub</span>
          </a>
          <a href="index.html#menu" onClick={closeMenu}>
            <span className="mobile-menu-num mono">02</span>
            <span className="mobile-menu-label">Cucina</span>
          </a>
          <a href="index.html#birre" onClick={closeMenu}>
            <span className="mobile-menu-num mono">03</span>
            <span className="mobile-menu-label">Birre</span>
          </a>
          <a href="seleziona_menu.html" onClick={closeMenu} className="is-cta">
            <span className="mobile-menu-num mono">04</span>
            <span className="mobile-menu-label">Menu</span>
          </a>
          <a href="index.html#gallery" onClick={closeMenu}>
            <span className="mobile-menu-num mono">05</span>
            <span className="mobile-menu-label">Updates</span>
          </a>
          <a href="index.html#info" onClick={closeMenu}>
            <span className="mobile-menu-num mono">06</span>
            <span className="mobile-menu-label">Trovaci</span>
          </a>
        </nav>

        <div className="mobile-menu-foot mono">
          <a href="https://wa.me/393452331812?text=Ciao%20Drop%27s%2C%20vorrei%20prenotare%20un%20tavolo" target="_blank" rel="noopener" onClick={closeMenu}>
            Prenota un tavolo →
          </a>
          <span className="mobile-menu-foot-sep">·</span>
          <span className="mobile-menu-foot-place">Fregene Beach</span>
        </div>
      </div>
    </React.Fragment>);

}

/* =================================================================
   HERO
   ================================================================= */
function Hero({ variant }) {
  const h = HERO_HEADLINES[variant];
  return (
    <section className="section hero has-slider paper" style={{ paddingTop: 36 }}>
      {/* Rotating image slider behind everything */}
      <HeroSlider images={["assets/hero-1.jpg", "assets/hero-2.jpg"]} />

      {/* Hero content overlay — centered, text on top of slider */}
      <div className="hero-content" style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        textAlign: "center",
        gap: 32,
        padding: "60px 0 80px"
      }}>
        <h1 className="display hero-headline" style={{ fontSize: 168, lineHeight: 0.9, margin: 0 }}>
          <span style={{ display: "block" }}>{h.line1}</span>
          <span style={{ display: "block", color: "var(--blue)" }}>
            <span className="underline-wave">{h.line2}</span>
          </span>
          <span style={{ display: "block" }}>{h.line3}</span>
        </h1>

        <p style={{ margin: 0, fontSize: 21, lineHeight: 1.45, maxWidth: 620, fontFamily: "EB Garamond, serif", color: "rgb(245, 234, 210)" }}>
          C'è un posto a Fregene dove il rumore delle onde si mescola al profumo della birra, le tavole da surf pendono dal soffitto e i motori custom guardano dal muro.
          <span className="script" style={{ fontSize: 34, color: "var(--ochre)", marginLeft: 6 }}>Roba seria.</span>
        </p>
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap", justifyContent: "center" }}>
          <a className="btn btn-primary" href="https://wa.me/393452331812?text=Ciao%20Drop%27s%2C%20vorrei%20prenotare%20un%20tavolo" target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center", gap: 14 }}>
            <span style={{
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              width: 44, height: 44,
              borderRadius: "50%",
              background: "#25D366",
              color: "#fff",
              border: "2px solid #1a0e07",
              boxShadow: "2px 2px 0 rgba(0,0,0,0.35)",
              flexShrink: 0
            }} aria-hidden="true">
              <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
                <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.1-1.2-.5-2.3-1.5-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.7.7 2.4.8 3.2.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.1-1.3c1.4.8 3.1 1.2 4.9 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.2c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.2.8.9-3.1-.2-.3C3.9 14.9 3.4 13.5 3.4 12 3.4 7.3 7.3 3.4 12 3.4S20.6 7.3 20.6 12 16.7 20.2 12 20.2z" />
              </svg>
            </span>
            Prenota un tavolo <span className="arrow">→</span>
          </a>
          <a className="btn" href="seleziona_menu.html">Sfoglia il menu</a>
        </div>
      </div>

      {/* Bottom wave decoration */}
      <div className="bg-waves" style={{ height: 80, top: "auto", bottom: 0, color: "var(--ochre)" }}>
        <WaveLine height={60} opacity={0.4} />
      </div>
    </section>);

}

/* =================================================================
   ABOUT
   ================================================================= */
function About({ variant }) {
  return (
    <section className="section paper" id="about">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
        <div style={{ position: "sticky", top: 40 }}>
          <div className="kicker">01 — La storia</div>
          <h2 className="display" style={{ fontSize: 96, lineHeight: 0.92, margin: "20px 0 32px" }}>
            Nati sulla cresta dell'<br />
            <span style={{ color: "var(--blue)" }}>onda.</span>
          </h2>
          <image-slot id={`about-${variant}-1`}
          src="assets/about-story.webp"
          style={{
            width: "100%", height: 360,
            filter: "brightness(1.12) contrast(1.18) saturate(1.18)"
          }}
          shape="rounded" radius="6"
          placeholder="Foto del locale / dello staff"></image-slot>
        </div>

        <div>
          <p className="dropcap" style={{ fontSize: 22, lineHeight: 1.5, margin: 0 }}>
            DROP'S non è solo un posto dove mangiare — è il posto dove ci si ritrova,
            si chiacchiera fino a tardi, si scopre una nuova birra e magari si finisce
            per tornare la settimana dopo. E poi quella dopo ancora.
          </p>
          <p style={{ lineHeight: 1.6, marginTop: 32, fontSize: "21px" }}>
            Siamo un risto pub con l'anima libera — ispirata al surf californiano,
            allo skate da strada e alle moto custom. Un mix di cultura, stile e buon
            cibo che si respira in ogni angolo del locale.
          </p>
          <p style={{ lineHeight: 1.6, fontSize: "20px" }}>
            <span className="script" style={{ fontSize: 28, color: "var(--blue)" }}>Da mangiare?</span>{" "}
            Niente fronzoli: hamburger d'autore e griglia, roba vera fatta con materie
            prime selezionate.
          </p>
          <p style={{ lineHeight: 1.6, fontSize: "21px" }}>
            <span className="script" style={{ fontSize: 28, color: "var(--blue)" }}>Da bere?</span>{" "}
            Una selezione di birre artigianali e non che accontenta chi cerca qualcosa
            di diverso dalla solita bionda.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 48 }}>
            <div className="card">
              <div className="display" style={{ fontSize: 56, color: "var(--blue)", lineHeight: 1 }}>7</div>
              <div className="mono" style={{ fontSize: 11, marginTop: 8 }}>Birre alla spina</div>
            </div>
            <div className="card">
              <div className="display" style={{ fontSize: 56, color: "var(--blue)", lineHeight: 1 }}>03</div>
              <div className="mono" style={{ fontSize: 11, marginTop: 8 }}>Min dal mare</div>
            </div>
            <div className="card">
              <div className="display" style={{ fontSize: 56, color: "var(--blue)", lineHeight: 1 }}>∞</div>
              <div className="mono" style={{ fontSize: 11, marginTop: 8 }}>Notti senza pioggia</div>
            </div>
          </div>

          <div className="tag-row" style={{ marginTop: 36 }}>
            {["Pet friendly", "Tavoli fuori", "Live music", "Long board parking", "Cucina aperta fino tardi", "Hard rock therapy"].map((t) =>
            <span className="sticker" key={t}>★ {t}</span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

window.HeroSection = Hero;
window.AboutSection = About;
window.SiteHeader = SiteHeader;
window.MarqueeRow = Marquee;
window.WaveLine = WaveLine;
window.StampMini = StampMini;
window.SLOGANS = SLOGANS;
window.ANTIPASTI = ANTIPASTI;
window.PRIMI = PRIMI;
window.BOARD = BOARD;
window.TAPS = TAPS;
window.COCKTAILS = COCKTAILS;
window.EVENTS = EVENTS;
window.HOURS = HOURS;