/* ============================================================
   OTHER PAGES — Menu, Reservations, About, Gallery, Blog
   ============================================================ */

/* ============================================================
   MENU PAGE
   ============================================================ */
function MenuPage() {
  const { lang } = useLang();
  const sections = ['signatures', 'hotDrinks', 'cold', 'sweet', 'wine'];

  return (
    <div className="page-enter" data-screen-label="03 Menu">
      <section className="page-hero" data-screen-label="Menu hero">
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <Reveal className="eyebrow" style={{ marginBottom: 32 }}>03 / 07 · {lang === 'ro' ? 'Meniu' : 'Menu'}</Reveal>
              <h1>
                <Reveal mask={true}>CAFEA &amp;</Reveal><br/>
                <Reveal mask={true} delay={1}><em>cealaltă</em></Reveal><br/>
                <Reveal mask={true} delay={2}>POVESTE.</Reveal>
              </h1>
            </div>
            <Reveal as="p" delay={3} className="sub">
              {lang === 'ro'
                ? 'Espresso prăjit săptămânal, cold brew lent, vinuri românești și trei berării artizanale. Patiseria e făcută acasă, dimineața, înainte de prima ceașcă.'
                : 'Weekly-roasted espresso, slow cold brew, Romanian wines and three craft breweries. Pastry is made in-house, in the morning, before the first cup.'}
            </Reveal>
          </div>
        </div>
      </section>

      {sections.map((key, idx) => {
        const sec = MENU[key];
        const isDark = idx % 2 === 1;
        return (
          <section key={key} className={'section ' + (isDark ? 'section-dark' : '')} data-screen-label={`Menu ${key}`}>
            <div className="container">
              <div className="section-label">
                <span className="eyebrow">{String(idx + 1).padStart(2, '0')} · {tr(sec, lang)}</span>
              </div>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1fr',
                gap: 0
              }} className="menu-grid">
                {sec.items.map((item, i) => (
                  <Reveal key={i} delay={Math.min((i % 2) + 1, 2)} style={{
                    padding: '32px 0',
                    borderTop: '1px solid ' + (isDark ? 'var(--line-on-dark-1)' : 'var(--line-2)'),
                    paddingRight: (i % 2 === 0) ? 48 : 0,
                    paddingLeft: (i % 2 === 1) ? 48 : 0,
                    borderRight: (i % 2 === 0) ? '1px solid ' + (isDark ? 'var(--line-on-dark-1)' : 'var(--line-2)') : 'none'
                  }} className="menu-item">
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
                      <h3 style={{
                        fontFamily: 'var(--font-display)',
                        fontSize: 'clamp(24px, 2.4vw, 32px)',
                        margin: 0,
                        textTransform: 'uppercase',
                        letterSpacing: '0.01em'
                      }}>
                        {tr(item.name, lang)}
                      </h3>
                      <div style={{
                        flex: '0 0 auto',
                        display: 'flex', alignItems: 'baseline', gap: 12
                      }}>
                        <span style={{ flex: '1 1 60px', height: 1, background: isDark ? 'var(--line-on-dark-2)' : 'var(--line-2)', minWidth: 30 }} />
                        <span className="techno" style={{ color: 'var(--gold-400)', fontSize: 14 }}>{item.price}</span>
                      </div>
                    </div>
                    <p style={{ color: isDark ? 'var(--fg-on-dark-2)' : 'var(--fg-3)', margin: '12px 0 0', fontSize: 15, lineHeight: 1.6, maxWidth: 480 }}>{tr(item.desc, lang)}</p>
                  </Reveal>
                ))}
              </div>
            </div>
          </section>
        );
      })}

      {/* Notes */}
      <section className="section section-cream" data-screen-label="Menu notes">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 48 }} className="notes-grid">
            <Reveal as="div">
              <div className="eyebrow" style={{ marginBottom: 16 }}>01</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: '0 0 12px', textTransform: 'uppercase' }}>{lang === 'ro' ? 'Boabe proaspete' : 'Fresh beans'}</h3>
              <p style={{ color: 'var(--fg-2)', lineHeight: 1.7 }}>
                {lang === 'ro' ? 'Cafeaua e prăjită săptămânal la o microbarista din București. Origine unică, blend de casă.' : 'Coffee is roasted weekly at a Bucharest micro-roastery. Single-origin, house blend.'}
              </p>
            </Reveal>
            <Reveal as="div" delay={1}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>02</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: '0 0 12px', textTransform: 'uppercase' }}>{lang === 'ro' ? 'Producători locali' : 'Local makers'}</h3>
              <p style={{ color: 'var(--fg-2)', lineHeight: 1.7 }}>
                {lang === 'ro' ? 'Vinurile vin din podgorii românești. Berea artizanală — de la trei microberării: Hop Hooligans, Ground Zero, Blackout.' : 'Wines come from Romanian vineyards. Craft beer — from three microbreweries: Hop Hooligans, Ground Zero, Blackout.'}
              </p>
            </Reveal>
            <Reveal as="div" delay={2}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>03</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, margin: '0 0 12px', textTransform: 'uppercase' }}>{lang === 'ro' ? 'Pisicile nu mănâncă' : 'Cats don\'t share'}</h3>
              <p style={{ color: 'var(--fg-2)', lineHeight: 1.7 }}>
                {lang === 'ro' ? 'Au meniul lor, pregătit de medic veterinar. Te rugăm să nu le oferi mâncare sau băutură — nici dacă par curioase.' : 'They have their own menu, prepared by a vet. Please don\'t offer them food or drink — even if they seem curious.'}
              </p>
            </Reveal>
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .menu-grid { grid-template-columns: 1fr !important; }
            .menu-item { padding: 24px 0 !important; border-right: none !important; padding-left: 0 !important; padding-right: 0 !important; }
            .notes-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </section>
    </div>
  );
}

/* ============================================================
   RESERVATIONS PAGE
   ============================================================ */
function ReservationsPage() {
  const { lang } = useLang();
  const [room, setRoom] = useState('vip1');
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({
    name: '', email: '', phone: '', date: '', time: '18:00', people: 2, duration: '2', notes: ''
  });

  const rooms = {
    vip1: {
      title: { ro: 'Camera VIP', en: 'VIP Room' },
      subtitle: { ro: 'Intimă · 2-4 persoane', en: 'Intimate · 2-4 people' },
      duration: '1h sau 2h',
      capacity: '2 — 4',
      price1h: '100 lei / pers.',
      price2h: '150 lei / pers.',
      includes: { ro: '2-3 pisici alese · ceai sau cafea · spațiu privat', en: '2-3 chosen cats · tea or coffee · private space' },
      image: 'https://images.unsplash.com/photo-1606214174585-fe31582dc6ee?w=1600&q=85&auto=format&fit=crop'
    },
    vip2: {
      title: { ro: 'Camera Verde', en: 'Green Room' },
      subtitle: { ro: 'Evenimente · 6-12 persoane', en: 'Events · 6-12 people' },
      duration: '2h',
      capacity: '6 — 12',
      price1h: null,
      price2h: '140 lei / pers.',
      includes: { ro: 'Spațiu privat · pisici disponibile · masă lungă · ideal pentru evenimente, terapie, socializare', en: 'Private space · available cats · long table · ideal for events, therapy, socializing' },
      image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=1600&q=85&auto=format&fit=crop'
    },
    main: {
      title: { ro: 'Sala principală', en: 'Main hall' },
      subtitle: { ro: 'Walk-in · până la 60 locuri', en: 'Walk-in · up to 60 seats' },
      duration: lang === 'ro' ? 'fără limită' : 'no limit',
      capacity: '1 — 60',
      price1h: null,
      price2h: lang === 'ro' ? 'consumație' : 'consumption',
      includes: { ro: 'Acces la spațiul comun cu pisici · cafea, vin, bere · fără rezervare necesară', en: 'Access to common space with cats · coffee, wine, beer · no reservation needed' },
      image: 'https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=1600&q=85&auto=format&fit=crop'
    }
  };

  const r = rooms[room];

  if (submitted) {
    return (
      <div className="page-enter section section-dark" style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '160px 24px 80px', textAlign: 'center' }}>
        <div style={{ maxWidth: 600 }}>
          <Reveal className="eyebrow" style={{ marginBottom: 24 }}>{lang === 'ro' ? 'Confirmare' : 'Confirmation'}</Reveal>
          <Reveal as="h1" delay={1} style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.9, margin: 0, textTransform: 'uppercase' }}>
            Mulțumim, <em className="serif" style={{ color: 'var(--gold-400)' }}>{form.name.split(' ')[0] || (lang === 'ro' ? 'prieten' : 'friend')}.</em>
          </Reveal>
          <Reveal as="p" delay={2} style={{ marginTop: 32, fontSize: 18, color: 'var(--fg-on-dark-2)', lineHeight: 1.7 }}>
            {lang === 'ro'
              ? 'Cererea ta a fost trimisă. Te contactăm în maxim 6 ore pentru confirmare. Verifică emailul și SMS-urile pe '
              : 'Your request has been sent. We will contact you within 6 hours to confirm. Check your email and SMS on '}
            <strong style={{ color: 'var(--gold-400)' }}>{form.phone || form.email}</strong>.
          </Reveal>
          <Reveal delay={3} style={{ marginTop: 40, display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Link to="/" className="btn btn-primary">{lang === 'ro' ? 'Acasă' : 'Home'} <span className="arrow">→</span></Link>
            <button onClick={() => { setSubmitted(false); setForm({ name: '', email: '', phone: '', date: '', time: '18:00', people: 2, duration: '2', notes: '' }); }} className="btn btn-ghost-light">
              {lang === 'ro' ? 'Altă rezervare' : 'Another reservation'}
            </button>
          </Reveal>
        </div>
      </div>
    );
  }

  return (
    <div className="page-enter" data-screen-label="04 Reservations">
      <section className="page-hero" data-screen-label="Reservations hero">
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <Reveal className="eyebrow" style={{ marginBottom: 32 }}>04 / 07 · {lang === 'ro' ? 'Rezervări' : 'Reservations'}</Reveal>
              <h1>
                <Reveal mask={true}>VINO.</Reveal><br/>
                <Reveal mask={true} delay={1}><em>Stai</em></Reveal><br/>
                <Reveal mask={true} delay={2}>O VREME.</Reveal>
              </h1>
            </div>
            <Reveal as="p" delay={3} className="sub">
              {lang === 'ro'
                ? 'Alege camera. Alege ora. Trimite cererea. Te confirmăm în 6 ore. Camerele VIP se rezervă cu 24h înainte — sala mare e walk-in.'
                : 'Choose the room. Choose the time. Send the request. We confirm in 6 hours. VIP rooms require 24h notice — main hall is walk-in.'}
            </Reveal>
          </div>
        </div>
      </section>

      {/* Room selector */}
      <section className="section section-cream" data-screen-label="Room selector">
        <div className="container">
          <Reveal className="section-label">
            <span className="eyebrow">01 · {lang === 'ro' ? 'Alege spațiul' : 'Choose the space'}</span>
          </Reveal>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginBottom: 64,
            borderTop: '1px solid var(--line-2)', borderBottom: '1px solid var(--line-2)'
          }} className="rooms-grid">
            {Object.entries(rooms).map(([key, rm], i) => (
              <button
                key={key}
                onClick={() => setRoom(key)}
                style={{
                  textAlign: 'left',
                  padding: 32,
                  background: room === key ? 'var(--ink-900)' : 'transparent',
                  color: room === key ? 'var(--fg-on-dark-1)' : 'var(--ink-900)',
                  border: 'none',
                  borderRight: i < 2 ? '1px solid var(--line-2)' : 'none',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 16,
                  cursor: 'pointer',
                  transition: 'background 300ms ease, color 300ms ease',
                  minHeight: 280
                }}
                className="room-btn"
              >
                <span className="techno" style={{ color: room === key ? 'var(--gold-400)' : 'var(--gold-500)' }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3vw, 40px)', margin: 0, textTransform: 'uppercase' }}>{tr(rm.title, lang)}</h3>
                <span style={{ fontSize: 14, color: room === key ? 'var(--fg-on-dark-2)' : 'var(--fg-3)' }}>{tr(rm.subtitle, lang)}</span>
                <div style={{ marginTop: 'auto', fontSize: 13, color: room === key ? 'var(--fg-on-dark-2)' : 'var(--fg-3)' }}>
                  {rm.price1h && <div><span className="techno" style={{ color: room === key ? 'var(--gold-400)' : 'var(--gold-500)', fontSize: 11 }}>1h ·</span> {rm.price1h}</div>}
                  {rm.price2h && <div><span className="techno" style={{ color: room === key ? 'var(--gold-400)' : 'var(--gold-500)', fontSize: 11 }}>2h ·</span> {rm.price2h}</div>}
                </div>
                {room === key && (
                  <span style={{ position: 'absolute' }} />
                )}
              </button>
            ))}
          </div>

          {/* Room detail */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 64,
            alignItems: 'center'
          }} className="room-detail">
            <Reveal as="div" key={room + '-img'}>
              <div className="img-frame" style={{ aspectRatio: '4/5' }}>
                <img src={r.image} alt={tr(r.title, lang)} />
              </div>
            </Reveal>
            <Reveal as="div" key={room + '-info'} delay={1}>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.5vw, 64px)', lineHeight: 0.95, margin: 0, textTransform: 'uppercase' }}>
                {tr(r.title, lang)}
              </h2>
              <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 4 }}>{lang === 'ro' ? 'Durată' : 'Duration'}</div>
                  <div style={{ fontSize: 18, fontWeight: 500 }}>{r.duration}</div>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 4 }}>{lang === 'ro' ? 'Capacitate' : 'Capacity'}</div>
                  <div style={{ fontSize: 18, fontWeight: 500 }}>{r.capacity}</div>
                </div>
                {r.price1h && <div>
                  <div className="eyebrow" style={{ marginBottom: 4 }}>1h</div>
                  <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--gold-600)' }}>{r.price1h}</div>
                </div>}
                {r.price2h && <div>
                  <div className="eyebrow" style={{ marginBottom: 4 }}>{r.price1h ? '2h' : (lang === 'ro' ? 'Tarif' : 'Rate')}</div>
                  <div style={{ fontSize: 18, fontWeight: 500, color: 'var(--gold-600)' }}>{r.price2h}</div>
                </div>}
              </div>
              <div style={{ marginTop: 32, paddingTop: 32, borderTop: '1px solid var(--line-2)' }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>{lang === 'ro' ? 'Include' : 'Includes'}</div>
                <p style={{ fontSize: 16, color: 'var(--fg-2)', lineHeight: 1.7, margin: 0 }}>{tr(r.includes, lang)}</p>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Form */}
      <section className="section section-dark" data-screen-label="Reservation form">
        <div className="container">
          <Reveal className="section-label">
            <span className="eyebrow">02 · {lang === 'ro' ? 'Detalii rezervare' : 'Reservation details'}</span>
          </Reveal>
          <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }} style={{ display: 'grid', gap: 48, maxWidth: 920 }}>
            <div className="field-row">
              <div className="field">
                <label className="field-label">{lang === 'ro' ? 'Nume complet' : 'Full name'} *</label>
                <input type="text" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
              </div>
              <div className="field">
                <label className="field-label">{lang === 'ro' ? 'Telefon' : 'Phone'} *</label>
                <input type="tel" required value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label className="field-label">Email *</label>
                <input type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
              </div>
              <div className="field">
                <label className="field-label">{lang === 'ro' ? 'Spațiu ales' : 'Chosen space'}</label>
                <select value={room} onChange={(e) => setRoom(e.target.value)} style={{ appearance: 'none', background: 'transparent', color: 'inherit' }}>
                  <option style={{ color: '#000' }} value="vip1">{tr(rooms.vip1.title, lang)}</option>
                  <option style={{ color: '#000' }} value="vip2">{tr(rooms.vip2.title, lang)}</option>
                  <option style={{ color: '#000' }} value="main">{tr(rooms.main.title, lang)}</option>
                </select>
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label className="field-label">{lang === 'ro' ? 'Dată' : 'Date'} *</label>
                <input type="date" required value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} style={{ colorScheme: 'dark' }} />
              </div>
              <div className="field">
                <label className="field-label">{lang === 'ro' ? 'Oră' : 'Time'} *</label>
                <select value={form.time} onChange={(e) => setForm({ ...form, time: e.target.value })} style={{ appearance: 'none', background: 'transparent', color: 'inherit' }}>
                  {['10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00'].map(t => (
                    <option key={t} style={{ color: '#000' }}>{t}</option>
                  ))}
                </select>
              </div>
            </div>
            <div className="field-row">
              <div className="field">
                <label className="field-label">{lang === 'ro' ? 'Persoane' : 'People'}</label>
                <input type="number" min="1" max="12" value={form.people} onChange={(e) => setForm({ ...form, people: e.target.value })} />
              </div>
              {room === 'vip1' && (
                <div className="field">
                  <label className="field-label">{lang === 'ro' ? 'Durată' : 'Duration'}</label>
                  <select value={form.duration} onChange={(e) => setForm({ ...form, duration: e.target.value })} style={{ appearance: 'none', background: 'transparent', color: 'inherit' }}>
                    <option style={{ color: '#000' }} value="1">1h — 100 lei/pers.</option>
                    <option style={{ color: '#000' }} value="2">2h — 150 lei/pers.</option>
                  </select>
                </div>
              )}
            </div>
            <div className="field">
              <label className="field-label">{lang === 'ro' ? 'Mențiuni speciale (opțional)' : 'Special notes (optional)'}</label>
              <textarea rows="3" value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} placeholder={lang === 'ro' ? 'Alergii, ocazii speciale, pisici preferate...' : 'Allergies, special occasions, favorite cats...'} />
            </div>

            <div style={{
              marginTop: 32,
              paddingTop: 32,
              borderTop: '1px solid var(--line-on-dark-1)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              gap: 24, flexWrap: 'wrap'
            }}>
              <p style={{ fontSize: 12, color: 'var(--fg-on-dark-3)', maxWidth: 480, lineHeight: 1.6, margin: 0, fontFamily: 'var(--font-techno)', letterSpacing: '0.04em' }}>
                {lang === 'ro'
                  ? 'PRIN TRIMITEREA CERERII ACCEPȚI REGULILE CASEI, TERMENII ȘI POLITICA GDPR.'
                  : 'BY SUBMITTING YOU AGREE TO THE HOUSE RULES, TERMS AND GDPR POLICY.'}
              </p>
              <button type="submit" className="btn btn-primary btn-lg">
                {lang === 'ro' ? 'Trimite cererea' : 'Submit request'} <span className="arrow">→</span>
              </button>
            </div>
          </form>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .rooms-grid { grid-template-columns: 1fr !important; }
            .rooms-grid .room-btn { border-right: none !important; border-bottom: 1px solid var(--line-2); min-height: auto !important; }
            .room-detail { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
        `}</style>
      </section>
    </div>
  );
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
function AboutPage() {
  const { lang } = useLang();

  return (
    <div className="page-enter" data-screen-label="05 About">
      <section className="page-hero" data-screen-label="About hero">
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <Reveal className="eyebrow" style={{ marginBottom: 32 }}>05 / 07 · {lang === 'ro' ? 'Despre noi' : 'About'}</Reveal>
              <h1>
                <Reveal mask={true}>POVESTEA</Reveal><br/>
                <Reveal mask={true} delay={1}><em>cafenelei.</em></Reveal>
              </h1>
            </div>
            <Reveal as="p" delay={2} className="sub">
              {lang === 'ro'
                ? 'Cum se naște o cafenea? Dintr-o pisică. Dintr-o ceașcă. Dintr-o idee că lucrurile pot să se miște mai încet în București.'
                : 'How is a cafe born? From a cat. From a cup. From an idea that things can move slower in Bucharest.'}
            </Reveal>
          </div>
        </div>
      </section>

      {/* Story narrative */}
      <section className="section" data-screen-label="Story">
        <div className="container-narrow">
          <Reveal as="div" className="eyebrow" style={{ marginBottom: 32 }}>{lang === 'ro' ? '— Capitolul unu' : '— Chapter one'}</Reveal>
          <Reveal as="h2" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 5vw, 72px)', lineHeight: 0.95, margin: 0, textTransform: 'uppercase' }}>
            De ce Maine Coon?
          </Reveal>
          <Reveal as="p" delay={1} style={{ marginTop: 32, fontSize: 19, lineHeight: 1.75, color: 'var(--fg-2)' }}>
            {lang === 'ro'
              ? 'Pentru că sunt cele mai mari pisici domestice. Pentru că sunt vocale fără să fie agresive. Pentru că au răbdarea unui câine și grația unei pisici. Pentru că, ridicate corect, pot atinge 10 kilograme de blândețe.'
              : 'Because they are the largest domestic cats. Because they are vocal without being aggressive. Because they have a dog\'s patience and a cat\'s grace. Because, raised right, they can reach ten kilos of gentleness.'}
          </Reveal>
          <Reveal as="p" delay={2} style={{ marginTop: 20, fontSize: 19, lineHeight: 1.75, color: 'var(--fg-2)' }}>
            {lang === 'ro'
              ? 'Maine Coon e o rasă care iubește spațiul, dar nu fuge de oameni. Care vorbește, dar nu țipă. Care îți cere atenție, dar te lasă să răspunzi în propriul ritm. E rasa potrivită pentru un loc construit în jurul liniștii.'
              : 'Maine Coon is a breed that loves space but doesn\'t flee from people. That talks but doesn\'t shout. That asks for attention but lets you respond on your own terms. It is the right breed for a place built around stillness.'}
          </Reveal>
        </div>
      </section>

      {/* Image break */}
      <Reveal>
        <div style={{ height: 'clamp(380px, 60vh, 640px)', overflow: 'hidden' }}>
          <img src="https://images.unsplash.com/photo-1574144611937-0df059b5ef3e?w=2400&q=85&auto=format&fit=crop" alt="Maine Coon" style={{ width: '100%', height: '100%', objectFit: 'cover' }} loading="lazy" />
        </div>
      </Reveal>

      <section className="section" data-screen-label="Story2">
        <div className="container-narrow">
          <Reveal as="div" className="eyebrow" style={{ marginBottom: 32 }}>{lang === 'ro' ? '— Capitolul doi' : '— Chapter two'}</Reveal>
          <Reveal as="h2" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 5vw, 72px)', lineHeight: 0.95, margin: 0, textTransform: 'uppercase' }}>
            Promisiunea noastră
          </Reveal>
          <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }} className="promise-grid">
            <Reveal as="div" delay={1}>
              <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--fg-2)', margin: 0 }}>
                {lang === 'ro'
                  ? 'Construim cafeneaua în jurul pisicilor, nu invers. Asta înseamnă spații generoase, ore de odihnă respectate, oameni puțini și liniște ca regulă. Nu suntem un loc pentru petreceri — suntem un loc pentru întâlniri lente.'
                  : 'We build the cafe around the cats, not the other way around. That means generous spaces, respected rest hours, few people, and quiet as a rule. We are not a place for parties — we are a place for slow encounters.'}
              </p>
            </Reveal>
            <Reveal as="div" delay={2}>
              <p style={{ fontSize: 17, lineHeight: 1.75, color: 'var(--fg-2)', margin: 0 }}>
                {lang === 'ro'
                  ? 'Pisicile noastre sunt văzute lunar de un medic veterinar și au un meniu propriu. Camerele sunt curățate înainte și după fiecare grupă VIP. Nu folosim arome puternice. Nu ridicăm vocea. Lucrurile bune au nevoie de timp.'
                  : 'Our cats are seen monthly by a vet and have their own menu. Rooms are cleaned before and after every VIP group. We don\'t use strong fragrances. We don\'t raise our voices. Good things take time.'}
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      {/* House rules — full list */}
      <section className="section section-dark" data-screen-label="House rules">
        <div className="container">
          <div className="section-label">
            <span className="eyebrow">{lang === 'ro' ? 'Regulile casei' : 'House rules'}</span>
          </div>
          <div style={{ marginBottom: 48, maxWidth: 720 }}>
            <Reveal as="h2" style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 5.6vw, 80px)', lineHeight: 0.92, margin: 0, textTransform: 'uppercase' }}>
              Paisprezece reguli<br/><em className="serif" style={{ color: 'var(--gold-400)' }}>blânde.</em>
            </Reveal>
            <Reveal as="p" delay={1} style={{ marginTop: 24, fontSize: 17, color: 'var(--fg-on-dark-2)', lineHeight: 1.7 }}>
              {lang === 'ro'
                ? 'Sunt afișate în cafenea și acceptate odată cu rezervarea. Le-am scris ca să ne ajute, nu ca să ne constrângă.'
                : 'They are posted in the cafe and accepted with your reservation. We wrote them to help us, not to constrain us.'}
            </Reveal>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }} className="rules-grid">
            {HOUSE_RULES.map((rule, i) => (
              <Reveal key={i} delay={(i % 2) + 1} style={{
                display: 'grid',
                gridTemplateColumns: '48px 1fr',
                gap: 20,
                padding: '24px 0',
                paddingRight: (i % 2 === 0) ? 32 : 0,
                paddingLeft: (i % 2 === 1) ? 32 : 0,
                borderTop: '1px solid var(--line-on-dark-1)',
                borderRight: (i % 2 === 0) ? '1px solid var(--line-on-dark-1)' : 'none',
                alignItems: 'start'
              }} className="rule-cell">
                <span className="techno" style={{ color: 'var(--gold-400)', paddingTop: 4 }}>{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, margin: 0, textTransform: 'uppercase', letterSpacing: '0.01em', color: 'var(--fg-on-dark-1)' }}>
                    {rule[lang][0]}
                  </h3>
                  <p style={{ marginTop: 8, fontSize: 14, color: 'var(--fg-on-dark-2)', lineHeight: 1.6 }}>
                    {rule[lang][1]}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .promise-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
            .rules-grid { grid-template-columns: 1fr !important; }
            .rule-cell { padding-left: 0 !important; padding-right: 0 !important; border-right: none !important; }
          }
        `}</style>
      </section>

      {/* Location */}
      <section className="section section-cream" data-screen-label="Location">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="loc-grid">
            <Reveal as="div">
              <div className="eyebrow" style={{ marginBottom: 24 }}>{lang === 'ro' ? 'Vizitează' : 'Visit'}</div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4.8vw, 64px)', lineHeight: 0.95, margin: 0, textTransform: 'uppercase' }}>
                Bd. Pache<br/>Protopopescu, <em className="serif" style={{ color: 'var(--gold-500)' }}>100.</em>
              </h2>
              <p style={{ marginTop: 24, color: 'var(--fg-2)', fontSize: 17, lineHeight: 1.7 }}>
                {lang === 'ro' ? 'Sector 2, București. Aproape de Piața Iancului. Stația de metrou cea mai apropiată: Iancului (M1).' : 'District 2, Bucharest. Near Iancului Square. Nearest metro: Iancului (M1).'}
              </p>
              <div style={{ marginTop: 32, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                {CAFE_INFO.schedule[lang].map((s, i) => (
                  <div key={i}>
                    <div className="eyebrow" style={{ marginBottom: 4 }}>{s.d}</div>
                    <div style={{ fontSize: 18, fontWeight: 500 }}>{s.h}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 32, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                <a href={'tel:' + CAFE_INFO.phone.replace(/\s/g, '')} className="btn btn-ghost">{CAFE_INFO.phone}</a>
                <a href="https://maps.google.com/?q=Bd.+Pache+Protopopescu+100+Bucuresti" target="_blank" rel="noopener" className="btn btn-ghost">{lang === 'ro' ? 'Deschide harta' : 'Open map'} ↗</a>
              </div>
            </Reveal>
            <Reveal as="div" delay={1}>
              <div style={{
                aspectRatio: '4/5', position: 'relative', overflow: 'hidden',
                background: 'var(--ink-800)'
              }}>
                <iframe
                  title="Map"
                  src="https://www.openstreetmap.org/export/embed.html?bbox=26.124%2C44.443%2C26.144%2C44.453&layer=mapnik&marker=44.448%2C26.134"
                  style={{ width: '100%', height: '100%', border: 0, filter: 'grayscale(0.7) contrast(1.05)' }}
                />
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`@media (max-width: 880px) { .loc-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </section>
    </div>
  );
}

/* ============================================================
   GALLERY PAGE — masonry mosaic
   ============================================================ */
function GalleryPage() {
  const { lang } = useLang();
  const [filter, setFilter] = useState('all');
  const [lightbox, setLightbox] = useState(null);

  const filtered = GALLERY.filter(g => filter === 'all' || g.kind === filter);

  return (
    <div className="page-enter" data-screen-label="06 Gallery">
      <section className="page-hero" data-screen-label="Gallery hero">
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <Reveal className="eyebrow" style={{ marginBottom: 32 }}>06 / 07 · {lang === 'ro' ? 'Galerie' : 'Gallery'}</Reveal>
              <h1>
                <Reveal mask={true}>PRIVIRI</Reveal><br/>
                <Reveal mask={true} delay={1}><em>blânde.</em></Reveal>
              </h1>
            </div>
            <Reveal as="p" delay={2} className="sub">
              {lang === 'ro'
                ? 'Fotografii din cafenea — pisici, cafea, lumina după-amiezii. Fără blitz, fără filtru, fără regie.'
                : 'Photos from the cafe — cats, coffee, afternoon light. No flash, no filter, no direction.'}
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section" data-screen-label="Gallery grid">
        <div className="container">
          {/* Filter */}
          <Reveal style={{ display: 'flex', gap: 0, marginBottom: 48, borderTop: '1px solid var(--line-2)', borderBottom: '1px solid var(--line-2)' }}>
            {[
              { id: 'all', ro: 'Tot', en: 'All' },
              { id: 'cat', ro: 'Pisici', en: 'Cats' },
              { id: 'coffee', ro: 'Cafea & spațiu', en: 'Coffee & space' }
            ].map(f => (
              <button key={f.id} onClick={() => setFilter(f.id)} style={{
                padding: '18px 24px',
                background: 'transparent',
                border: 'none',
                borderRight: '1px solid var(--line-2)',
                fontFamily: 'var(--font-techno)',
                fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
                color: filter === f.id ? 'var(--ink-900)' : 'var(--fg-3)',
                cursor: 'pointer',
                position: 'relative'
              }}>
                {f[lang]}
                {filter === f.id && <span style={{ position: 'absolute', bottom: -1, left: 0, right: 0, height: 2, background: 'var(--gold-400)' }} />}
              </button>
            ))}
            <div style={{ marginLeft: 'auto', padding: '18px 24px', fontFamily: 'var(--font-techno)', fontSize: 11, letterSpacing: '0.22em', color: 'var(--fg-3)' }}>
              {String(filtered.length).padStart(2, '0')} {lang === 'ro' ? 'IMAGINI' : 'IMAGES'}
            </div>
          </Reveal>

          {/* Mosaic */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gridAutoRows: '220px',
            gap: 12
          }} className="gallery-mosaic">
            {filtered.map((g, i) => (
              <Reveal key={g.src + i} delay={Math.min((i % 4) + 1, 4)} style={{
                gridColumn: `span ${g.w}`,
                gridRow: `span ${g.h}`,
                cursor: 'zoom-in'
              }}>
                <div className="img-frame" style={{ width: '100%', height: '100%' }} onClick={() => setLightbox(g)}>
                  <img src={g.src} alt="" loading="lazy" />
                </div>
              </Reveal>
            ))}
          </div>

          <style>{`
            @media (max-width: 880px) {
              .gallery-mosaic { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 180px !important; }
            }
          `}</style>
        </div>
      </section>

      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{
          position: 'fixed', inset: 0, zIndex: 200,
          background: 'rgba(10,10,10,0.95)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 32, cursor: 'zoom-out',
          animation: 'fadeIn 250ms ease'
        }}>
          <img src={lightbox.src.replace('w=1400', 'w=2400')} alt="" style={{ maxWidth: '92vw', maxHeight: '88vh', objectFit: 'contain', boxShadow: '0 20px 60px rgba(0,0,0,0.5)' }} />
          <button onClick={() => setLightbox(null)} style={{ position: 'absolute', top: 24, right: 24, background: 'transparent', border: 'none', color: 'var(--fg-on-dark-1)', padding: 12 }} aria-label="Close">
            <svg width="28" height="28" viewBox="0 0 28 28"><path d="M4 4l20 20M24 4L4 24" stroke="currentColor" strokeWidth="1.5" /></svg>
          </button>
          <style>{`@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }`}</style>
        </div>
      )}
    </div>
  );
}

/* ============================================================
   BLOG PAGE
   ============================================================ */
function BlogPage() {
  const { lang } = useLang();
  const featured = BLOG[0];
  const rest = BLOG.slice(1);

  return (
    <div className="page-enter" data-screen-label="07 Blog">
      <section className="page-hero" data-screen-label="Blog hero">
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <Reveal className="eyebrow" style={{ marginBottom: 32 }}>07 / 07 · {lang === 'ro' ? 'Jurnal' : 'Journal'}</Reveal>
              <h1>
                <Reveal mask={true}>NOTE</Reveal><br/>
                <Reveal mask={true} delay={1}><em>de pisică.</em></Reveal>
              </h1>
            </div>
            <Reveal as="p" delay={2} className="sub">
              {lang === 'ro'
                ? 'Articole despre rasă, ritualul cafelei, regulile casei și viața dintr-o cafenea liniștită. Trei texte noi pe săptămână.'
                : 'Notes on the breed, the coffee ritual, house rules, and life in a quiet cafe. Three new pieces a week.'}
            </Reveal>
          </div>
        </div>
      </section>

      {/* Featured */}
      <section className="section section-tight" data-screen-label="Blog featured">
        <div className="container">
          <Reveal>
            <a href="#" className="blog-feature" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
              <div className="img-frame" style={{ aspectRatio: '5/4' }}>
                <img src={featured.image} alt={tr(featured.title, lang)} loading="lazy" />
                <div style={{ position: 'absolute', top: 16, left: 16, background: 'var(--gold-400)', color: 'var(--ink-900)', padding: '6px 14px', fontFamily: 'var(--font-techno)', fontSize: 11, letterSpacing: '0.22em' }}>
                  {lang === 'ro' ? 'NOU' : 'NEW'}
                </div>
              </div>
              <div>
                <div className="eyebrow" style={{ marginBottom: 16, color: 'var(--gold-500)' }}>
                  {tr(featured.category, lang)} · {featured.readTime}
                </div>
                <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4.5vw, 56px)', lineHeight: 0.98, margin: 0, textTransform: 'uppercase' }}>
                  {tr(featured.title, lang)}
                </h2>
                <p style={{ marginTop: 24, color: 'var(--fg-2)', fontSize: 18, lineHeight: 1.65 }}>
                  {tr(featured.excerpt, lang)}
                </p>
                <span className="btn btn-ghost" style={{ marginTop: 24 }}>
                  {tr(I18N.cta.readMore, lang)} <span className="arrow">→</span>
                </span>
              </div>
            </a>
          </Reveal>
          <style>{`@media (max-width: 880px) { .blog-feature { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
        </div>
      </section>

      {/* Grid */}
      <section className="section" data-screen-label="Blog grid">
        <div className="container">
          <div className="section-label">
            <span className="eyebrow">{lang === 'ro' ? 'Articole recente' : 'Recent posts'}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }} className="blog-grid">
            {rest.map((post, i) => (
              <Reveal key={post.id} delay={Math.min((i % 3) + 1, 3)}>
                <a href="#" style={{ display: 'block' }} className="blog-card">
                  <div className="img-frame" style={{ aspectRatio: '4/3', marginBottom: 20 }}>
                    <img src={post.image} alt={tr(post.title, lang)} loading="lazy" />
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', fontFamily: 'var(--font-techno)', fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
                    <span style={{ color: 'var(--gold-500)' }}>{tr(post.category, lang)}</span>
                    <span style={{ color: 'var(--fg-3)' }}>{post.readTime}</span>
                  </div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 26, lineHeight: 1.05, margin: '12px 0 12px',
                    textTransform: 'uppercase', letterSpacing: '0.005em'
                  }}>{tr(post.title, lang)}</h3>
                  <p style={{ color: 'var(--fg-2)', fontSize: 15, lineHeight: 1.65, margin: 0 }}>{tr(post.excerpt, lang)}</p>
                </a>
              </Reveal>
            ))}
          </div>
          <style>{`
            .blog-card { transition: transform 400ms cubic-bezier(0.2,0.6,0.2,1); }
            .blog-card:hover { transform: translateY(-4px); }
            @media (max-width: 880px) { .blog-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* Newsletter */}
      <section className="section section-dark" data-screen-label="Newsletter">
        <div className="container-narrow" style={{ textAlign: 'center' }}>
          <Reveal className="eyebrow" style={{ marginBottom: 24 }}>{lang === 'ro' ? 'Newsletter' : 'Newsletter'}</Reveal>
          <Reveal as="h2" delay={1} style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 5.6vw, 80px)', lineHeight: 0.95, margin: 0, textTransform: 'uppercase' }}>
            Trei articole<br/>pe <em className="serif" style={{ color: 'var(--gold-400)' }}>săptămână.</em>
          </Reveal>
          <Reveal delay={2} style={{ marginTop: 32, display: 'flex', gap: 16, maxWidth: 500, margin: '32px auto 0', flexWrap: 'wrap' }}>
            <input type="email" placeholder={lang === 'ro' ? 'Adresa ta de email' : 'Your email address'} style={{
              flex: 1, minWidth: 240,
              background: 'transparent', border: 'none',
              borderBottom: '1px solid var(--line-on-dark-2)',
              color: 'var(--fg-on-dark-1)',
              padding: '16px 0',
              fontSize: 16, fontFamily: 'var(--font-body)',
              outline: 'none'
            }} />
            <button className="btn btn-primary">{lang === 'ro' ? 'Abonează-te' : 'Subscribe'} <span className="arrow">→</span></button>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MenuPage, ReservationsPage, AboutPage, GalleryPage, BlogPage });