// hall.jsx — Hall of Fame
// Datele creatorilor sunt în creators-data.jsx (window.CREATORS_HALL)

function HallPage({ onNav }) {
  return (
    <div className="page">
      <HallHero onNav={onNav} />
      <HallPodium />
      <HallList />
      <HallCTA onNav={onNav} />
    </div>
  );
}

function HallHero({ onNav }) {
  return (
    <section style={{ minHeight: '50vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 40 }}>
      <Mesh /><Particles count={40} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal><div className="pill" style={{ marginBottom: 24, borderColor: 'rgba(255,215,0,.4)', background: 'rgba(255,215,0,.08)' }}><span className="dot" style={{ background: '#FFD700' }} /><span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em', color: '#FFD700' }}>HALL OF FAME</span></div></Reveal>
        <Reveal delay={120}><h1 className="display" style={{ fontSize: 'clamp(44px, 7vw, 96px)', margin: 0, maxWidth: 1100, letterSpacing: '-0.04em' }}>Cei care fac istorie pe <span style={{ background: 'linear-gradient(135deg, #FFD700, #52F20F)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>TikTok</span>.</h1></Reveal>
        <Reveal delay={220}><p style={{ fontSize: 'clamp(17px, 1.3vw, 21px)', color: 'var(--txt-2)', marginTop: 24, maxWidth: 720, lineHeight: 1.55 }}>Top creatori 4U Agency. Actualizat lunar. Pentru cei care nu se opresc niciodată.</p></Reveal>
        <Reveal delay={260}>
          <div style={{ marginTop: 28 }}><BackButton onNav={onNav} /></div>
        </Reveal>
        <Reveal delay={300}>
          <div className="mono" style={{ marginTop: 28, fontSize: 11, color: 'var(--txt-3)', letterSpacing: '0.15em' }}>● ACTUALIZAT LUNAR</div>
        </Reveal>
      </div>
    </section>
  );
}

function PodiumCard({ p, place }) {
  const cfg = place === 1
    ? { border: 'rgba(255,215,0,.45)', glow: '0 0 60px rgba(255,215,0,.25)', badge: '👑 #1', bg: 'linear-gradient(180deg, rgba(255,215,0,.12), transparent)' }
    : place === 2
    ? { border: 'rgba(229,229,229,.4)', glow: '0 0 40px rgba(229,229,229,.15)', badge: '🥈 #2', bg: 'linear-gradient(180deg, rgba(229,229,229,.10), transparent)' }
    : { border: 'rgba(205,127,50,.4)', glow: '0 0 40px rgba(205,127,50,.18)', badge: '🥉 #3', bg: 'linear-gradient(180deg, rgba(205,127,50,.10), transparent)' };
  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden', border: `1px solid ${cfg.border}`, boxShadow: cfg.glow, display: 'flex', flexDirection: 'column' }}>
      <div style={{ aspectRatio: '4/3', background: p.photo ? '#000' : `linear-gradient(135deg, hsl(${p.hue}, 80%, 25%), hsl(${p.hue}, 60%, 8%))`, position: 'relative', overflow: 'hidden' }}>
        {p.photo && <img src={p.photo} alt={p.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />}
        <div className="pill" style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(0,0,0,.55)', backdropFilter: 'blur(12px)', borderColor: cfg.border, fontSize: 12, fontWeight: 700 }}>{cfg.badge}</div>
        <div className="pill" style={{ position: 'absolute', top: 12, right: 12, background: 'var(--accent-1)', borderColor: 'var(--accent-1)', color: '#0E0E0E', fontSize: 10, fontWeight: 800, letterSpacing: '0.14em' }}>★ 4U ELITE</div>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 30% 70%, transparent 30%, rgba(0,0,0,.6))', pointerEvents: 'none' }} />
      </div>
      <div style={{ padding: 20, background: cfg.bg }}>
        <div className="display" style={{ fontSize: 20, marginBottom: 2 }}>{p.name}</div>
      </div>
    </div>
  );
}

function HallPodium() {
  const top3 = (window.CREATORS_HALL || []).slice(0, 3);
  if (top3.length < 3) return null;
  return (
    <section style={{ padding: '60px 0 100px' }}>
      <div className="container">
        <div className="podium-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr 1fr', gap: 20, alignItems: 'end' }}>
          <Reveal delay={150}><PodiumCard p={top3[1]} place={2} /></Reveal>
          <Reveal delay={0}><PodiumCard p={top3[0]} place={1} /></Reveal>
          <Reveal delay={300}><PodiumCard p={top3[2]} place={3} /></Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 800px) { .podium-grid { grid-template-columns: 1fr !important; } .podium-grid > *:nth-child(1) { order: 2; } .podium-grid > *:nth-child(2) { order: 1; } .podium-grid > *:nth-child(3) { order: 3; } }`}</style>
    </section>
  );
}

function HallList() {
  const items = (window.CREATORS_HALL || []).slice(3, 10);
  return (
    <section style={{ padding: '40px 0 100px', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal><h2 className="display" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', margin: '0 0 32px' }}>Top 4–10 — Lista completă</h2></Reveal>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {items.map((p, i) => (
            <Reveal key={p.rank} delay={i * 30}>
              <div className="card hall-row" style={{ display: 'grid', gridTemplateColumns: '60px 44px 1fr auto', alignItems: 'center', gap: 16, padding: '14px 18px' }}>
                <div className="display mono" style={{ fontSize: 22, color: 'var(--txt-3)', letterSpacing: '-0.04em' }}>#{String(p.rank).padStart(2, '0')}</div>
                {p.photo
                  ? <img src={p.photo} alt={p.name} style={{ width: 36, height: 36, borderRadius: 999, objectFit: 'cover' }} />
                  : <div style={{ width: 36, height: 36, borderRadius: 999, background: `linear-gradient(135deg, hsl(${p.hue}, 70%, 35%), hsl(${p.hue}, 50%, 15%))` }} />}
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span style={{ fontSize: 14, fontWeight: 600 }}>{p.name}</span>
                    <span className="mono" style={{ fontSize: 9, padding: '3px 8px', borderRadius: 999, color: '#0E0E0E', background: 'var(--accent-1)', border: '.5px solid var(--accent-1)', fontWeight: 800, letterSpacing: '0.14em' }}>★ 4U ELITE</span>
                  </div>
                </div>
                <span className="mono hall-top10" style={{ fontSize: 10, padding: '6px 12px', borderRadius: 999, color: 'var(--txt-2)', background: 'rgba(255,255,255,.04)', border: '.5px solid rgba(255,255,255,.10)', fontWeight: 700, letterSpacing: '0.14em', whiteSpace: 'nowrap' }}>⭐ TOP 10 ⭐</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 700px) {
          .hall-row { grid-template-columns: 50px 36px 1fr !important; }
          .hall-row .hall-top10 { display: none !important; }
        }
      `}</style>
    </section>
  );
}

function HallCTA({ onNav }) {
  return (
    <section style={{ padding: '80px 0 120px' }}>
      <div className="container">
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center', background: 'linear-gradient(135deg, rgba(255,215,0,.10), rgba(82,242,15,.06))', border: '.5px solid rgba(255,215,0,.25)' }}>
            <div className="mono" style={{ fontSize: 11, color: '#FFD700', letterSpacing: '0.15em', marginBottom: 16 }}>● ESTE RÂNDUL TĂU</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 5vw, 60px)', margin: '0 0 20px' }}>Următorul în Hall of Fame poți fi tu.</h2>
            <p style={{ color: 'var(--txt-2)', fontSize: 17, maxWidth: 540, margin: '0 auto 32px', lineHeight: 1.6 }}>Pleacă astăzi de la zero. Avem modulele, coachii și tools-urile.</p>
            <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => onNav('signup')}>Înscrie-te în 4U →</button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.HallPage = HallPage;