/* ============================================================
   CATS — list + detail
   ============================================================ */

function CatsPage() {
  const { lang } = useLang();
  const { path, navigate } = useRouter();

  // Check if detail
  const match = path.match(/^\/cats\/(\d+)$/);
  if (match) {
    const id = parseInt(match[1]);
    const cat = CATS.find(c => c.id === id);
    if (!cat) {
      return (
        <div className="page-enter" style={{ padding: '200px 0', textAlign: 'center' }}>
          <p>{lang === 'ro' ? 'Pisica nu a fost găsită.' : 'Cat not found.'}</p>
          <Link to="/cats" className="btn btn-ghost" style={{ marginTop: 24 }}>← {lang === 'ro' ? 'Înapoi' : 'Back'}</Link>
        </div>
      );
    }
    return <CatDetail cat={cat} />;
  }

  return (
    <div className="page-enter" data-screen-label="02 Cats">
      {/* Page hero */}
      <section className="page-hero" data-screen-label="Cats hero">
        <div className="container">
          <div className="page-hero-grid">
            <div>
              <Reveal as="div" className="eyebrow" style={{ marginBottom: 32 }}>
                02 / 07 · {lang === 'ro' ? 'Familia noastră' : 'Our family'}
              </Reveal>
              <h1>
                <Reveal mask={true}>CINCISPREZECE</Reveal><br/>
                <Reveal mask={true} delay={1}><em>regi.</em></Reveal>
              </h1>
            </div>
            <Reveal as="p" delay={2} className="sub">
              {lang === 'ro'
                ? 'Fiecare Maine Coon din cafenea are nume, vârstă, personalitate și istorie. Unii sunt campioni TICA și FIFe. Toți decid când să te cunoască — nu invers.'
                : 'Each Maine Coon in the cafe has a name, age, personality and history. Some are TICA and FIFe champions. All decide when to meet you — not the other way around.'}
            </Reveal>
          </div>
        </div>
        <div className="page-hero-counter">
          {lang === 'ro' ? 'Pisoi total' : 'Cats total'}
          <strong>15</strong>
        </div>
      </section>

      {/* Filter bar (decorative — by trait) */}
      <CatsGrid />

      {/* Closing CTA */}
      <section className="section section-cream" data-screen-label="MeetThemCta">
        <div className="container" style={{ textAlign: 'center' }}>
          <Reveal as="div" className="eyebrow" style={{ marginBottom: 24 }}>
            {lang === 'ro' ? 'Vino să-i cunoști' : 'Come meet them'}
          </Reveal>
          <Reveal as="h2" delay={1} style={{
            fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 6vw, 96px)',
            lineHeight: 0.9, margin: 0, textTransform: 'uppercase'
          }}>
            Cincisprezece <em className="serif" style={{ color: 'var(--gold-500)' }}>caractere.</em><br/>
            Un singur loc.
          </Reveal>
          <Reveal delay={2} style={{ marginTop: 40 }}>
            <Link to="/reservations" className="btn btn-primary btn-lg">
              {tr(I18N.cta.bookNow, lang)} <span className="arrow">→</span>
            </Link>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function CatsGrid() {
  const { lang } = useLang();
  const [filter, setFilter] = useState('all');

  const filtered = CATS.filter(c => {
    if (filter === 'all') return true;
    if (filter === 'champions') return c.competitions.length >= 2;
    if (filter === 'kittens') return c.age <= 3;
    if (filter === 'senior') return c.age >= 5;
    return true;
  });

  const filters = [
    { id: 'all', ro: 'Toți', en: 'All' },
    { id: 'champions', ro: 'Campioni', en: 'Champions' },
    { id: 'kittens', ro: 'Tineri (≤3 ani)', en: 'Young (≤3 yr)' },
    { id: 'senior', ro: 'Maturi (5+ ani)', en: 'Mature (5+ yr)' }
  ];

  return (
    <section className="section" data-screen-label="Cats grid">
      <div className="container">
        <Reveal as="div" style={{
          display: 'flex', gap: 0, flexWrap: 'wrap',
          borderTop: '1px solid var(--line-2)', borderBottom: '1px solid var(--line-2)',
          marginBottom: 64
        }}>
          {filters.map(f => (
            <button
              key={f.id}
              onClick={() => setFilter(f.id)}
              style={{
                padding: '20px 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',
                transition: 'color 200ms ease, background 200ms ease',
                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: '20px 24px', fontFamily: 'var(--font-techno)', fontSize: 11, letterSpacing: '0.22em', color: 'var(--fg-3)' }}>
            {String(filtered.length).padStart(2, '0')} / {String(CATS.length).padStart(2, '0')}
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 32
        }} className="cats-grid">
          {filtered.map((cat, i) => (
            <Reveal key={cat.id} delay={Math.min((i % 3) + 1, 3)}>
              <Link to={'/cats/' + cat.id} style={{ display: 'block' }} className="cat-card">
                <div className="img-frame" style={{ aspectRatio: '4/5', marginBottom: 20 }}>
                  <img src={cat.image} alt={cat.name} loading="lazy" />
                  <div style={{
                    position: 'absolute', top: 16, left: 16,
                    fontFamily: 'var(--font-techno)', fontSize: 11, letterSpacing: '0.22em',
                    background: 'rgba(10,10,10,0.7)', color: 'var(--gold-400)',
                    padding: '6px 12px'
                  }}>
                    {String(cat.id).padStart(2, '0')} / 15
                  </div>
                  {cat.competitions.length >= 2 && (
                    <div style={{
                      position: 'absolute', top: 16, right: 16,
                      fontFamily: 'var(--font-techno)', fontSize: 10, letterSpacing: '0.22em',
                      background: 'var(--gold-400)', color: 'var(--ink-900)',
                      padding: '6px 12px'
                    }}>
                      ★ CHAMPION
                    </div>
                  )}
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <h3 style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 'clamp(28px, 5vw, 40px)', margin: 0, textTransform: 'uppercase',
                    letterSpacing: '0.01em'
                  }}>{cat.name}</h3>
                  <span className="techno" style={{ color: 'var(--gold-500)' }}>{cat.age} {lang === 'ro' ? 'ANI' : 'YR'}</span>
                </div>
                <p style={{ fontSize: 14, color: 'var(--fg-3)', margin: '4px 0 12px', letterSpacing: '0.02em' }}>{tr({ ro: cat.color, en: cat.coat }, lang)}</p>
                <p style={{ fontSize: 15, color: 'var(--fg-2)', margin: 0, lineHeight: 1.65 }}>
                  {tr(cat.personality, lang)}
                </p>
                <div style={{ display: 'flex', gap: 8, marginTop: 16, flexWrap: 'wrap' }}>
                  {cat.traits[lang].map((t, j) => (
                    <span key={j} className="chip">{t}</span>
                  ))}
                </div>
              </Link>
            </Reveal>
          ))}
        </div>

        <style>{`
          .cat-card { transition: transform 400ms cubic-bezier(0.2,0.6,0.2,1); }
          .cat-card:hover { transform: translateY(-4px); }
          @media (max-width: 1024px) { .cats-grid { grid-template-columns: 1fr 1fr !important; } }
          @media (max-width: 600px) { .cats-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

function CatDetail({ cat }) {
  const { lang } = useLang();
  const idx = CATS.findIndex(c => c.id === cat.id);
  const prev = CATS[(idx - 1 + CATS.length) % CATS.length];
  const next = CATS[(idx + 1) % CATS.length];

  return (
    <div className="page-enter" data-screen-label={`Cat ${cat.name}`}>
      {/* Hero */}
      <section style={{
        background: 'var(--ink-900)',
        color: 'var(--fg-on-dark-1)',
        padding: '160px 0 0',
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div className="container">
          <div style={{ marginBottom: 40, display: 'flex', gap: 24, alignItems: 'center' }}>
            <Link to="/cats" style={{
              fontFamily: 'var(--font-techno)', fontSize: 11, letterSpacing: '0.22em',
              color: 'var(--gold-400)'
            }}>← {lang === 'ro' ? 'TOATE PISICILE' : 'ALL CATS'}</Link>
            <span className="techno" style={{ color: 'var(--fg-on-dark-3)' }}>
              {String(cat.id).padStart(2, '0')} / 15
            </span>
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.1fr 1fr',
            gap: 64,
            alignItems: 'end'
          }} className="cat-hero-grid">
            <Reveal as="div">
              <div className="eyebrow" style={{ marginBottom: 16 }}>{tr({ ro: cat.color, en: cat.coat }, lang)}</div>
              <h1 style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(56px, 12vw, 200px)',
                lineHeight: 0.85, margin: 0, textTransform: 'uppercase',
                letterSpacing: '0.005em',
                wordBreak: 'break-word'
              }}>{cat.name}</h1>
              <p className="serif" style={{
                fontFamily: 'var(--font-serif)',
                fontStyle: 'italic', fontWeight: 300,
                fontSize: 'clamp(24px, 3vw, 36px)',
                color: 'var(--gold-400)', marginTop: 16
              }}>{cat.age} {lang === 'ro' ? 'ani' : 'years old'}</p>
            </Reveal>
            <Reveal as="div" delay={1}>
              <div className="img-frame" style={{ aspectRatio: '3/4' }}>
                <img src={cat.image} alt={cat.name} />
              </div>
            </Reveal>
          </div>
        </div>
        <style>{`@media (max-width: 880px) { .cat-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </section>

      {/* Body */}
      <section className="section section-dark" style={{ paddingTop: 80 }}>
        <div className="container">
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1.4fr',
            gap: 64,
            paddingTop: 64,
            borderTop: '1px solid var(--line-on-dark-1)'
          }} className="cat-body-grid">
            <Reveal as="div">
              <div className="eyebrow" style={{ marginBottom: 24 }}>{lang === 'ro' ? 'Personalitate' : 'Personality'}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div>
                  <span className="techno" style={{ color: 'var(--fg-on-dark-3)' }}>{lang === 'ro' ? 'Vârstă' : 'Age'}</span>
                  <div style={{ fontSize: 24, fontFamily: 'var(--font-display)', textTransform: 'uppercase' }}>
                    {cat.age} {lang === 'ro' ? 'ani' : 'years'}
                  </div>
                </div>
                <div>
                  <span className="techno" style={{ color: 'var(--fg-on-dark-3)' }}>{lang === 'ro' ? 'Blană' : 'Coat'}</span>
                  <div style={{ fontSize: 18, marginTop: 4 }}>{tr({ ro: cat.color, en: cat.coat }, lang)}</div>
                </div>
                <div>
                  <span className="techno" style={{ color: 'var(--fg-on-dark-3)' }}>{lang === 'ro' ? 'Trăsături' : 'Traits'}</span>
                  <div style={{ display: 'flex', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
                    {cat.traits[lang].map((t, j) => <span key={j} className="chip">{t}</span>)}
                  </div>
                </div>
              </div>
            </Reveal>
            <Reveal as="div" delay={1}>
              <p style={{
                fontFamily: 'var(--font-serif)',
                fontStyle: 'italic', fontWeight: 300,
                fontSize: 'clamp(24px, 2.8vw, 36px)',
                lineHeight: 1.3,
                color: 'var(--fg-on-dark-1)',
                margin: 0
              }}>
                „{tr(cat.personality, lang)}"
              </p>
            </Reveal>
          </div>

          {/* Competitions */}
          {cat.competitions.length > 0 && (
            <div style={{ marginTop: 80 }}>
              <Reveal as="div" className="eyebrow" style={{ marginBottom: 24 }}>
                {lang === 'ro' ? 'Competiții' : 'Competitions'}
              </Reveal>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {cat.competitions.map((c, i) => (
                  <Reveal key={i} delay={i + 1} style={{
                    display: 'grid',
                    gridTemplateColumns: 'auto 1fr auto',
                    gap: 24,
                    padding: '20px 0',
                    borderTop: '1px solid var(--line-on-dark-1)',
                    alignItems: 'center',
                    borderBottom: i === cat.competitions.length - 1 ? '1px solid var(--line-on-dark-1)' : 'none'
                  }}>
                    <span className="techno" style={{ color: 'var(--gold-400)' }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{ fontSize: 18 }}>{c}</span>
                    <span style={{ color: 'var(--gold-400)', fontSize: 18 }}>★</span>
                  </Reveal>
                ))}
              </div>
            </div>
          )}
        </div>
        <style>{`@media (max-width: 880px) { .cat-body-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
      </section>

      {/* Prev / Next */}
      <section className="section-tight" style={{ background: 'var(--ink-900)', color: 'var(--fg-on-dark-1)', paddingTop: 0 }}>
        <div className="container">
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 0,
            borderTop: '1px solid var(--line-on-dark-1)',
            borderBottom: '1px solid var(--line-on-dark-1)'
          }} className="cat-prevnext">
            <Link to={'/cats/' + prev.id} style={{ padding: 32, borderRight: '1px solid var(--line-on-dark-1)', display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--font-techno)', fontSize: 11, letterSpacing: '0.22em', color: 'var(--gold-400)' }}>← {lang === 'ro' ? 'PREDECESOR' : 'PREVIOUS'}</span>
              <span style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 16 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 3vw, 28px)', textTransform: 'uppercase' }}>{prev.name}</span>
                <div style={{ width: 48, height: 48, overflow: 'hidden', flexShrink: 0 }}>
                  <img src={prev.image} alt={prev.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
              </span>
            </Link>
            <Link to={'/cats/' + next.id} style={{ padding: 32, display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <div style={{ width: 48, height: 48, overflow: 'hidden', flexShrink: 0 }}>
                  <img src={next.image} alt={next.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(20px, 3vw, 28px)', textTransform: 'uppercase' }}>{next.name}</span>
              </span>
              <span style={{ marginLeft: 'auto', fontFamily: 'var(--font-techno)', fontSize: 11, letterSpacing: '0.22em', color: 'var(--gold-400)' }}>{lang === 'ro' ? 'URMĂTOR' : 'NEXT'} →</span>
            </Link>
          </div>
          <style>{`
            @media (max-width: 640px) {
              .cat-prevnext { grid-template-columns: 1fr !important; }
              .cat-prevnext > a { border-right: none !important; border-bottom: 1px solid var(--line-on-dark-1); padding: 20px !important; }
              .cat-prevnext > a:last-child { border-bottom: none; }
            }
          `}</style>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CatsPage });