// Pizzeria Vesuvio — sections (Header, Hero, Pilastri, Storia, Menu, Contatti, Footer, CallBar)

const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Logo Vesuvio ---------- */
function LogoVesuvio({ size = 36, withText = true, withTagline = true, color = '#f5f0e6' }) {
  return (
    <a href="#top" className="logo flex items-center gap-3" aria-label="Pizzeria Vesuvio">
      <svg className="logo-svg shrink-0" width={size} height={size * 0.85} viewBox="0 0 60 50" fill="none" style={{ color }}>
        {/* stylized vulcano silhouette */}
        <path className="peak" d="M3 44 L20 18 L28 28 L36 12 L57 44 Z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" />
        {/* smoke wisps */}
        <path d="M34 8 q4 -4 2 -7" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" opacity="0.7" />
        <path d="M40 5 q3 -3 1 -5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" opacity="0.5" />
      </svg>
      {withText ? (
        <div className="flex flex-col leading-none">
          <span className="font-display font-extrabold tracking-tight" style={{ fontSize: size * 0.6, color }}>VESUVIO</span>
          {withTagline ? <span className="font-mono uppercase mt-0.5" style={{ fontSize: 9, letterSpacing: 2.5, color: '#a89e8b' }}>Pizzeria · dal 1965</span> : null}
        </div>
      ) : null}
    </a>
  );
}

/* ---------- Header ---------- */
function Header({ t, lang, onLang, scrolled, onOpenMenu }) {
  return (
    <header
      className="fixed top-0 left-0 right-0 z-40 transition-all"
      style={{
        background: scrolled ? 'rgba(15,13,10,0.92)' : 'rgba(15,13,10,0.45)',
        backdropFilter: 'blur(10px) saturate(140%)',
        WebkitBackdropFilter: 'blur(10px) saturate(140%)',
        borderBottom: scrolled ? '1px solid #3a3530' : '1px solid transparent',
      }}
    >
      <div className="max-w-[1400px] mx-auto px-5 md:px-10 py-3 md:py-4 flex items-center justify-between">
        <LogoVesuvio size={36} />
        <nav className="hidden md:flex items-center gap-8 font-mono text-[12px] tracking-[2px] uppercase">
          <a href="#storia" className="hover:text-senape transition-colors">{t.nav.storia}</a>
          <a href="#menu" className="hover:text-senape transition-colors">{t.nav.menu}</a>
          <a href="#contatti" className="hover:text-senape transition-colors">{t.nav.contatti}</a>
          <div className="flex items-center gap-1.5 ml-4 pl-4 border-l border-hairline">
            {['it', 'de', 'en'].map(l => (
              <button key={l} className={`lang-btn uppercase ${lang === l ? 'active' : ''}`} onClick={() => onLang(l)}>{l}</button>
            ))}
          </div>
        </nav>
        <button className="md:hidden text-cream p-2 -mr-2" aria-label="apri menu" onClick={onOpenMenu}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18"/></svg>
        </button>
      </div>
    </header>
  );
}

function MobileDrawer({ open, onClose, t, lang, onLang }) {
  return (
    <div className={`md:hidden fixed inset-0 z-50 ${open ? '' : 'pointer-events-none'}`}>
      <div className={`absolute inset-0 bg-black transition-opacity ${open ? 'opacity-60' : 'opacity-0'}`} onClick={onClose} />
      <div className={`drawer ${open ? 'open' : ''} absolute right-0 top-0 bottom-0 w-[82vw] max-w-[340px] bg-ink-2 p-6 flex flex-col`}>
        <div className="flex items-center justify-between">
          <LogoVesuvio size={32} withTagline={false} />
          <button onClick={onClose} className="text-cream p-2 -mr-2" aria-label="chiudi">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
        </div>
        <nav className="mt-10 flex flex-col gap-2 font-display text-3xl">
          <a href="#storia" onClick={onClose} className="py-2">{t.nav.storia}</a>
          <a href="#menu" onClick={onClose} className="py-2">{t.nav.menu}</a>
          <a href="#contatti" onClick={onClose} className="py-2">{t.nav.contatti}</a>
        </nav>
        <div className="mt-auto pt-6 border-t border-hairline">
          <div className="font-mono text-[10px] tracking-[2px] text-cream-dim mb-3">LINGUA</div>
          <div className="flex items-center gap-3">
            {['it', 'de', 'en'].map(l => (
              <button key={l} className={`lang-btn ${lang === l ? 'active' : ''}`} onClick={() => { onLang(l); }}>{l.toUpperCase()}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Hero — "1965 monumentale" + CTA/chip da V1 ---------- */
function Hero({ t, onGoToMenu }) {
  return (
    <section id="top" className="relative min-h-[100vh] md:min-h-[100vh] pt-24 md:pt-28 pb-12 overflow-hidden">
      {/* warm vignette */}
      <div aria-hidden className="absolute inset-0 pointer-events-none"
        style={{
          background: 'radial-gradient(ellipse 80% 60% at 80% 30%, rgba(212,167,62,0.10), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 80%, rgba(183,58,42,0.10), transparent 65%)'
        }}
      />
      <div className="relative max-w-[1400px] mx-auto px-5 md:px-10 grid grid-cols-12 gap-4 md:gap-6 items-end" style={{ minHeight: 'calc(100vh - 140px)' }}>
        {/* Massive 1965 numerals */}
        <div className="col-span-12 md:col-span-7 relative">
          <div className="font-mono text-[10px] md:text-[11px] tracking-[5px] text-forno-hi mb-4 md:mb-6">
            <span className="inline-block w-8 h-px align-middle bg-forno-hi mr-3" />
            {t.hero.kicker}
          </div>
          <div className="num-mega text-cream"
            style={{
              fontSize: 'clamp(170px, 30vw, 460px)',
              letterSpacing: '-0.05em',
            }}
          >1965</div>
          <div className="mt-6 md:mt-8 max-w-[600px]">
            <h1 className="display-hero text-cream"
              style={{ fontSize: 'clamp(40px, 6vw, 76px)' }}
            >
              Pizzeria Vesuvio.
            </h1>
            <p className="mt-2 font-display italic font-bold text-senape" style={{ fontSize: 'clamp(20px, 2.6vw, 30px)' }}>
              {t.hero.sub}
            </p>
          </div>
          <div className="mt-6 flex flex-wrap items-center gap-3">
            <span className="chip chip-senape">{t.hero.badge}</span>
            <a href="#menu" onClick={onGoToMenu} className="btn-primary">{t.hero.ctaMenu} <span aria-hidden>→</span></a>
            <a href="tel:+390471000000" className="btn-ghost"><span aria-hidden>📞</span> {t.hero.ctaCall} · <span className="font-mono normal-case tracking-normal">0471 …</span></a>
          </div>
          <div className="mt-2 font-mono text-[10px] text-cream-dim/70">
            ↑ telefono da confermare in bozza
          </div>
        </div>

        {/* Inset photo on the right, slightly tilted */}
        <div className="col-span-12 md:col-span-5 relative flex md:justify-end mt-8 md:mt-0">
          <div
            className="w-full md:w-[400px] aspect-[4/5] mb-2 overflow-hidden border border-hairline relative bg-ink-2"
            style={{ transform: 'rotate(1.4deg)' }}
          >
            <img src="img/forno-pizza.jpg" alt="Forno a legna acceso, pizza in cottura"
              className="w-full h-full object-cover"
              onError={(e) => { e.target.style.display='none'; e.target.parentElement.classList.add('ph-photo'); }}
            />
          </div>
        </div>
      </div>
      {/* scroll indicator */}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 hidden md:flex flex-col items-center gap-2 text-cream-dim">
        <svg width="14" height="20" viewBox="0 0 14 20" fill="none" stroke="currentColor" strokeWidth="1.4">
          <rect x="1" y="1" width="12" height="18" rx="6"/>
          <circle cx="7" cy="7" r="1.5" fill="currentColor" stroke="none">
            <animate attributeName="cy" values="6;11;6" dur="1.8s" repeatCount="indefinite"/>
          </circle>
        </svg>
        <span className="font-mono text-[9px] tracking-[3px] uppercase">{t.hero.scroll}</span>
      </div>
    </section>
  );
}

/* ---------- Pilastri — mosaico asimmetrico V2 ---------- */
function Pilastri({ t }) {
  const blocks = t.pilastri.blocks;
  return (
    <section className="relative border-t border-hairline">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10 pt-14 md:pt-20 pb-6">
        <div className="font-mono text-[11px] tracking-[3px] text-forno-hi">{t.pilastri.sectionKicker}</div>
        <h2 className="font-display text-cream mt-2 max-w-[820px]"
          style={{ fontSize: 'clamp(34px, 4.5vw, 58px)', fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.01em' }}>
          {t.pilastri.sectionTitle}
        </h2>
      </div>
      {/* mosaic grid */}
      <div className="max-w-[1400px] mx-auto px-5 md:px-10 pb-20">
        <div
          className="grid border border-hairline"
          style={{
            gridTemplateColumns: '1.3fr 1fr',
            gridTemplateRows: 'minmax(340px, auto) minmax(220px, auto)',
          }}
        >
          {/* TL — Dal 1965 (big black) */}
          <div className="p-7 md:p-10 border-r border-b border-hairline bg-ink-2 flex flex-col justify-between relative overflow-hidden">
            <div className="font-mono text-[10px] tracking-[3px] text-senape">· {blocks[0].n}</div>
            <div>
              <div className="font-display text-cream"
                style={{ fontSize: 'clamp(56px, 9vw, 130px)', fontWeight: 900, lineHeight: 0.88, letterSpacing: '-0.04em' }}
              >
                Dal<br/>1965
              </div>
              <p className="mt-6 max-w-[420px] text-cream-dim text-[14px] md:text-[15px] leading-relaxed">{blocks[0].s}</p>
            </div>
            {/* faint vulcano outline */}
            <svg viewBox="0 0 200 80" className="absolute -right-6 -bottom-4 w-[260px] opacity-10" aria-hidden>
              <path d="M5 75 L60 25 L95 55 L130 12 L195 75 Z" fill="none" stroke="#f5f0e6" strokeWidth="2" />
            </svg>
          </div>
          {/* TR — Napoletana vera */}
          <div className="p-7 md:p-10 border-b border-hairline flex flex-col justify-between">
            <div className="font-mono text-[10px] tracking-[3px] text-forno-hi">· {blocks[1].n}</div>
            <div>
              <div className="font-display text-cream"
                style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', fontWeight: 800, lineHeight: 1, letterSpacing: '-0.01em' }}>
                {blocks[1].t}
              </div>
              <p className="mt-4 text-cream-dim text-[14px] leading-relaxed">{blocks[1].s}</p>
            </div>
          </div>
          {/* BL — Forno a legna */}
          <div className="p-7 md:p-10 border-r border-hairline flex flex-col justify-between">
            <div className="font-mono text-[10px] tracking-[3px] text-forno-hi">· {blocks[2].n}</div>
            <div>
              <div className="font-display text-cream"
                style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', fontWeight: 800, lineHeight: 1, letterSpacing: '-0.01em' }}>
                {blocks[2].t}
              </div>
              <p className="mt-4 text-cream-dim text-[14px] leading-relaxed">{blocks[2].s}</p>
            </div>
          </div>
          {/* BR — 50 Top Pizza (senape) */}
          <div className="p-7 md:p-10 flex flex-col justify-between relative overflow-hidden"
            style={{ background: '#d4a73e', color: '#0f0d0a' }}
          >
            <div className="font-mono text-[10px] tracking-[3px]">★ · {blocks[3].n}</div>
            <div>
              <div className="font-display"
                style={{ fontSize: 'clamp(32px, 4vw, 52px)', fontWeight: 900, lineHeight: 0.95, letterSpacing: '-0.01em' }}>
                50 Top<br/>Pizza
              </div>
              <p className="mt-4 text-ink/80 text-[14px] leading-relaxed max-w-[300px]">{blocks[3].s}</p>
            </div>
            <svg viewBox="0 0 24 24" className="absolute -right-2 -top-2 w-32 opacity-15" aria-hidden>
              <path d="M12 2 L14.5 9 L22 9.5 L16 14 L18 22 L12 17.5 L6 22 L8 14 L2 9.5 L9.5 9 Z" fill="#0f0d0a"/>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Storia — editorial + timeline ---------- */
function Storia({ t }) {
  const events = t.storia.timeline;
  return (
    <section id="storia" className="relative border-t border-hairline pt-16 md:pt-24 pb-20">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10">
        <div className="grid grid-cols-12 gap-6 md:gap-10 items-start">
          {/* Left: copy */}
          <div className="col-span-12 md:col-span-7">
            <div className="font-mono text-[11px] tracking-[3px] text-forno-hi">{t.storia.kicker}</div>
            <h2 className="font-display text-cream mt-2"
              style={{ fontSize: 'clamp(40px, 5.4vw, 72px)', fontWeight: 800, lineHeight: 0.96, letterSpacing: '-0.02em' }}>
              {t.storia.title}
            </h2>
            <p className="mt-6 md:mt-8 text-cream/90 max-w-[620px] text-[16px] md:text-[18px] leading-relaxed"
              style={{ fontFamily: 'Fraunces, serif', fontWeight: 500 }}>
              {t.storia.body}
            </p>
            <p className="mt-4 font-mono text-[10px] tracking-[1.5px] text-forno-hi/80 max-w-[620px]">
              ※ {t.storia.bodyNote}
            </p>
            {/* Stats — fatti onesti, non copy inventato */}
            <div className="mt-10 md:mt-14 grid grid-cols-3 gap-4 md:gap-8 max-w-[620px] border-t border-hairline pt-8">
              <div>
                <div className="font-display font-extrabold text-senape leading-none"
                  style={{ fontSize: 'clamp(40px, 5vw, 64px)', letterSpacing: '-0.02em' }}>60+</div>
                <div className="font-mono text-[10px] tracking-[2px] text-cream-dim mt-3 uppercase">anni</div>
              </div>
              <div>
                <div className="font-display font-extrabold text-senape leading-none"
                  style={{ fontSize: 'clamp(40px, 5vw, 64px)', letterSpacing: '-0.02em' }}>3</div>
                <div className="font-mono text-[10px] tracking-[2px] text-cream-dim mt-3 uppercase">generazioni</div>
              </div>
              <div>
                <div className="font-display font-extrabold text-senape leading-none"
                  style={{ fontSize: 'clamp(40px, 5vw, 64px)', letterSpacing: '-0.02em' }}>45+</div>
                <div className="font-mono text-[10px] tracking-[2px] text-cream-dim mt-3 uppercase">pizze</div>
              </div>
            </div>
          </div>
          {/* Right: stacked tilted photos */}
          <div className="col-span-12 md:col-span-5 relative md:pl-8">
            <div className="aspect-[4/3] w-full md:w-[88%] overflow-hidden border border-hairline relative bg-ink-2" style={{ transform: 'rotate(-1.8deg)' }}>
              <img src="img/interno-sala.jpg" alt="Sala interna della pizzeria con la sagoma del Vesuvio sul muro"
                className="w-full h-full object-cover"
                onError={(e) => { e.target.style.display='none'; e.target.parentElement.classList.add('ph-photo'); }}
              />
            </div>
            <div className="aspect-[4/3] w-full md:w-[88%] mt-6 md:mt-4 md:ml-[18%] overflow-hidden border border-hairline relative bg-ink-2" style={{ transform: 'rotate(1.6deg)' }}>
              <img src="img/bancone-bar.jpg" alt="Bancone bar e ingresso del locale"
                className="w-full h-full object-cover"
                onError={(e) => { e.target.style.display='none'; e.target.parentElement.classList.add('ph-photo'); }}
              />
            </div>
          </div>
        </div>

        {/* Timeline */}
        <div className="mt-16 md:mt-24 border-t border-hairline pt-10">
          <div className="flex items-baseline justify-between flex-wrap gap-2">
            <div className="font-mono text-[11px] tracking-[3px] text-forno-hi">1965 → OGGI</div>
            <div className="font-display italic text-cream-dim text-[18px]">{t.storia.timelineLabel}</div>
          </div>
          <div className="relative mt-12 pb-2">
            {/* horizontal line */}
            <div className="absolute left-0 right-0 top-[10px] border-t border-hairline" />
            <div className="grid grid-cols-2 md:grid-cols-4 gap-y-10">
              {events.map((e, i) => (
                <div key={i} className="relative flex flex-col items-center text-center px-2">
                  <div className="w-[18px] h-[18px] rounded-full relative z-10 mb-3"
                    style={{
                      background: i === 0 || i === events.length - 1 ? '#b73a2a' : '#f5f0e6',
                      border: '3px solid #0f0d0a',
                    }}
                  />
                  <div className="font-mono text-[12px] font-semibold tracking-[1.5px]"
                    style={{ color: i === 0 || i === events.length - 1 ? '#cf513e' : '#f5f0e6' }}
                  >{e.y}</div>
                  <div className="font-display text-cream mt-1 text-[16px] md:text-[18px] leading-tight max-w-[180px]">{e.t}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Menu — sidebar V2 ---------- */
function Menu({ t, cat, setCat }) {
  const cats = [
    { id: 'popolari', label: t.menu.categories.popolari },
    { id: 'recensioni', label: t.menu.categories.recensioni },
    { id: 'pizze', label: t.menu.categories.pizze, count: window.MENU.pizze.length },
    { id: 'filoncini', label: t.menu.categories.filoncini, count: window.MENU.filoncini.length },
    { id: 'calzoncini', label: t.menu.categories.calzoncini, count: window.MENU.calzoncini.length },
    { id: 'calzoni', label: t.menu.categories.calzoni, count: window.MENU.calzoni.length },
    { id: 'bevande', label: t.menu.categories.bevande, count: window.MENU.bevande.length },
    { id: 'vini', label: t.menu.categories.vini, count: window.MENU.vini.length },
    { id: 'dessert', label: t.menu.categories.dessert, count: window.MENU.dessert.length },
  ];

  const items = useMemo(() => {
    if (cat === 'popolari') return window.MENU_POPULAR;
    if (cat === 'recensioni') return window.MENU_RECENSIONI;
    return window.MENU[cat] || [];
  }, [cat]);

  const tagLabel = (tag) => t.menu.tag[tag] || tag;

  return (
    <section id="menu" className="relative border-t border-hairline pt-16 md:pt-24 pb-20">
      <div className="max-w-[1400px] mx-auto px-5 md:px-10">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-3 md:gap-8 mb-6">
          <div>
            <div className="font-mono text-[11px] tracking-[3px] text-forno-hi">· {t.menu.kicker}</div>
            <h2 className="font-display text-cream mt-2"
              style={{ fontSize: 'clamp(40px, 5.4vw, 72px)', fontWeight: 800, lineHeight: 0.96, letterSpacing: '-0.02em' }}>
              {t.menu.title}
            </h2>
            <div className="font-display italic text-senape mt-2" style={{ fontSize: 'clamp(18px, 2vw, 22px)' }}>
              {t.menu.sub}
            </div>
          </div>
          <div className="price-warning px-4 py-2 flex items-start gap-3 max-w-[420px]">
            <span aria-hidden className="text-[16px]">⚠</span>
            <div>
              <div className="font-semibold">{t.menu.warning}</div>
              <div className="text-cream-dim mt-0.5">{t.menu.warningBody}</div>
            </div>
          </div>
        </div>

        {/* Mobile: horizontal chips */}
        <div className="md:hidden flex gap-2 overflow-x-auto pb-3 -mx-5 px-5 mt-2" style={{ scrollSnapType: 'x mandatory' }}>
          {cats.map(c => (
            <button key={c.id}
              onClick={() => setCat(c.id)}
              className={`shrink-0 chip ${cat === c.id ? '' : ''}`}
              style={{
                background: cat === c.id ? '#b73a2a' : 'transparent',
                color: cat === c.id ? '#faf6ec' : '#a89e8b',
                borderColor: cat === c.id ? '#b73a2a' : '#3a3530',
                scrollSnapAlign: 'start',
              }}
            >
              {c.label}{c.count ? ` (${c.count})` : ''}
            </button>
          ))}
        </div>

        {/* Desktop: sidebar + content */}
        <div className="mt-6 grid grid-cols-12 gap-0 border border-hairline">
          <aside className="hidden md:flex col-span-3 flex-col bg-ink-2 p-6 gap-1">
            <div className="font-mono text-[10px] tracking-[2px] text-cream-dim mb-3">CATEGORIE</div>
            {cats.map(c => (
              <button key={c.id}
                onClick={() => setCat(c.id)}
                className="text-left py-2 px-3 font-mono text-[12px] tracking-[1.2px] transition-colors relative"
                style={{
                  background: cat === c.id ? '#b73a2a' : 'transparent',
                  color: cat === c.id ? '#faf6ec' : '#a89e8b',
                }}
              >
                <span className="uppercase">{c.label}</span>
                {c.count ? <span className="ml-2 opacity-70">({c.count})</span> : null}
              </button>
            ))}
            <div className="mt-6 pt-4 border-t border-hairline text-cream-dim text-[11px] leading-relaxed">
              <span className="font-mono">{t.menu.asteriskNote}</span>
            </div>
          </aside>
          <div className="col-span-12 md:col-span-9 p-5 md:p-8">
            {items.length === 0 ? (
              <div className="text-cream-dim font-mono text-[12px]">{t.menu.empty}</div>
            ) : (
              <ul className="divide-y divide-hairline">
                {items.map((it, i) => (
                  <li key={i} className="menu-row grid grid-cols-[1fr_auto] gap-6 py-4 items-baseline">
                    <div>
                      <div className="flex items-baseline flex-wrap gap-x-3 gap-y-1">
                        <span className="font-display font-bold text-cream text-[18px] md:text-[20px]">{it.name}</span>
                        {it.tags && it.tags.map(tag => (
                          <span key={tag} className="font-mono text-[9px] tracking-[1.5px] uppercase"
                            style={{ color: tag === 'recensioni' ? '#d4a73e' : tag === 'vegano' || tag === 'veg' ? '#86a86d' : '#cf513e' }}
                          >· {tagLabel(tag)}</span>
                        ))}
                      </div>
                      {it.desc ? <div className="text-cream/65 mt-1 text-[13px] md:text-[14px]"
                        style={{ fontFamily: 'Inter, sans-serif' }}
                      >{it.desc}</div> : null}
                      {it.note ? <div className="font-mono text-[10px] mt-1 text-forno-hi/80">※ {it.note}</div> : null}
                    </div>
                    <div className="font-mono text-cream font-semibold whitespace-nowrap text-[15px] md:text-[16px]">
                      {it.price} €<span className="text-forno-hi">*</span>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
        <div className="mt-3 font-mono text-[10px] tracking-[1.5px] text-cream-dim text-right">{t.menu.asteriskNote}</div>
      </div>
    </section>
  );
}

/* ---------- Contatti — mappa larga + 3 col ---------- */
function Contatti({ t }) {
  return (
    <section id="contatti" className="relative border-t border-hairline">
      <div className="relative w-full h-[300px] md:h-[440px] bg-ink-2 border-b border-hairline overflow-hidden">
        <iframe
          title="Pizzeria Vesuvio · Viale Trieste 44, Bolzano"
          src="https://www.google.com/maps?q=Viale%20Trieste%2044%2C%20Bolzano&t=&z=15&ie=UTF8&iwloc=B&output=embed"
          className="w-full h-full block"
          style={{ border: 0 }}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        />
        <div className="absolute top-4 left-4 chip chip-forno bg-ink/80 backdrop-blur">
          📍 {t.contatti.directionsLabel}
        </div>
      </div>

      <div className="max-w-[1400px] mx-auto px-5 md:px-10 pt-12 md:pt-16 pb-8">
        <div className="font-mono text-[11px] tracking-[3px] text-forno-hi">{t.contatti.kicker}</div>
        <h2 className="font-display text-cream mt-2"
          style={{ fontSize: 'clamp(36px, 5vw, 64px)', fontWeight: 800, lineHeight: 0.98, letterSpacing: '-0.02em' }}>
          {t.contatti.title}
        </h2>
      </div>

      <div className="max-w-[1400px] mx-auto px-5 md:px-10 pb-20 grid grid-cols-1 md:grid-cols-3 gap-0 border-t border-hairline">
        {/* Address */}
        <div className="p-6 md:p-10 border-b md:border-b-0 md:border-r border-hairline">
          <div className="font-mono text-[10px] tracking-[2.5px] text-forno-hi">· {t.contatti.addressLabel}</div>
          <div className="mt-3 font-display font-bold text-cream text-[22px] md:text-[26px] leading-tight">
            {t.contatti.address.map((l, i) => <div key={i}>{l}</div>)}
          </div>
          <a href="https://www.google.com/maps/dir/?api=1&destination=Viale+Trieste+44+Bolzano"
            target="_blank" rel="noopener noreferrer"
            className="inline-flex items-center gap-2 mt-6 font-mono text-[11px] tracking-[1.5px] uppercase text-senape border-b border-senape/40 hover:border-senape pb-1">
            {t.contatti.ctaDirections}
          </a>
        </div>
        {/* Hours */}
        <div className="p-6 md:p-10 border-b md:border-b-0 md:border-r border-hairline">
          <div className="font-mono text-[10px] tracking-[2.5px] text-forno-hi">· {t.contatti.hoursLabel}</div>
          <div className="mt-3 space-y-1 font-mono text-[13px] text-cream/90">
            {t.contatti.hours.map((h, i) => <div key={i}>{h}</div>)}
          </div>
          <div className="mt-4 font-mono text-[10px] text-forno-hi/80">※ {t.contatti.hoursPlaceholderNote}</div>
        </div>
        {/* Phone */}
        <div className="p-6 md:p-10">
          <div className="font-mono text-[10px] tracking-[2.5px] text-forno-hi">· {t.contatti.contactLabel}</div>
          <a href="tel:+390471000000" className="mt-3 block font-display font-extrabold text-cream text-[28px] md:text-[34px] leading-none hover:text-senape transition-colors">
            0471&nbsp;…
          </a>
          <div className="mt-2 font-mono text-[10px] text-forno-hi/80">※ {t.contatti.phonePlaceholderNote}</div>
          <a href="mailto:pizzeriavesuvio1965@hotmail.it" className="block mt-5 font-mono text-[12px] text-cream/80 break-all hover:text-senape">
            pizzeriavesuvio1965@hotmail.it
          </a>
          <div className="mt-2 font-mono text-[10px] text-cream-dim leading-relaxed italic">
            → {t.contatti.mailNote}
          </div>
          <div className="mt-6">
            <a href="tel:+390471000000" className="btn-primary">📞 {t.contatti.ctaCall}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer rimosso 2026-05-19 SERA — sezione Contatti chiude la pagina, scadenza bozza inline nella banda diagonale top ---------- */
function _RemovedFooter({ t, lang, onLang, expiryDate }) {
  return (
    <footer className="relative border-t border-hairline" style={{ background: '#0a0907' }}>
      <div className="max-w-[1400px] mx-auto px-5 md:px-10 py-10">
        <div className="grid grid-cols-12 gap-8 items-start">
          <div className="col-span-12 md:col-span-7">
            <LogoVesuvio size={42} />
            <div className="mt-4 font-mono text-[10px] tracking-[2px] text-cream-dim">{t.footer.tag}</div>
            <div className="mt-6 font-display italic text-cream/70 text-[15px] md:text-[16px] leading-snug max-w-[460px]">
              Indirizzo, orari, telefono e mail nella sezione
              <a href="#contatti" className="not-italic font-mono text-[11px] uppercase tracking-[2px] ml-2 text-senape hover:text-cream border-b border-senape/40 hover:border-cream pb-0.5">Contatti ↑</a>
            </div>
          </div>
          <div className="col-span-6 md:col-span-3">
            <div className="font-mono text-[10px] tracking-[2px] text-senape">{t.footer.navLabel}</div>
            <ul className="mt-4 space-y-2 font-mono text-[12px] text-cream/85">
              <li><a href="#storia" className="hover:text-senape">{t.nav.storia}</a></li>
              <li><a href="#menu" className="hover:text-senape">{t.nav.menu}</a></li>
              <li><a href="#contatti" className="hover:text-senape">{t.nav.contatti}</a></li>
            </ul>
          </div>
          <div className="col-span-6 md:col-span-2">
            <div className="font-mono text-[10px] tracking-[2px] text-senape">{t.footer.langLabel}</div>
            <div className="mt-4 flex items-center gap-3">
              {['it', 'de', 'en'].map(l => (
                <button key={l} className={`lang-btn ${lang === l ? 'active' : ''}`} onClick={() => onLang(l)}>{l.toUpperCase()}</button>
              ))}
            </div>
            <div className="font-mono text-[10px] tracking-[2px] text-senape mt-6">{t.footer.socialLabel}</div>
            <a href="https://www.facebook.com" target="_blank" rel="noopener noreferrer" className="mt-3 font-mono text-[12px] text-cream/85 hover:text-senape inline-flex items-center gap-2">
              Facebook <span aria-hidden>↗</span>
            </a>
          </div>
        </div>

        <div className="mt-8 pt-4 border-t border-hairline flex flex-col md:flex-row md:items-center justify-between gap-3">
          <span className="font-mono text-[10px] text-cream-dim">{t.footer.credit}</span>
          <span className="font-mono text-[10px] tracking-[2px] text-forno-hi">
            {t.footer.bozza.replace('{date}', expiryDate)}
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Sticky mobile call bar ---------- */
function CallBar({ t }) {
  return (
    <a
      href="tel:+390471000000"
      className="bozza-callbar fixed bottom-0 left-0 right-0 z-40 items-center justify-center gap-2"
      style={{
        background: '#b73a2a', color: '#faf6ec',
        padding: '14px 20px',
        fontFamily: 'JetBrains Mono, monospace',
        fontWeight: 700, fontSize: 13, letterSpacing: 2,
        textTransform: 'uppercase',
        borderTop: '1px solid rgba(245,240,230,0.15)',
        boxShadow: '0 -10px 30px rgba(0,0,0,0.4)',
      }}
    >
      <span>{t.callbar}</span>
      <span className="font-mono normal-case tracking-normal opacity-90">· 0471 …</span>
    </a>
  );
}

Object.assign(window, {
  Header, MobileDrawer, Hero, Pilastri, Storia, Menu, Contatti, CallBar, LogoVesuvio,
});