/* ============================================================
   HOME PAGE
   ============================================================ */

function HomePage() {
  const { lang } = useLang();
  const videoRef = useRef(null);

  return (
    <div className="page-enter" data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero" data-screen-label="Hero">
        <div className="hero-media">
          <video
            ref={videoRef}
            autoPlay
            muted
            loop
            playsInline
            preload="metadata"
            poster="https://images.unsplash.com/photo-1606214174585-fe31582dc6ee?w=2400&q=85&auto=format&fit=crop"
          >
            <source src="https://videos.pexels.com/video-files/8944049/8944049-uhd_2560_1440_25fps.mp4" type="video/mp4" />
            <source src="https://images.pexels.com/videos/8944049/pexels-photo-8944049.jpeg" type="image/jpeg" />
          </video>
        </div>

        <div className="hero-corner">
          <span className="gold">MAINE COON CAFE · EST. 2026</span>
          <span>BD. PACHE PROTOPOPESCU 100 · BUCUREȘTI</span>
        </div>

        <div className="hero-content container">
          <Reveal as="div" mask={true}>
            <div className="eyebrow" style={{ marginBottom: 32 }}>
              {lang === 'ro' ? '15 PISICI · CAFEA DE SPECIALITATE · BD. PACHE 100' : '15 CATS · SPECIALTY COFFEE · 100 PACHE BLVD'}
            </div>
          </Reveal>
          <h1 className="hero-headline">
            <Reveal mask={true}>LINIȘTE.</Reveal><br/>
            <Reveal mask={true} delay={1}>CAFEA.</Reveal><br/>
            <Reveal mask={true} delay={2}><em>Pisici regale.</em></Reveal>
          </h1>
          <Reveal className="hero-meta-row" delay={3}>
            <div className="sub">
              {lang === 'ro'
                ? 'O cafenea premium dedicată rasei Maine Coon. Cincisprezece pisoi mari, doi camere private, o sută de metri pătrați de tăcere caldă.'
                : 'A premium cafe dedicated to the Maine Coon breed. Fifteen giant cats, two private rooms, one hundred square meters of warm silence.'}
            </div>
            <Link to="/reservations" className="btn btn-primary btn-lg">
              {tr(I18N.cta.bookNow, lang)} <span className="arrow">→</span>
            </Link>
            <Link to="/cats" className="btn btn-ghost-light btn-lg">
              {tr(I18N.cta.seeCats, lang)} <span className="arrow">→</span>
            </Link>
          </Reveal>
        </div>

        <div className="hero-scroll">SCROLL</div>
      </section>

      {/* MARQUEE */}
      <Marquee items={[
        lang === 'ro' ? '15 PISICI MAINE COON' : '15 MAINE COON CATS',
        lang === 'ro' ? 'CAFEA DE SPECIALITATE' : 'SPECIALTY COFFEE',
        lang === 'ro' ? 'CAMERE VIP' : 'PRIVATE ROOMS',
        lang === 'ro' ? 'LIVE DIN BUCUREȘTI' : 'LIVE IN BUCHAREST',
        lang === 'ro' ? 'DESCHIȘI ZILNIC' : 'OPEN DAILY'
      ]} />

      {/* INTRO — editorial split */}
      <section className="section" data-screen-label="Intro">
        <div className="container">
          <Reveal as="div" className="section-label">
            <span className="eyebrow">01 · {lang === 'ro' ? 'Bun venit' : 'Welcome'}</span>
          </Reveal>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 'clamp(40px, 6vw, 96px)',
            alignItems: 'start'
          }} className="home-intro-grid">
            <Reveal as="div">
              <h2 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(40px, 5.6vw, 88px)',
                lineHeight: 0.9,
                margin: 0,
                textTransform: 'uppercase'
              }}>
                Cea mai blândă<br/>
                cafenea din<br/>
                <em className="serif" style={{ color: 'var(--gold-500)', fontSize: '1.05em' }}>București.</em>
              </h2>
            </Reveal>
            <Reveal as="div" delay={1}>
              <p style={{ fontSize: 18, lineHeight: 1.75, color: 'var(--fg-2)', marginTop: 12 }}>
                {lang === 'ro'
                  ? 'Maine Coon Cafe a deschis în 2026 pentru oamenii care vor mai mult decât o ceașcă de cafea. Aici lucrurile se mișcă mai încet: șanțul șopârlei lui Caesar, mustațile lui Sofia, ritmul mașinii de espresso — toate într-un singur tempo. Fără grabă, fără blitz, fără gălăgie.'
                  : 'Maine Coon Cafe opened in 2026 for people who want more than a cup of coffee. Things move slower here: Caesar\'s tail flick, Sofia\'s whiskers, the rhythm of the espresso machine — all in one tempo. No rush, no flash, no noise.'}
              </p>
              <p style={{ fontSize: 18, lineHeight: 1.75, color: 'var(--fg-2)' }}>
                {lang === 'ro'
                  ? 'Cincisprezece Maine Coon — pisoi uriași, blânzi, vocali — împart spațiul cu noi și cu oaspeții noștri. Două camere VIP, un bar de specialitate și o regulă de aur: pisica decide.'
                  : 'Fifteen Maine Coons — giant, gentle, vocal cats — share the space with us and our guests. Two VIP rooms, a specialty bar, and one golden rule: the cat decides.'}
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
                <span className="chip">15 {lang === 'ro' ? 'pisoi' : 'cats'}</span>
                <span className="chip">2 {lang === 'ro' ? 'camere VIP' : 'VIP rooms'}</span>
                <span className="chip">{lang === 'ro' ? '60 locuri' : '60 seats'}</span>
                <span className="chip">{lang === 'ro' ? 'Deschis 7/7' : 'Open 7/7'}</span>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* PILLARS — three blocks */}
      <section className="section section-dark" data-screen-label="Pillars">
        <div className="container">
          <Reveal as="div" className="section-label">
            <span className="eyebrow">02 · {lang === 'ro' ? 'Ce găsești aici' : 'What you\'ll find'}</span>
          </Reveal>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
            gap: 0,
            borderTop: '1px solid var(--line-on-dark-1)'
          }}>
            {[
              { n: '01', img: 'https://images.unsplash.com/photo-1606214174585-fe31582dc6ee?w=1200&q=85&auto=format&fit=crop',
                title: { ro: 'Cincisprezece pisici', en: 'Fifteen cats' },
                body: { ro: 'Maine Coon-i mari, blânzi și vocali. Fiecare cu personalitate, vârstă și ritm propriu. Îi cunoști pe rând, când vor ei.', en: 'Big, gentle, vocal Maine Coons. Each with their own personality, age and rhythm. You meet them one at a time — when they choose.' },
                link: '/cats' },
              { n: '02', img: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=1200&q=85&auto=format&fit=crop',
                title: { ro: 'Cafea de specialitate', en: 'Specialty coffee' },
                body: { ro: 'Blenduri prăjite săptămânal, lapte microfoam, cold brew de 12 ore. Vin românesc și bere artizanală din trei berării locale.', en: 'Weekly-roasted blends, microfoam milk, 12-hour cold brew. Romanian wine and craft beer from three local breweries.' },
                link: '/menu' },
              { n: '03', img: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1200&q=85&auto=format&fit=crop',
                title: { ro: 'Camere private', en: 'Private rooms' },
                body: { ro: 'Două spații dedicate. Pentru 2-4 sau 6-12 persoane. Pisici alese, timp dedicat, fără perturbări. Ideale pentru evenimente sau terapie.', en: 'Two dedicated spaces. For 2-4 or 6-12 people. Chosen cats, dedicated time, no disruptions. Perfect for events or therapy.' },
                link: '/reservations' }
            ].map((p, i) => (
              <Reveal key={p.n} delay={i + 1} style={{
                padding: '40px 32px 48px',
                borderRight: '1px solid var(--line-on-dark-1)',
                borderBottom: '1px solid var(--line-on-dark-1)',
                display: 'flex', flexDirection: 'column', gap: 24
              }} className="pillar-cell">
                <div className="techno" style={{ color: 'var(--gold-400)' }}>{p.n}</div>
                <div className="img-frame" style={{ aspectRatio: '4/3' }}>
                  <img src={p.img} alt={tr(p.title, lang)} loading="lazy" />
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 36,
                  lineHeight: 1,
                  textTransform: 'uppercase',
                  margin: 0,
                  color: 'var(--fg-on-dark-1)'
                }}>{tr(p.title, lang)}</h3>
                <p style={{ color: 'var(--fg-on-dark-2)', margin: 0, lineHeight: 1.7, fontSize: 15 }}>
                  {tr(p.body, lang)}
                </p>
                <Link to={p.link} style={{
                  fontFamily: 'var(--font-techno)', fontSize: 11, letterSpacing: '0.22em',
                  color: 'var(--gold-400)', display: 'inline-flex', gap: 12, alignItems: 'center',
                  marginTop: 'auto'
                }}>
                  {lang === 'ro' ? 'EXPLOREAZĂ' : 'EXPLORE'} <span>→</span>
                </Link>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* CATS TEASER — horizontal scroll-feel */}
      <section className="section" data-screen-label="CatsTeaser">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'end', marginBottom: 64 }} className="home-teaser-head">
            <Reveal as="div">
              <div className="eyebrow" style={{ marginBottom: 24 }}>03 · {lang === 'ro' ? 'Pisicile noastre' : 'Our cats'}</div>
              <h2 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(40px, 5.6vw, 88px)',
                lineHeight: 0.9,
                margin: 0,
                textTransform: 'uppercase'
              }}>
                Cincisprezece<br/>
                <em className="serif" style={{ color: 'var(--gold-500)' }}>individualități.</em>
              </h2>
            </Reveal>
            <Reveal as="div" delay={1} style={{ textAlign: 'right' }}>
              <p style={{ maxWidth: 360, marginLeft: 'auto', color: 'var(--fg-2)', lineHeight: 1.7 }}>
                {lang === 'ro'
                  ? 'Fiecare pisoi are nume, vârstă și o poveste. Unii sunt campioni TICA, alții preferă să doarmă pe rafturi. Toți decid singuri când vor să te cunoască.'
                  : 'Each cat has a name, age and story. Some are TICA champions, others prefer to sleep on shelves. All decide on their own when they want to meet you.'}
              </p>
              <Link to="/cats" className="btn btn-ghost" style={{ marginTop: 24 }}>
                {tr(I18N.cta.seeCats, lang)} <span className="arrow">→</span>
              </Link>
            </Reveal>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 24
          }} className="home-cats-grid">
            {CATS.slice(0, 4).map((cat, i) => (
              <Reveal key={cat.id} delay={i + 1}>
                <Link to={'/cats/' + cat.id} style={{ display: 'block' }}>
                  <div className="img-frame" style={{ aspectRatio: '3/4', marginBottom: 16 }}>
                    <img src={cat.image} alt={cat.name} loading="lazy" />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
                    <span className="techno" style={{ color: 'var(--gold-500)' }}>{String(cat.id).padStart(2, '0')}</span>
                    <span className="techno" style={{ color: 'var(--fg-3)' }}>{cat.age} {lang === 'ro' ? 'ANI' : 'YEARS'}</span>
                  </div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 28, margin: '4px 0 0',
                    textTransform: 'uppercase'
                  }}>{cat.name}</h3>
                  <p style={{ fontSize: 13, color: 'var(--fg-3)', margin: '4px 0 0' }}>{cat.color}</p>
                </Link>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* SPLIT — image + house rules teaser */}
      <section className="section section-cream" data-screen-label="HouseRules">
        <div className="container">
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 'clamp(40px, 6vw, 96px)',
            alignItems: 'center'
          }} className="home-rules-grid">
            <Reveal as="div">
              <div className="img-frame" style={{ aspectRatio: '4/5' }}>
                <img src="https://images.unsplash.com/photo-1574158622682-e40e69881006?w=1400&q=85&auto=format&fit=crop"
                     alt="Maine Coon resting" loading="lazy" />
              </div>
            </Reveal>
            <Reveal as="div" delay={1}>
              <div className="eyebrow" style={{ marginBottom: 24 }}>04 · {lang === 'ro' ? 'Regulile casei' : 'House rules'}</div>
              <h2 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(36px, 4.4vw, 64px)',
                lineHeight: 0.95, margin: 0, textTransform: 'uppercase'
              }}>
                Paisprezece reguli<br/>
                <em className="serif" style={{ color: 'var(--gold-500)' }}>blânde.</em>
              </h2>
              <p style={{ marginTop: 24, color: 'var(--fg-2)', lineHeight: 1.75, fontSize: 17 }}>
                {lang === 'ro'
                  ? 'Pentru ca pisicile să fie relaxate, am scris paisprezece reguli simple. Fără hrănit, fără blitz, fără gesturi bruște. O pisică care pleacă e o pisică fericită.'
                  : 'For the cats to feel relaxed, we wrote fourteen simple rules. No feeding, no flash, no sudden moves. A cat that walks away is a happy cat.'}
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: 32, borderTop: '1px solid var(--line-2)' }}>
                {HOUSE_RULES.slice(0, 5).map((r, i) => (
                  <div key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: '32px 1fr',
                    gap: 16,
                    padding: '16px 0',
                    borderBottom: '1px solid var(--line-2)',
                    alignItems: 'baseline'
                  }}>
                    <span className="techno" style={{ color: 'var(--gold-500)' }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{ fontSize: 16, fontWeight: 500 }}>{r[lang][0]}</span>
                  </div>
                ))}
              </div>
              <Link to="/about" className="btn btn-ghost" style={{ marginTop: 32 }}>
                {lang === 'ro' ? 'Toate regulile' : 'All rules'} <span className="arrow">→</span>
              </Link>
            </Reveal>
          </div>
        </div>
      </section>

      {/* FULL-BLEED IMAGE */}
      <section style={{ position: 'relative', overflow: 'hidden' }} data-screen-label="BleedImage">
        <Reveal>
          <div style={{ height: 'clamp(420px, 70vh, 760px)', position: 'relative' }}>
            <img
              src="https://images.unsplash.com/photo-1592194996308-7b43878e84a6?w=2400&q=85&auto=format&fit=crop"
              alt="Maine Coon profile"
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
              loading="lazy"
            />
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(135deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.15) 50%, rgba(10,10,10,0.65) 100%)'
            }} />
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', alignItems: 'center',
              padding: '0 32px',
              color: 'var(--fg-on-dark-1)'
            }}>
              <div className="container" style={{ width: '100%' }}>
                <div className="eyebrow" style={{ marginBottom: 24, color: 'var(--gold-400)' }}>
                  {lang === 'ro' ? 'Promisiune' : 'Promise'}
                </div>
                <p className="serif" style={{
                  fontFamily: 'var(--font-serif)',
                  fontSize: 'clamp(28px, 4vw, 56px)',
                  lineHeight: 1.15,
                  fontWeight: 300,
                  fontStyle: 'italic',
                  margin: 0,
                  maxWidth: 880
                }}>
                  „{lang === 'ro'
                    ? 'O pisică relaxată este o pisică fericită. Construim cafeneaua în jurul lor — nu invers.'
                    : 'A relaxed cat is a happy cat. We build the cafe around them — not the other way around.'}"
                </p>
              </div>
            </div>
          </div>
        </Reveal>
      </section>

      {/* MENU TEASER */}
      <section className="section" data-screen-label="MenuTeaser">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'end', marginBottom: 64 }} className="home-menu-head">
            <Reveal as="div">
              <div className="eyebrow" style={{ marginBottom: 24 }}>05 · {lang === 'ro' ? 'Meniu' : 'Menu'}</div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 5.6vw, 88px)', lineHeight: 0.9, margin: 0, textTransform: 'uppercase' }}>
                Câteva<br/>
                <em className="serif" style={{ color: 'var(--gold-500)' }}>semnături.</em>
              </h2>
            </Reveal>
            <Reveal as="div" delay={1} style={{ textAlign: 'right' }}>
              <Link to="/menu" className="btn btn-ghost">
                {tr(I18N.cta.seeMenu, lang)} <span className="arrow">→</span>
              </Link>
            </Reveal>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid var(--line-2)' }} className="home-menu-grid">
            {MENU.signatures.items.map((item, i) => (
              <Reveal key={i} delay={(i % 2) + 1} style={{
                padding: '32px 0',
                borderBottom: '1px solid var(--line-2)',
                paddingRight: (i % 2 === 0) ? 48 : 0,
                paddingLeft: (i % 2 === 1) ? 48 : 0,
                borderRight: (i % 2 === 0) ? '1px solid var(--line-2)' : 'none'
              }} className="home-menu-item">
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: 0, textTransform: 'uppercase' }}>
                    {tr(item.name, lang)}
                  </h3>
                  <span className="techno" style={{ color: 'var(--gold-500)', fontSize: 14 }}>{item.price}</span>
                </div>
                <p style={{ color: 'var(--fg-3)', margin: '8px 0 0', fontSize: 15 }}>{tr(item.desc, lang)}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* RESERVATION CTA */}
      <section className="section section-dark" data-screen-label="BookCta">
        <div className="container" style={{ textAlign: 'center' }}>
          <Reveal as="div">
            <div className="eyebrow" style={{ marginBottom: 24 }}>{lang === 'ro' ? 'Rezervări' : 'Reservations'}</div>
          </Reveal>
          <Reveal as="h2" delay={1} style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(48px, 8vw, 140px)',
            lineHeight: 0.9, margin: 0, textTransform: 'uppercase'
          }}>
            Vino. <em className="serif" style={{ color: 'var(--gold-400)' }}>Stai.</em><br/>
            Cunoaște-i.
          </Reveal>
          <Reveal as="p" delay={2} style={{
            maxWidth: 560, margin: '32px auto 48px',
            color: 'var(--fg-on-dark-2)', fontSize: 18, lineHeight: 1.7
          }}>
            {lang === 'ro'
              ? 'Camerele VIP se rezervă cu 24h înainte. Sala mare e disponibilă fără rezervare, în limita locurilor.'
              : 'VIP rooms book 24h in advance. The main hall is walk-in, subject to availability.'}
          </Reveal>
          <Reveal as="div" delay={3} style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Link to="/reservations" className="btn btn-primary btn-lg">
              {tr(I18N.cta.bookNow, lang)} <span className="arrow">→</span>
            </Link>
            <a href={'tel:' + CAFE_INFO.phone.replace(/\s/g, '')} className="btn btn-ghost-light btn-lg">
              {CAFE_INFO.phone}
            </a>
          </Reveal>
        </div>
      </section>

      <style>{`
        @media (max-width: 880px) {
          .home-intro-grid, .home-teaser-head, .home-rules-grid, .home-menu-head, .home-menu-grid {
            grid-template-columns: 1fr !important;
            gap: 32px !important;
          }
          .home-cats-grid { grid-template-columns: 1fr 1fr !important; }
          .home-menu-item { padding: 24px 0 !important; border-right: none !important; }
          .home-teaser-head > div:last-child { text-align: left !important; }
          .home-menu-head > div:last-child { text-align: left !important; }
        }
        @media (max-width: 520px) {
          .home-cats-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { HomePage });