// direction-editorial-v2.jsx — landing page. All user-facing text
// is read from window.COPY (loaded from copy/<locale>.json in index.html).
// ------------------------------------------------------------

// Palette — near-white page, cream filler sections (menu/manifesto/cantina),
// earthy olive-green accents (Whole Foods / farm-to-table feel).
const ED2_PALETTE = {
  bg: '#fdfcf8',       // almost white, faintest warm tint
  bg2: '#e8dfc7',      // cream card — menu + casa filler (the "darker overlay")
  paper: '#f8f2e0',    // warm paper — manifesto, cantina, modals
  fg: '#1c1812',       // ink brown-black
  accent: '#5c7f3a',   // earthy olive-green
  accent2: '#2a4a3a',  // deep moss-green for handwritten notes
  muted: '#6a5a42',    // muted warm brown
  line: '#1c181230',   // 19% fg for thin lines
  btn: '#2a4a3a',      // deep green for CTAs — black read as funereal
};

// Responsive hook — subscribes to a media query and returns match boolean.
function useMediaQuery(query) {
  const get = () => typeof window !== 'undefined' && window.matchMedia(query).matches;
  const [matches, setMatches] = React.useState(get);
  React.useEffect(() => {
    const mq = window.matchMedia(query);
    const onChange = (e) => setMatches(e.matches);
    setMatches(mq.matches);
    mq.addEventListener('change', onChange);
    return () => mq.removeEventListener('change', onChange);
  }, [query]);
  return matches;
}

function EditorialV2Direction() {
  const c = window.COPY;
  const [booking, setBooking] = React.useState(false);
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
  const scrollRef = React.useRef(null);
  const p = ED2_PALETTE;

  const isMobile = useMediaQuery('(max-width: 640px)');
  const isNarrow = useMediaQuery('(max-width: 980px)'); // nav collapses to hamburger at <= 980

  // Deep link so the Google Business "Prenota" button, the Instagram bio and a
  // WhatsApp reply can drop someone straight into the form:
  //   https://www.gaiabio.it/?prenota=1   or   https://www.gaiabio.it/#prenota
  // The marker is stripped from the URL once open, so a refresh or a shared
  // link from that point behaves like a normal visit.
  React.useEffect(() => {
    const wants = new URLSearchParams(location.search).get('prenota') !== null
               || location.hash === '#prenota';
    if (!wants) return;
    setBooking(true);
    const params = new URLSearchParams(location.search);
    params.delete('prenota');
    const qs = params.toString();
    const hash = location.hash === '#prenota' ? '' : location.hash;
    history.replaceState(null, '', location.pathname + (qs ? '?' + qs : '') + hash);
  }, []);


  // Dynamic edition label: "<mese> · <anno>" — recomputed on mount using the
  // locale's month names.
  const editionLabel = React.useMemo(() => {
    const d = new Date();
    return `${c.months[d.getMonth()]} · ${d.getFullYear()}`;
  }, []);

  const headerH = isMobile ? 92 : 116;  // masthead height; nav drawer and
                                       // scroll anchoring both key off it

  const scrollTo = (id) => {
    // The `.artboard-scroll` wrapper stretches to content height, so it's
    // not the actual scrolling container — the window is. Compute the
    // section's absolute Y and scroll the window instead.
    const el = document.querySelector(`[data-sec="${id}"]`);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - headerH;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
    setMobileNavOpen(false);
  };

  const paperTex = {
    backgroundImage: `
      radial-gradient(circle at 20% 30%, rgba(92,127,58,0.04) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(42,74,58,0.03) 0%, transparent 40%),
      repeating-linear-gradient(45deg, transparent 0 2px, rgba(28,24,18,0.015) 2px 3px),
      repeating-linear-gradient(-45deg, transparent 0 2px, rgba(28,24,18,0.015) 2px 3px)
    `,
    backgroundSize: 'auto, auto, 40px 40px, 40px 40px',
  };

  // Shared responsive spacing tokens
  const padX = isMobile ? 20 : 48;
  const sectionPadY = isMobile ? 56 : 90;

  const navItems = [
    ['filosofia', c.masthead.nav_manifesto],
    ['menu',      c.masthead.nav_menu],
    ['cantina',   c.masthead.nav_cantina],
    ['casa',      c.masthead.nav_casa],
  ];

  return (
    // `overflow: auto` here made this wrapper the scroll container, so the
    // sticky masthead scrolled away with the content. The window scrolls.
    <div ref={scrollRef} className="artboard-scroll" style={{
      width: '100%', minHeight: '100%',
      background: p.bg, color: p.fg, position: 'relative',
      fontFamily: "'Inter', sans-serif", ...paperTex,
    }}>

      {/* Masthead */}
      <div style={{
        position: 'sticky', top: 0, zIndex: 40,
        background: 'rgba(253,252,248,.92)', backdropFilter: 'blur(14px)',
        borderBottom: `2px solid ${p.fg}`,
        padding: isMobile ? '8px 18px' : '10px 48px',
        display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', minHeight: headerH, boxSizing: 'border-box',
      }}>
        {/* The complete lockup, alone — no type beside it. The masthead is a few
            px taller than the stock 60 to give the shield room to read; any
            smaller and the arc-set OSTERIA / NATURALE closes up. */}
        <img
          src="img/logo/gaia-logo-colore.svg"
          alt={c.masthead.brand}
          style={{ height: isMobile ? 76 : 96, width: 'auto', flexShrink: 0, display: 'block' }}
        />

        <div style={{ display: 'flex', gap: isNarrow ? 10 : 26, alignItems: 'center' }}>
          {!isNarrow && navItems.map(([id, l]) => (
            <button key={id} onClick={() => scrollTo(id)} style={{
              background: 'none', border: 'none', cursor: 'pointer', color: p.fg,
              fontFamily: "'Playfair Display', serif", fontSize: 14, fontStyle: 'italic',
              padding: 0,
            }}>{l}</button>
          ))}

          <button onClick={() => setBooking(true)} style={{
            background: p.btn, color: p.paper, border: 'none',
            padding: isMobile ? '8px 14px' : '9px 18px', cursor: 'pointer',
            fontSize: isMobile ? 10 : 11, fontFamily: "'DM Mono', monospace",
            letterSpacing: 2, textTransform: 'uppercase',
          }}>{c.masthead.cta_prenota}</button>

          {isNarrow && (
            <button
              onClick={() => setMobileNavOpen(o => !o)}
              aria-label={mobileNavOpen ? c.masthead.hamburger_close : c.masthead.hamburger_open}
              aria-expanded={mobileNavOpen}
              style={{
                background: 'transparent', border: `1px solid ${p.fg}`,
                width: 38, height: 38, cursor: 'pointer', padding: 0,
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                gap: 4,
              }}
            >
              <span style={{ display: 'block', width: 18, height: 1.5, background: p.fg,
                transform: mobileNavOpen ? 'translateY(5.5px) rotate(45deg)' : 'none', transition: 'transform .2s' }}/>
              <span style={{ display: 'block', width: 18, height: 1.5, background: p.fg,
                opacity: mobileNavOpen ? 0 : 1, transition: 'opacity .15s' }}/>
              <span style={{ display: 'block', width: 18, height: 1.5, background: p.fg,
                transform: mobileNavOpen ? 'translateY(-5.5px) rotate(-45deg)' : 'none', transition: 'transform .2s' }}/>
            </button>
          )}
        </div>
      </div>

      {/* Mobile nav drawer */}
      {isNarrow && mobileNavOpen && (
        <div style={{
          position: 'sticky', top: headerH, zIndex: 30,
          background: p.paper, borderBottom: `2px solid ${p.fg}`,
          padding: '14px 20px 20px',
          display: 'flex', flexDirection: 'column', gap: 2,
        }}>
          {navItems.map(([id, l]) => (
            <button key={id} onClick={() => scrollTo(id)} style={{
              background: 'none', border: 'none', cursor: 'pointer', color: p.fg,
              fontFamily: "'Playfair Display', serif", fontSize: 22, fontStyle: 'italic',
              textAlign: 'left', padding: '10px 0',
              borderBottom: `1px solid ${p.line}`,
            }}>{l}</button>
          ))}
        </div>
      )}

      {/* HERO */}
      <section data-sec="hero" style={{
        padding: `${isMobile ? 8 : 36}px ${padX}px ${isMobile ? 44 : 80}px`,
        maxWidth: 1280, margin: '0 auto',
      }}>
        {/* Masthead + this strip + the headline all have to clear the fold on a
            375x667 screen, so on mobile the strip runs tight and single-spaced. */}
        <div style={{
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'space-between',
          gap: isMobile ? 1 : 8,
          padding: isMobile ? '5px 0 7px' : '10px 0',
          borderBottom: `1px solid ${p.line}`,
          fontFamily: "'DM Mono', monospace", fontSize: isMobile ? 9 : 10,
          lineHeight: isMobile ? 1.5 : 'normal',
          letterSpacing: isMobile ? 1.4 : 2, textTransform: 'uppercase', color: p.muted,
          textAlign: isMobile ? 'center' : 'left',
        }}>
          <span>{editionLabel}</span>
          <span>{c.hero.strip_address}</span>
          <span>{c.hero.strip_days}</span>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isNarrow ? '1fr' : '1fr 1.1fr',
          gap: isNarrow ? 36 : 48,
          marginTop: isMobile ? 14 : 36, alignItems: 'start',
        }}>
          <div>
            {/* No lockup above the H1. It fought the headline for weight and
                pushed the CTAs below the fold on a 375x667 screen — the brand is
                already in the masthead, and what has to land first is the offer,
                not the mark. */}
            <h1 style={{
              fontFamily: "'Playfair Display', serif", fontWeight: 800,
              fontSize: isMobile ? 'clamp(46px, 11.5vw, 78px)' : 'clamp(60px, 8vw, 132px)',
              lineHeight: 0.82,
              margin: 0, letterSpacing: '-0.045em', color: p.fg,
            }}>
              {c.hero.h1_line1}<br/>
              <span style={{ fontStyle: 'italic', fontWeight: 400 }}>{c.hero.h1_line2}</span>
            </h1>

            <div style={{
              fontFamily: "'Playfair Display', serif", fontStyle: 'italic',
              fontSize: isMobile ? 22 : 28, color: p.accent,
              lineHeight: 1.15, marginTop: isMobile ? 12 : 22,
              maxWidth: 520,
            }}>{c.hero.subhead}</div>

            <div style={{
              display: 'flex', alignItems: 'center', gap: 14,
              marginTop: isMobile ? 16 : 34, color: p.accent,
            }}>
              <div style={{ flex: 1, height: 1, background: p.accent }}/>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10, letterSpacing: 2, textTransform: 'uppercase' }}>
                {c.hero.divider}
              </div>
              <div style={{ flex: 1, height: 1, background: p.accent }}/>
            </div>

            <p style={{
              fontFamily: "'Playfair Display', serif",
              fontSize: isMobile ? 18 : 20,
              lineHeight: 1.5, marginTop: isMobile ? 13 : 30, maxWidth: 480,
              fontStyle: 'italic', color: p.fg,
            }}>
              {c.hero.lead}
            </p>

            <div style={{
              display: 'flex', gap: 12,
              marginTop: isMobile ? 17 : 34, alignItems: 'center', flexWrap: 'wrap',
            }}>
              <button onClick={() => setBooking(true)} style={{
                padding: isMobile ? '12px 22px' : '14px 28px', border: `2px solid ${p.btn}`,
                background: p.btn, color: p.paper, cursor: 'pointer',
                fontFamily: "'DM Mono', monospace", fontSize: isMobile ? 11 : 12,
                letterSpacing: 2, textTransform: 'uppercase',
              }}>{c.hero.cta_primary}</button>
              <button onClick={() => scrollTo('menu')} style={{
                padding: isMobile ? '12px 18px' : '14px 22px', border: `2px solid ${p.btn}`,
                background: 'transparent', color: p.btn, cursor: 'pointer',
                fontFamily: "'DM Mono', monospace", fontSize: isMobile ? 11 : 12,
                letterSpacing: 2, textTransform: 'uppercase',
              }}>{c.hero.cta_secondary}</button>
            </div>
          </div>

          <div style={{ position: 'relative' }}>
            {/* Portrait at every width: the shoot is vertical and a 4/3 box
                crops to the out-of-focus middle band instead of the plate. */}
            <div className="ph ph-shoot-hero" style={{
              aspectRatio: '4/5', overflow: 'hidden',
            }}/>
            <div style={{
              position: 'absolute', top: isMobile ? 10 : 18, right: isMobile ? 10 : 18,
              transform: 'rotate(-12deg)',
              border: `3px double ${p.accent}`,
              padding: isMobile ? '6px 10px' : '8px 14px',
              fontFamily: "'DM Mono', monospace",
              fontSize: isMobile ? 9 : 11,
              letterSpacing: 2, textTransform: 'uppercase',
              color: p.accent, background: `${p.paper}ee`, textAlign: 'center',
              lineHeight: 1.3,
            }}>
              {c.hero.stamp_line1}<br/>{c.hero.stamp_line2}<br/>
              <span style={{ fontSize: isMobile ? 7 : 8, letterSpacing: 1 }}>{c.hero.stamp_footer}</span>
            </div>
            <div style={{
              fontFamily: "'Playfair Display', serif", fontStyle: 'italic',
              fontSize: 13, color: p.muted, marginTop: 10, textAlign: 'right',
            }}>
              {c.hero.photo_caption}
            </div>
          </div>
        </div>
      </section>

      {/* MANIFESTO */}
      <section data-sec="filosofia" style={{
        borderTop: `2px solid ${p.fg}`, borderBottom: `1px solid ${p.line}`,
        background: p.paper, padding: `${sectionPadY}px ${padX}px`,
      }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 60 }}>
            <div style={{
              fontFamily: "'DM Mono', monospace", fontSize: 11,
              letterSpacing: 3, textTransform: 'uppercase', color: p.accent,
            }}>{c.manifesto.chapter}</div>
            <h2 style={{
              fontFamily: "'Playfair Display', serif", fontWeight: 400,
              fontStyle: 'italic',
              fontSize: isMobile ? 'clamp(42px, 11vw, 64px)' : 'clamp(48px, 6vw, 88px)',
              margin: '12px 0 0', letterSpacing: '-0.02em',
            }}>{c.manifesto.h2}</h2>
          </div>

          <div className="ed-manifesto-cols" style={{
            maxWidth: 1080, margin: '0 auto',
            fontFamily: "'Playfair Display', serif",
            fontSize: isMobile ? 17 : 16.5, lineHeight: 1.7,
            color: p.fg, textAlign: isMobile ? 'left' : 'justify',
          }}>
            <p style={{ marginTop: 0 }}>
              <span style={{
                float: 'left', fontSize: 64, lineHeight: 0.9, padding: '4px 6px 0 0',
                fontFamily: "'Playfair Display', serif", fontWeight: 800, color: p.accent,
              }}>{c.manifesto.p1_drop_cap}</span>
              {c.manifesto.p1_body}
            </p>
            <p>
              {c.manifesto.p2_main} <em>{c.manifesto.p2_italic_tail}</em>
            </p>
            <p>
              <strong style={{ fontFamily: "'Playfair Display', serif", fontStyle: 'italic' }}>{c.manifesto.p3_lead}</strong>
              {' '}{c.manifesto.p3_body}
            </p>
            <p>
              <strong style={{ fontFamily: "'Playfair Display', serif", fontStyle: 'italic' }}>{c.manifesto.p4_lead}</strong>
              {' '}{c.manifesto.p4_body_pre_gloss}
              <Gloss term="zero/zero" color={p.accent}>{c.manifesto.p4_gloss_label}</Gloss>
              {c.manifesto.p4_body_post_gloss}
            </p>
            <p style={{ marginBottom: 0 }}>
              {c.manifesto.p5}
            </p>
          </div>

          <div style={{
            marginTop: isMobile ? 36 : 48, textAlign: 'center',
            fontFamily: "'Caveat', cursive", fontSize: isMobile ? 24 : 30, color: p.accent2,
          }}>
            {c.manifesto.signature}
          </div>

          {/* photo strip */}
          <div style={{
            marginTop: isMobile ? 40 : 60, display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : isNarrow ? '1fr 1fr' : '1.2fr 1fr 1fr',
            gap: isMobile ? 16 : 12,
          }}>
            {[
              ['ph-shoot-piatto', c.manifesto.photo_1_caption],
              ['ph-shoot-dolce', c.manifesto.photo_2_caption],
              ['ph-shoot-scoglio', c.manifesto.photo_3_caption],
            ].map(([cls, cap], i) => (
              <div key={i}>
                <div className={`ph ${cls}`} style={{
                  aspectRatio: '4/3', overflow: 'hidden',
                }}/>
                <div style={{
                  fontFamily: "'Playfair Display', serif", fontStyle: 'italic',
                  fontSize: 12, color: p.muted, marginTop: 6,
                }}>→ {cap}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MENU — Sempre + Oggi */}
      <section data-sec="menu" style={{
        padding: `${sectionPadY}px ${padX}px ${sectionPadY + 10}px`,
        background: p.bg2, borderTop: `2px solid ${p.fg}`,
      }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: isMobile ? 32 : 44 }}>
            <div style={{
              fontFamily: "'DM Mono', monospace", fontSize: 11,
              letterSpacing: 3, textTransform: 'uppercase', color: p.accent,
            }}>{c.menu.chapter}</div>
            <h2 style={{
              fontFamily: "'Playfair Display', serif", fontWeight: 800,
              fontSize: isMobile ? 'clamp(42px, 11vw, 64px)' : 'clamp(52px, 6vw, 96px)',
              lineHeight: 1, margin: '12px 0 0',
              letterSpacing: '-0.035em',
            }}>{c.menu.h2}</h2>
            <p style={{
              fontFamily: "'Playfair Display', serif", fontStyle: 'italic',
              fontSize: isMobile ? 16 : 18, color: p.muted,
              maxWidth: 640, margin: '14px auto 0', lineHeight: 1.5,
            }}>
              {c.menu.subtitle_line1}<br/>
              {c.menu.subtitle_line2}
            </p>
          </div>

          {/* Two ways to eat here, neither of them on this page: the printed
              carta that never changes, and the blackboard that changes daily. */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: isNarrow ? '1fr' : '1fr 1fr',
            gap: isNarrow ? 28 : 40,
          }}>
            {[
              ['fisso', c.menu.fisso_label, c.menu.fisso_h3, c.menu.fisso_body,
               'menu/gaia-menu-carta.pdf', c.menu.fisso_cta],
              ['lavagna', c.menu.lavagna_label, c.menu.lavagna_h3, c.menu.lavagna_body,
               null, null],
            ].map(([id, label, h3, body, pdf, cta]) => (
              <div key={id} style={{
                background: p.paper, border: `2px solid ${p.fg}`,
                padding: isMobile ? '26px 22px' : '34px 32px',
                display: 'flex', flexDirection: 'column',
              }}>
                <div style={{
                  fontFamily: "'DM Mono', monospace", fontSize: 10,
                  letterSpacing: 3, textTransform: 'uppercase', color: p.accent,
                }}>{label}</div>
                <h3 style={{
                  fontFamily: "'Playfair Display', serif",
                  fontSize: isMobile ? 30 : 40, fontWeight: 800, fontStyle: 'italic',
                  margin: '10px 0 14px', letterSpacing: '-0.02em', lineHeight: 1.05,
                }}>{h3}</h3>
                <p style={{
                  fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 16 : 17,
                  lineHeight: 1.6, margin: 0, color: p.fg,
                }}>{body}</p>
                {pdf && (
                  <a href={pdf} target="_blank" rel="noopener" style={{
                    marginTop: 'auto', paddingTop: 20, alignSelf: 'flex-start',
                    fontFamily: "'DM Mono', monospace", fontSize: 10.5,
                    letterSpacing: 1.6, textTransform: 'uppercase',
                    color: p.btn, textDecorationThickness: 1, textUnderlineOffset: 4,
                  }}>{cta} →</a>
                )}
                {id === 'fisso' && (
                  <div className="ph ph-shoot-menu" style={{
                    aspectRatio: '16/10', overflow: 'hidden',
                    marginTop: 24, marginBottom: -2, marginLeft: -2, marginRight: -2,
                    width: 'calc(100% + 4px)',
                    borderTop: `2px solid ${p.fg}`,
                  }}/>
                )}
                {id === 'lavagna' && (
                  // The real board. Deliberately small: at this size it reads as
                  // the room, not as a menu to be deciphered — the dishes and
                  // prices chalked on it are one day old by definition.
                  <div className="ph ph-shoot-lavagna" style={{
                    aspectRatio: '16/10', overflow: 'hidden',
                    marginTop: 24, marginBottom: -2, marginLeft: -2, marginRight: -2,
                    width: 'calc(100% + 4px)',
                    borderTop: `2px solid ${p.fg}`,
                  }}/>
                )}
              </div>
            ))}
          </div>

          {/* PIZZA */}
          <div style={{
            marginTop: isMobile ? 52 : 72, paddingTop: isMobile ? 40 : 56,
            borderTop: `4px double ${p.fg}`,
          }}>
            <div style={{
              fontFamily: "'DM Mono', monospace", fontSize: 11,
              letterSpacing: 3, textTransform: 'uppercase', color: p.accent,
            }}>{c.menu.pizza_label}</div>
            <h3 style={{
              fontFamily: "'Playfair Display', serif",
              fontSize: isMobile ? 'clamp(36px, 10vw, 52px)' : 'clamp(44px, 5vw, 72px)',
              fontWeight: 800, fontStyle: 'italic', letterSpacing: '-0.03em',
              margin: '10px 0 0', lineHeight: 1,
            }}>{c.menu.pizza_h3}</h3>
            <div style={{
              display: 'grid',
              gridTemplateColumns: isNarrow ? '1fr' : '1fr 1fr',
              gap: isNarrow ? 18 : 44, marginTop: isMobile ? 22 : 30,
              fontFamily: "'Playfair Display', serif",
              fontSize: isMobile ? 16.5 : 17.5, lineHeight: 1.62,
            }}>
              <p style={{ margin: 0 }}>{c.menu.pizza_body_1}</p>
              <p style={{ margin: 0 }}>{c.menu.pizza_body_2}</p>
            </div>
            <div className="ph ph-shoot-forno" style={{
              aspectRatio: isMobile ? '3/2' : '16/7', overflow: 'hidden',
              marginTop: isMobile ? 24 : 32, border: `2px solid ${p.fg}`,
            }}/>
            <a href="menu/gaia-menu-pizze.pdf" target="_blank" rel="noopener" style={{
              display: 'inline-block', marginTop: isMobile ? 22 : 28,
              padding: isMobile ? '12px 20px' : '13px 24px',
              border: `2px solid ${p.btn}`, color: p.btn, textDecoration: 'none',
              fontFamily: "'DM Mono', monospace", fontSize: isMobile ? 11 : 11.5,
              letterSpacing: 2, textTransform: 'uppercase',
            }}>{c.menu.pizza_cta} →</a>
          </div>

          <div style={{
            marginTop: isMobile ? 40 : 54, paddingTop: 20, borderTop: `1px solid ${p.line}`,
            fontFamily: "'DM Mono', monospace", fontSize: 10, letterSpacing: 2,
            textTransform: 'uppercase', color: p.muted, textAlign: 'center',
          }}>
            {c.menu.footer_note}
          </div>
        </div>
      </section>

      {/* CANTINA */}
      <section data-sec="cantina" style={{
        padding: `${sectionPadY + 10}px ${padX}px ${sectionPadY + 20}px`,
        background: p.paper, borderTop: `2px solid ${p.fg}`, position: 'relative',
      }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isNarrow ? '1fr' : '1fr 1.3fr',
            gap: isNarrow ? 28 : 56,
            marginBottom: isMobile ? 40 : 56,
            alignItems: isNarrow ? 'start' : 'end',
          }}>
            <div>
              <div style={{
                fontFamily: "'DM Mono', monospace", fontSize: 11,
                letterSpacing: 3, textTransform: 'uppercase', color: p.accent,
              }}>{c.cantina.chapter}</div>
              <h2 style={{
                fontFamily: "'Playfair Display', serif", fontWeight: 400,
                fontStyle: 'italic',
                fontSize: isMobile ? 'clamp(48px, 13vw, 80px)' : 'clamp(52px, 6.5vw, 108px)',
                lineHeight: 0.9, margin: '10px 0 0', letterSpacing: '-0.03em',
              }}>{c.cantina.h2_line1}<br/>{c.cantina.h2_line2}<br/>
                <span style={{ color: p.accent }}>{c.cantina.h2_line3}</span>
              </h2>
            </div>
            <div style={{
              fontFamily: "'Playfair Display', serif",
              fontSize: isMobile ? 17 : 18,
              lineHeight: 1.65, color: p.fg, maxWidth: 560,
            }}>
              {c.cantina.blurb_pre_strong}<strong>{c.cantina.blurb_strong}</strong>{c.cantina.blurb_mid}
              <em>{c.cantina.blurb_em}</em>{c.cantina.blurb_post}
              <br/><br/>
              <span style={{ fontStyle: 'italic', color: p.accent }}>
                {c.cantina.blurb_accent_italic}
              </span>
            </div>
          </div>

          {/* photo */}
          <div className="ph ph-shoot-cantina" style={{
            aspectRatio: isMobile ? '3/2' : '16/6', overflow: 'hidden', marginBottom: 28,
          }}/>

          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit, minmax(240px, 1fr))',
            gap: 0, borderTop: `1px solid ${p.fg}`,
          }}>
            {/* Categories only. These used to be buttons opening a modal with
                three sample vignaioli and an "N etichette" count — but there is
                no real wine list to show, so the modal promised a document that
                does not exist. The categories alone say what is poured; the
                actual bottles get read at the table. */}
            {c.cantina.vibes.map((v, i) => (
              <div key={v.id} style={{
                borderRight: !isMobile && i < c.cantina.vibes.length - 1 ? `1px solid ${p.line}` : 'none',
                borderBottom: `1px solid ${p.fg}`,
                padding: isMobile ? '24px 18px' : '32px 24px', textAlign: 'left',
                color: p.fg, fontFamily: "'Inter', sans-serif",
              }}>
                <div style={{
                  fontFamily: "'DM Mono', monospace", fontSize: 10,
                  letterSpacing: 2, textTransform: 'uppercase', color: p.accent,
                }}>{String(i+1).padStart(2, '0')} · {v.tag}</div>
                <div style={{
                  fontFamily: "'Playfair Display', serif", fontSize: isMobile ? 26 : 32,
                  fontStyle: 'italic', fontWeight: 400, margin: '12px 0',
                  letterSpacing: '-0.02em',
                }}>{v.name}</div>
                <div style={{
                  fontFamily: "'Playfair Display', serif", fontSize: 14,
                  lineHeight: 1.55, color: p.muted,
                }}>{v.desc}</div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 28, padding: '18px 22px',
            background: p.bg2, border: `1px dashed ${p.fg}`,
            fontFamily: "'Playfair Display', serif", fontSize: 14,
            color: p.muted, fontStyle: 'italic', lineHeight: 1.55,
          }}>
            <span style={{ color: p.accent, fontWeight: 700, fontStyle: 'normal' }}>{c.cantina.nb_marker}</span>{' '}
            {c.cantina.nb_intro} <Gloss term="pét-nat" color={p.accent}>{c.cantina.nb_gloss_petnat}</Gloss>,
            {' '}<Gloss term="orange" color={p.accent}>{c.cantina.nb_gloss_orange}</Gloss>,
            {' '}<Gloss term="glou glou" color={p.accent}>{c.cantina.nb_gloss_glouglou}</Gloss> o
            {' '}<Gloss term="zero/zero" color={p.accent}>{c.cantina.nb_gloss_zerozero}</Gloss> {c.cantina.nb_close}
          </div>
        </div>
      </section>

      {/* CASA */}
      <section data-sec="casa" style={{
        padding: `${isMobile ? 56 : 80}px ${padX}px 40px`,
        background: p.bg2, borderTop: `2px solid ${p.fg}`,
      }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <img
            src="img/logo/gaia-logo-colore.svg"
            alt={c.masthead.brand}
            style={{
              width: isMobile ? 148 : 190, height: 'auto', display: 'block',
              marginBottom: isMobile ? 32 : 46,
            }}
          />
          <div style={{
            display: 'grid',
            gridTemplateColumns: isNarrow ? '1fr' : '1fr 1fr 1fr',
            gap: isNarrow ? 28 : 40,
            paddingBottom: isMobile ? 32 : 50, borderBottom: `1px solid ${p.line}`,
          }}>
            <div>
              <div style={{
                fontFamily: "'DM Mono', monospace", fontSize: 10,
                letterSpacing: 2, textTransform: 'uppercase', color: p.accent, marginBottom: 14,
              }}>{c.casa.contatti_label}</div>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 17, lineHeight: 1.55 }}>
                {c.casa.address_line1}<br/>
                {c.casa.address_line2}<br/>
                <span style={{ color: p.muted, fontStyle: 'italic' }}>{c.casa.contact_line3}</span>
              </div>
            </div>
            <div>
              <div style={{
                fontFamily: "'DM Mono', monospace", fontSize: 10,
                letterSpacing: 2, textTransform: 'uppercase', color: p.accent, marginBottom: 14,
              }}>{c.casa.apertura_label}</div>
              <div style={{ fontFamily: "'Playfair Display', serif", fontSize: 17, lineHeight: 1.7 }}>
                {c.casa.hours_line1}<br/>
                {c.casa.hours_line2}<br/>
                <span style={{ color: p.muted, fontStyle: 'italic' }}>{c.casa.hours_closed}</span>
              </div>
            </div>
            <div>
              <button onClick={() => setBooking(true)} style={{
                width: '100%', padding: isMobile ? '18px' : '22px',
                background: p.btn, color: p.paper,
                border: 'none', cursor: 'pointer',
                fontFamily: "'Playfair Display', serif",
                fontSize: isMobile ? 18 : 22,
                fontStyle: 'italic', letterSpacing: '-0.01em',
              }}>{c.casa.cta_prenota}</button>
              <div style={{
                marginTop: 14, fontFamily: "'DM Mono', monospace", fontSize: 13,
                letterSpacing: 1.5, color: p.muted, textAlign: 'center',
              }}>{c.casa.cta_caption}</div>
            </div>
          </div>
          <div style={{
            paddingTop: 22, display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            justifyContent: 'space-between',
            gap: isMobile ? 10 : 12,
            fontFamily: "'DM Mono', monospace", fontSize: 10, letterSpacing: 2,
            textTransform: 'uppercase', color: p.muted, flexWrap: 'wrap',
            textAlign: isMobile ? 'center' : 'left',
          }}>
            <span>{c.casa.copyright}</span>
            <span style={{ color: p.accent }}>{c.casa.photo_credit}</span>
            <span style={{ display: 'flex', gap: 14 }}>
              {(c.casa.socials_links || []).map(s => (
                <a key={s.url} href={s.url} target="_blank" rel="noopener"
                   style={{ color: p.muted, textUnderlineOffset: 3 }}>{s.label}</a>
              ))}
            </span>
            <span style={{ fontStyle: 'italic', fontFamily: "'Playfair Display', serif", textTransform: 'none', letterSpacing: 0 }}>
              {c.casa.tagline}
            </span>
          </div>
        </div>
      </section>

      <button onClick={() => setBooking(true)} style={{
        position: 'fixed', bottom: isMobile ? 14 : 24, right: isMobile ? 14 : 24, zIndex: 20,
        padding: isMobile ? '10px 16px' : '14px 24px',
        border: `2px solid ${p.fg}`,
        background: p.btn, color: p.paper,
        fontFamily: "'DM Mono', monospace", fontSize: isMobile ? 10 : 11,
        letterSpacing: 2, textTransform: 'uppercase', cursor: 'pointer',
        boxShadow: '0 10px 30px rgba(0,0,0,.15)',
      }}>{c.floating_cta}</button>

      <BookingModal open={booking} onClose={() => setBooking(false)}
        palette={{...p, bg: p.paper}}/>
    </div>
  );
}

// The "banco di oggi" sales pitch — featured treatment so guests come discover it on-site

window.EditorialV2Direction = EditorialV2Direction;