function Hero({ onReservar, variant = 'editorial' }) {
  const t = useT();
  const meta = [
    ['lat', '51.4453° N'],
    ['lng', '0.1865° W'],
    ['serve', 'brasileira'],
    ['bairro', 'Earlsfield'],
  ];

  const wrap = {
    position: 'relative', minHeight: '100vh',
    paddingTop: 120, paddingBottom: 80,
    background: 'var(--bg)', overflow: 'hidden',
  };
  const grid = { display: 'grid', gridTemplateColumns: '80px 1fr', gap: 48, alignItems: 'stretch' };
  const rail = {
    borderRight: '1px solid var(--line)', padding: '8px 0',
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    minHeight: 600,
  };
  const railItem = {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--ink-soft)',
    transform: 'rotate(-90deg)', transformOrigin: 'left top',
    whiteSpace: 'nowrap', marginBottom: 60, marginLeft: 20,
  };
  const main = { display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 56, alignItems: 'center' };
  const title = { fontSize: 'clamp(70px, 11vw, 172px)', lineHeight: 0.88, letterSpacing: '-0.035em', color: 'var(--ink)' };
  const titleAccent = { color: 'var(--accent)', fontStyle: 'italic' };
  const lede = { fontSize: 19, lineHeight: 1.5, color: 'var(--ink-soft)', maxWidth: '38ch', marginTop: 40 };
  const ctas = { display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' };
  const imageCol = { position: 'relative', height: 680 };

  // Build the H1 with accentWord italicised wherever it appears in title2
  const renderTitle2 = () => {
    if (!t.hero.title2) return null;
    const word = t.hero.accentWord;
    if (!word || !t.hero.title2.includes(word)) {
      return <span style={titleAccent}>{t.hero.title2}</span>;
    }
    const parts = t.hero.title2.split(word);
    return (
      <>
        {parts[0]}
        <span style={titleAccent}>{word}</span>
        {parts[1]}
      </>
    );
  };

  return (
    <section id="top" style={wrap}>
      <div className="wrap">
        <div style={grid} className="hero-grid">
          <div style={rail} className="hero-rail">
            <div>
              {meta.map(([k, v]) => (
                <div key={k} style={railItem}>— {k} · {v}</div>
              ))}
            </div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
              letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-soft)',
              writingMode: 'vertical-rl', transform: 'rotate(180deg)', marginLeft: 20,
            }}>
              № 001 · café & restaurante · Londres
            </div>
          </div>

          <div style={main} className="hero-main">
            <div>
              <div className="eyebrow" style={{ marginBottom: 32 }}>{t.hero.eyebrow}</div>
              <h1 className="title-font" style={title}>
                {t.hero.title1}<br/>
                {renderTitle2()}<br/>
                {t.hero.title3}
              </h1>
              <p style={lede}>{t.hero.lede}</p>
              <div style={ctas}>
                <button className="btn" onClick={onReservar}>
                  {t.hero.ctaReservar}
                  <span style={{ fontSize: 10 }}>→</span>
                </button>
                <a className="btn btn-ghost" href="#menu">{t.hero.ctaMenu}</a>
              </div>

            </div>

            <div style={imageCol} className="hero-images">
              <img src="fotos/pao-de-queijo.jpg" alt="Pão de queijo" style={{
                position: 'absolute', top: 0, left: '10%', width: '70%', height: 380,
                objectFit: 'cover', display: 'block',
                transform: 'rotate(-2deg)', boxShadow: '0 20px 40px -20px rgba(0,0,0,.28)',
              }} />
              <img src="fotos/picanha-mix.jpg" alt="Picanha com acompanhamentos" style={{
                position: 'absolute', top: 240, right: 0, width: '58%', height: 280,
                objectFit: 'cover', display: 'block',
                transform: 'rotate(3deg)', boxShadow: '0 20px 40px -20px rgba(0,0,0,.28)',
              }} />
              <img src="fotos/salgados.jpg" alt="Salgados mineiros" style={{
                position: 'absolute', bottom: 0, left: 0, width: '48%', height: 220,
                objectFit: 'cover', display: 'block',
                transform: 'rotate(-1deg)', boxShadow: '0 20px 40px -20px rgba(0,0,0,.28)',
              }} />

              <div style={{
                position: 'absolute', bottom: 30, right: 20,
                background: 'var(--cream)', border: '1px solid var(--line)',
                padding: '14px 16px', maxWidth: 200,
                transform: 'rotate(2deg)',
                boxShadow: '0 10px 25px -15px rgba(0,0,0,.25)',
              }}>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                  letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: 'var(--accent)', marginBottom: 6,
                }}>{t.hero.badgeOpen}</div>
                <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.4 }}>
                  {t.hero.badgeText}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="hero-marquee" style={{
          marginTop: 100, paddingTop: 24, paddingBottom: 24,
          borderTop: '1px solid var(--line)',
          borderBottom: '1px solid var(--line)',
          overflow: 'hidden', whiteSpace: 'nowrap',
          marginLeft: 'calc(50% - 50vw)', marginRight: 'calc(50% - 50vw)',
          width: '100vw',
        }}>
          <div className="marquee-track" style={{
            display: 'inline-flex', gap: 48, alignItems: 'baseline',
            animation: 'marquee 40s linear infinite',
            paddingLeft: 24,
          }}>
            {[...t.hero.marquee, ...t.hero.marquee, ...t.hero.marquee].map((tx, i) => (
              <span key={i} className="title-font" style={{
                fontSize: 'clamp(28px, 5.2vw, 48px)',
                fontStyle: i % 2 ? 'italic' : 'normal',
                color: i % 3 === 0 ? 'var(--accent)' : 'var(--ink)',
                opacity: 0.9,
              }}>{tx} ·</span>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes marquee {
          from { transform: translateX(0); }
          to { transform: translateX(-33.333%); }
        }
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; }
          .hero-rail { display: none !important; }
          .hero-main { grid-template-columns: 1fr !important; }
          .hero-images { height: 420px !important; margin-top: 40px; }
          .hero-marquee { margin-top: 60px !important; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;