// home.jsx — Home page (marketing centerpiece)

const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function HomePage({ onNav }) {
  return (
    <div className="page">
      <HeroHome onNav={onNav} />
      <StatsHome />
      <TrophiesHome />
      <ServicesHome onNav={onNav} />
      <TeamHome onNav={onNav} />
      <HallHome onNav={onNav} />
      <TestimonialsHome />
      <WhyHome />
      <CTAHome onNav={onNav} />
    </div>);

}

// ─── HERO ──────────────────────────────────────────────────────
function HeroHome({ onNav }) {
  const [liveStats, setLiveStats] = useStateH({
    creators: Math.floor(Math.random() * 100) + 400,
    hours: Math.floor(Math.random() * 400) + 800
  });
  useEffectH(() => {
    const t = setInterval(() => {
      setLiveStats({
        creators: Math.floor(Math.random() * 100) + 400,
        hours: Math.floor(Math.random() * 400) + 800
      });
    }, 8000);
    return () => clearInterval(t);
  }, []);

  return (
    <section style={{ minHeight: '100vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 80 }}>
      <Mesh />
      <Particles count={60} />
      <div className="hm-easter" style={{ position: 'absolute', top: 170, left: 0, right: 0, zIndex: 3, display: 'flex', justifyContent: 'center', padding: '0 16px' }}>
        <Reveal>
          <div className="pill" style={{ padding: '10px 20px', background: 'linear-gradient(135deg, rgba(82,242,15,.10), rgba(255,215,0,.08))', borderColor: 'rgba(82,242,15,.25)' }}>
            <span style={{ fontSize: 16 }}>🎁</span>
            <span className="mono" style={{ fontSize: 14, letterSpacing: '0.04em', color: 'var(--txt-1)' }}>
              AM O SURPRIZĂ PENTRU TINE — APASĂ TASTELE <kbd style={{ background: 'rgba(82,242,15,.18)', border: '.5px solid rgba(82,242,15,.4)', borderRadius: 5, padding: '2px 8px', margin: '0 4px', fontFamily: 'inherit', color: 'var(--accent-1)', fontWeight: 700, fontSize: 14 }}>4</kbd> ȘI <kbd style={{ background: 'rgba(255,215,0,.18)', border: '.5px solid rgba(255,215,0,.4)', borderRadius: 5, padding: '2px 8px', margin: '0 4px', fontFamily: 'inherit', color: 'var(--accent-2)', fontWeight: 700, fontSize: 14 }}>U</kbd> ȘI O SĂ VEZI ✨
            </span>
          </div>
        </Reveal>
      </div>
      <div className="container" style={{ position: 'relative', zIndex: 2, paddingTop: 60, paddingBottom: 60 }}>
        <div className="hm-easter-mobile-top" style={{ display: 'none', marginBottom: 24, marginTop: -40 }}>
          <Reveal>
            <button
              onClick={() => {
                if (window.fireEasterEgg) {
                  window.fireEasterEgg();
                }
              }}
              style={{
                width: '100%',
                padding: '12px 16px',
                borderRadius: 999,
                background: 'linear-gradient(135deg, rgba(82,242,15,.12), rgba(255,215,0,.10))',
                border: '.5px solid rgba(82,242,15,.30)',
                color: 'var(--txt-1)',
                fontSize: 13,
                fontFamily: 'inherit',
                letterSpacing: '0.04em',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 8,
              }}
            >
              <span style={{ fontSize: 16 }}>🎁</span>
              <span className="mono">APASĂ AICI PENTRU SURPRIZĂ ✨</span>
            </button>
          </Reveal>
        </div>
        <Reveal delay={60}>
          <div className="pill" style={{ marginBottom: 24 }}>
            <span className="dot" />
            <span className="mono" style={{ fontSize: 14, letterSpacing: '0.05em' }}>AGENȚIA #1 DE TIKTOK LIVE DIN ROMÂNIA</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 8vw, 112px)', margin: 0, maxWidth: 1100 }}>
            TikTok Live <span style={{ position: 'relative', display: 'inline-block' }}>
              <span style={{
                background: 'linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text'
              }}>Agency</span>
              <svg style={{ position: 'absolute', left: 0, bottom: '-6px', width: '100%', height: 14 }} viewBox="0 0 300 14" preserveAspectRatio="none">
                <path d="M2,8 Q75,2 150,8 T298,8" stroke="var(--accent-1)" strokeWidth="3" fill="none" strokeLinecap="round" style={{ filter: 'drop-shadow(0 0 6px var(--accent-1))' }} />
              </svg>
            </span>.
          </h1>
        </Reveal>
        <Reveal delay={220}>
          <p style={{ fontSize: 'clamp(18px, 1.6vw, 22px)', color: 'var(--txt-2)', marginTop: 32, maxWidth: 620, lineHeight: 1.5 }}>
            Prezenți în <strong style={{ color: 'var(--txt-0)' }}>8 țări</strong>. Peste <strong style={{ color: 'var(--txt-0)' }}>5.000 de creatori</strong>.<br className="hero-mobile-br" /> O singură echipă care transformă livestream-ul în carieră.
          </p>
        </Reveal>
        <Reveal delay={320}>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <button className="btn btn-primary btn-lg" onClick={() => onNav('signup')} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', lineHeight: 1.2, minWidth: 240, minHeight: 64 }}>
              <span>Înscrie-te în 4U Agency</span>
            </button>
            <button className="btn btn-glass btn-lg" onClick={() => onNav('campaigns')} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', lineHeight: 1.2, minWidth: 240, minHeight: 64 }}>
              <span>Campanii cu branduri</span>
              <span style={{ fontSize: 11, fontWeight: 400, opacity: 0.7, marginTop: 4 }}>Brand sau Influencer, aplică aici</span>
            </button>
          </div>
        </Reveal>
        <Reveal delay={440}>
          <div style={{ display: 'flex', gap: 8, marginTop: 32, flexWrap: 'wrap' }}>
            {['🏆 Locul 1 — Live Fest 2024 & 2025', '🏆 Locul 1 — Community Fest 2024 & 2025'].map((t) =>
            <div key={t} className="pill" style={{ background: 'rgba(82,242,15,.06)', borderColor: 'rgba(82,242,15,.2)', color: 'var(--txt-1)' }}>
                <span style={{ fontSize: 14 }}>{t}</span>
              </div>
            )}
          </div>
        </Reveal>

        {/* Live ticker */}
        <Reveal delay={560}>
          <div className="card-glass" style={{ marginTop: 48, padding: '16px 24px', display: 'inline-flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: '#22c55e', boxShadow: '0 0 12px #22c55e', animation: 'pulse 1.4s infinite' }} />
              <span className="mono" style={{ fontSize: 12, color: 'var(--txt-3)' }}>LIVE NOW</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span className="display mono" style={{ fontSize: 22, color: 'var(--accent-1)' }}>{liveStats.creators}</span>
              <span style={{ fontSize: 13, color: 'var(--txt-2)' }}>creatori streaming</span>
            </div>
            <div style={{ width: 1, height: 24, background: 'var(--line)' }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span className="display mono" style={{ fontSize: 22, color: 'var(--accent-2)' }}>{liveStats.hours}</span>
              <span style={{ fontSize: 13, color: 'var(--txt-2)' }}>ore live agregate astăzi</span>
            </div>
          </div>
        </Reveal>

        {/* Floating creator card preview */}
        <FloatingPreview />
      </div>
      {/* Scroll cue */}
      <div style={{ position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, opacity: 0.5 }}>
        <span className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.1em' }}>SCROLL</span>
        <div style={{ width: 1, height: 32, background: 'linear-gradient(180deg, var(--txt-3), transparent)', animation: 'scrollCue 2s ease-in-out infinite' }} />
      </div>
      <style>{`@keyframes scrollCue { 0%, 100% { transform: scaleY(0.4); transform-origin: top; } 50% { transform: scaleY(1); }}`}</style>
      <style>{`@media (max-width: 800px) { .hm-easter { display: none !important; } .hm-easter-mobile-top { display: block !important; } } .hero-mobile-br { display: none; } @media (max-width: 600px) { .hero-mobile-br { display: initial; } }`}</style>
    </section>);

}

function FloatingPreview() {
  return (
    <div className="card-glass float-prev" style={{
      position: 'absolute', right: 32, top: '62%', transform: 'translateY(-50%)',
      width: 280, padding: 16, animation: 'floatY 6s ease-in-out infinite'
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        <div style={{ width: 36, height: 36, borderRadius: 999, background: 'linear-gradient(135deg, #FFD700, #52F20F)' }} />
        <div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>@4uagencylive</div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)' }}>NIVEL · DIAMOND</div>
        </div>
        <div style={{ marginLeft: 'auto' }}>
          <div className="pill" style={{ padding: '3px 7px', fontSize: 10, background: 'rgba(239,68,68,.12)', borderColor: 'rgba(239,68,68,.3)', color: '#EF4444' }}>
            <span style={{ width: 4, height: 4, borderRadius: 999, background: '#EF4444' }} />LIVE
          </div>
        </div>
      </div>
      <div className="shim" style={{ height: 120, borderRadius: 8, marginBottom: 12, background: 'linear-gradient(135deg, rgba(82,242,15,.18), rgba(255,215,0,.12))', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'rgba(255,255,255,.45)', fontSize: 11 }} className="mono">[ creator stream ]</div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--txt-2)' }}>
        <span>👀 12.4K</span>
        <span>💎 8,427</span>
        <span>⏱ 2h 14m</span>
      </div>
      <style>{`
        @keyframes floatY { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 12px)); }}
        @media (max-width: 1100px) { .float-prev { display: none !important; } }
      `}</style>
    </div>);

}

// ─── STATS ─────────────────────────────────────────────────────
function StatsHome() {
  const stats = [
  { v: 5000, suf: '+', label: 'CREATORI', sub: 'în portofoliul 4U Agency' },
  { v: 8, suf: '', label: 'ȚĂRI', sub: 'RO · UK · DE · AT · CH · IT · ES · MENA' },
  { v: 3, suf: '+', label: 'ANI', sub: 'de creștere continuă' },
  { v: 6, suf: '', label: 'TROFEE', sub: 'naționale câștigate' }];

  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '.5px solid var(--line)', borderRadius: 24, overflow: 'hidden', background: 'var(--bg-2)' }} className="stat-grid">
          {stats.map((s, i) =>
          <Reveal key={i} delay={i * 100} className="stat-cell">
              <div style={{ padding: '48px 32px', borderRight: i < stats.length - 1 ? '.5px solid var(--line)' : 'none', position: 'relative', height: '100%' }}>
                <div className="display" style={{ fontSize: 'clamp(48px, 6vw, 88px)', lineHeight: 1, color: 'var(--accent-1)', textShadow: '0 0 40px rgba(82,242,15,.25)' }}>
                  <Counter to={s.v} suffix={s.suf} />
                </div>
                <div style={{ marginTop: 12, fontSize: 14, fontWeight: 500 }}>{s.label}</div>
                <div style={{ marginTop: 4, fontSize: 12, color: 'var(--txt-3)' }}>{s.sub}</div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .stat-grid { grid-template-columns: 1fr 1fr !important; } .stat-cell:nth-child(2) > div { border-right: none !important; } .stat-cell:nth-child(1) > div, .stat-cell:nth-child(2) > div { border-bottom: .5px solid var(--line); } }
        @media (max-width: 500px) { .stat-grid { grid-template-columns: 1fr !important; } .stat-cell > div { border-right: none !important; border-bottom: .5px solid var(--line); } }
      `}</style>
    </section>);

}

// ─── TROPHIES ──────────────────────────────────────────────────
function TrophiesHome() {
  const trophies = [
  { year: 2024, place: 'Locul 1', event: 'Community Fest', image: '/images/trophies/trofeu-1-2024-community-fest.png' },
  { year: 2024, place: 'Locul 1', event: 'Live Fest', image: '/images/trophies/trofeu-2-2024-live-fest.png' },
  { year: 2025, place: 'Locul 1', event: 'Community Fest', image: '/images/trophies/trofeu-4-2025-community-fest.png' },
  { year: 2025, place: 'Locul 1', event: 'Live Fest', image: '/images/trophies/trofeu-5-2025-live-fest.png' },
  { year: 2025, place: 'Agenția #1', event: 'din România', image: '/images/trophies/trofeu-3-2024-agentia-1-romania.png' },
  { year: 2026, place: '100M+ Diamante', event: 'Prima agenție RO · A 4-a în Europa', image: '/images/trophies/trofeu-6-2025-100m-diamante.png' }];

  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <SectionHead label="TROFEELE 4U AGENCY" title="Hall of Victories." titleAccent="" />
        <Reveal delay={100}>
          <p style={{ fontSize: 16, color: 'var(--txt-2)', marginTop: 20, maxWidth: 720, lineHeight: 1.6 }}>
            6 trofee naționale în 2 ani. Două ediții consecutive Community Fest și Live Fest. Recunoaștere bazată pe rezultate, nu pe vorbe.
          </p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginTop: 48 }} className="trophy-grid">
          {trophies.map((t, i) =>
          <Reveal key={i} delay={i * 100} className="trophy-reveal">
              <div className="card trophy-card" style={{ '--trophy-delay': `${i * 0.5}s` }}>
                <div className="trophy-text">
                  <div className="mono trophy-year">{t.year}</div>
                  <div className="display trophy-place">{t.place}</div>
                  <div className="trophy-event">{t.event}</div>
                </div>
                <div className="trophy-img-wrap">
                  <div className="trophy-glow" />
                  <img src={t.image} alt={`${t.place} ${t.event} ${t.year}`} className="trophy-img" loading="lazy" />
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
      <style>{`
        .trophy-card {
          padding: 20px 24px;
          position: relative;
          min-height: 200px;
          overflow: hidden;
          display: flex;
          align-items: center;
          gap: 18px;
          transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s cubic-bezier(.2,.7,.2,1), border-color .55s ease;
        }
        .trophy-card:hover .trophy-img { transform: scale(1.05); }
        .trophy-card:hover .trophy-glow { opacity: .8 !important; transform: scale(1.2); }

        .trophy-text {
          flex: 0 0 42%;
          min-width: 0;
          position: relative;
          z-index: 2;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        .trophy-img-wrap {
          flex: 1 1 auto;
          position: relative;
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          animation: trophyFloatY 6s ease-in-out infinite;
          animation-delay: var(--trophy-delay, 0s);
        }
        .trophy-img {
          position: relative;
          z-index: 2;
          height: 160px;
          width: auto;
          max-width: 100%;
          object-fit: contain;
          display: block;
          transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease;
          filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
        }
        .trophy-glow {
          position: absolute;
          inset: -15% -10%;
          z-index: 1;
          pointer-events: none;
          background: radial-gradient(circle at center, rgba(82,242,15,.55), rgba(82,242,15,.15) 38%, transparent 65%);
          filter: blur(22px);
          opacity: .45;
          animation: trophyPulse 4.5s ease-in-out infinite;
          animation-delay: var(--trophy-delay, 0s);
          transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
          will-change: opacity, transform;
        }

        .trophy-year {
          font-size: 12px;
          color: var(--txt-3);
          letter-spacing: .04em;
          margin-bottom: 8px;
        }
        .trophy-place {
          font-size: 26px;
          margin-bottom: 6px;
          color: var(--txt-0);
          line-height: 1.15;
        }
        .trophy-event {
          font-size: 13px;
          color: var(--txt-2);
          line-height: 1.5;
        }

        .trophy-reveal.rv {
          opacity: 0;
          transform: translateY(24px) scale(.9);
          transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
        }
        .trophy-reveal.rv.in { opacity: 1; transform: none; }

        @keyframes trophyFloatY {
          0%, 100% { transform: translateY(-10px); }
          50%      { transform: translateY(10px); }
        }
        @keyframes trophyPulse {
          0%, 100% { opacity: .3; }
          50%      { opacity: .6; }
        }

        @media (max-width: 900px) {
          .trophy-card { padding: 18px 20px; gap: 14px; min-height: 180px; }
          .trophy-img { height: 140px; }
          .trophy-place { font-size: 22px; }
        }
        @media (max-width: 600px) {
          .trophy-grid { grid-template-columns: 1fr !important; }
          .trophy-card { min-height: 170px; padding: 16px 18px; gap: 12px; }
          .trophy-text { flex: 0 0 45%; }
          .trophy-img { height: 130px; }
          .trophy-place { font-size: 20px; }
          .trophy-event { font-size: 12px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .trophy-img-wrap, .trophy-glow { animation: none !important; }
          .trophy-card, .trophy-img, .trophy-glow { transition: none !important; }
        }
      `}</style>
    </section>);

}

// ─── SERVICES ──────────────────────────────────────────────────
function ServicesHome({ onNav }) {
  const items = [
  { id: 'courses', emoji: '🎓', title: 'Academia TikTok', desc: 'Învață de la creatori care au făcut milioane de diamante.', meta: '13 module' },
  { id: 'profile-design', emoji: '🎨', title: 'Personalizare profil', desc: 'Designul care te face să ieși din feed.', meta: '' },
  { id: 'studios', emoji: '🎬', title: 'Studiouri 4U', desc: '3 studiouri proprii, dotate complet, exclusiv pentru creatorii 4U.', meta: 'București · Cluj' },
  { id: 'campaigns', emoji: '📢', title: 'Campanii cu influenceri', desc: 'Oferim campanii cu branduri.', meta: '120+ campanii' }];

  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <SectionHead label="SERVICII" title="Tot ce ai nevoie" titleAccent="pentru a crește pe TikTok." />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 56 }} className="serv-grid">
          {items.map((s, i) =>
          <Reveal key={s.id} delay={i * 80}>
              <a onClick={() => onNav(s.id)} className="card hov" style={{ padding: 28, display: 'block', cursor: 'pointer', height: '100%', minHeight: 280 }}>
                <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: 'rgba(82,242,15,.08)', border: '.5px solid rgba(82,242,15,.2)',
                display: 'grid', placeItems: 'center', fontSize: 22, marginBottom: 24
              }}>{s.emoji}</div>
                <div className="display" style={{ fontSize: 22, marginBottom: 10 }}>{s.title}</div>
                <p style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.6, marginBottom: 24 }}>{s.desc}</p>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '.5px solid var(--line)', paddingTop: 16 }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>{s.meta}</span>
                  <span style={{ color: 'var(--accent-1)', fontSize: 13 }}>→</span>
                </div>
              </a>
            </Reveal>
          )}
        </div>
      </div>
      <style>{`@media (max-width: 1000px) { .serv-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { .serv-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>);

}

// ─── TEAM (drag carousel) ───────────────────────────────────────
function TeamHome({ onNav }) {
  const team = [
  { name: 'Vlad',          role: 'CEO & Fondator',   img: 'uploads/vlad.png' },
  { name: 'Addalicious',   role: 'Sub-agency Owner', img: 'uploads/adda.png' },
  { name: 'Florin',        role: 'Sub-agency Owner', img: 'uploads/florin.png' },
  { name: 'Andreea Foxxy', role: 'Sub-agency Owner', img: 'uploads/andreea.png' },
  { name: 'Vali',          role: 'Sub-agency Owner', img: 'uploads/vali.png' },
  { name: 'Andreea T',     role: 'Sub-agency Owner', img: 'uploads/andreeatudose.png' }];

  const ref = useRefH(null);
  const [drag, setDrag] = useStateH(false);
  const startRef = useRefH({ x: 0, sl: 0 });
  const onDown = (e) => {setDrag(true);startRef.current = { x: e.pageX, sl: ref.current.scrollLeft };};
  const onMove = (e) => {if (!drag) return;ref.current.scrollLeft = startRef.current.sl - (e.pageX - startRef.current.x);};
  const onUp = () => setDrag(false);

  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container" style={{ marginBottom: 32 }}>
        <SectionHead label="MANAGEMENT" title="Conducem cu viziune." titleAccent="Creștem cu pasiune." />
      </div>

      {/* DESKTOP — grid 3x2 */}
      <div className="container team-grid-desktop">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'clamp(40px, 8vw, 120px)', padding: '0 5%' }}>
          {team.map((m, i) =>
          <div key={i} className="card hov" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ aspectRatio: '4/3', position: 'relative', overflow: 'hidden' }}>
                <img src={m.img} alt={m.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', display: 'block' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75))' }} />
              </div>
              <div style={{ padding: 20 }}>
                <div className="display" style={{ fontSize: 20 }}>{m.name}</div>
                <div style={{ fontSize: 13, color: 'var(--txt-2)', marginTop: 6 }}>{m.role}</div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* MOBILE — drag carousel (păstrăm vechiul comportament) */}
      <div className="team-carousel-mobile" ref={ref}
      style={{ overflowX: 'auto', overflowY: 'hidden', scrollbarWidth: 'none', cursor: drag ? 'grabbing' : 'grab', paddingLeft: 16 }}
      onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp} onMouseLeave={onUp}>
        <div style={{ display: 'flex', gap: 16, paddingRight: 16, paddingBottom: 8 }}>
          {team.map((m, i) =>
          <div key={i} className="card hov" style={{ width: 260, flexShrink: 0, padding: 0, overflow: 'hidden' }}>
              <div style={{ height: 260, position: 'relative', overflow: 'hidden' }}>
                <img src={m.img} alt={m.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', display: 'block' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7))' }} />
              </div>
              <div style={{ padding: 20 }}>
                <div className="display" style={{ fontSize: 20 }}>{m.name}</div>
                <div style={{ fontSize: 13, color: 'var(--txt-2)', marginTop: 4 }}>{m.role}</div>
              </div>
            </div>
          )}
        </div>
      </div>

      <div className="container" style={{ marginTop: 32 }}>
        <a className="ulink" onClick={() => onNav('team')} style={{ fontSize: 14, fontWeight: 500, cursor: 'pointer' }}>Vezi toată echipa →</a>
      </div>

      <style>{`
        .team-grid-desktop { display: block; }
        .team-carousel-mobile { display: none; }
        @media (max-width: 800px) {
          .team-grid-desktop { display: none; }
          .team-carousel-mobile { display: block; }
        }
      `}</style>
    </section>);

}

// ─── HALL OF FAME ──────────────────────────────────────────────
function HallHome({ onNav }) {
  const _now = new Date();
  const _months = ['IANUARIE','FEBRUARIE','MARTIE','APRILIE','MAI','IUNIE','IULIE','AUGUST','SEPTEMBRIE','OCTOMBRIE','NOIEMBRIE','DECEMBRIE'];
  const _prev = new Date(_now.getFullYear(), _now.getMonth() - 1, 1);
  const monthLabel = `${_months[_prev.getMonth()]} ${_prev.getFullYear()}`;
  const top3 = (window.CREATORS_HALL || []).slice(0, 3);

  return (
    <section style={{ padding: '120px 0', background: 'linear-gradient(180deg, transparent, rgba(82,242,15,.02), transparent)' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16 }}>
          <SectionHead label="HALL OF FAME" title="Top creatori 4U" titleAccent="" />
          <div className="pill"><span className="mono">{monthLabel}</span></div>
        </div>
        <div className="podium-grid-home" style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr 1fr', gap: 20, alignItems: 'end', marginTop: 56 }}>
          {top3[1] && <PodiumCardHome p={top3[1]} place={2} />}
          {top3[0] && <PodiumCardHome p={top3[0]} place={1} />}
          {top3[2] && <PodiumCardHome p={top3[2]} place={3} />}
        </div>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <button className="btn btn-glass" onClick={() => onNav('hall')}>Vezi clasamentul complet →</button>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .podium-grid-home { grid-template-columns: 1fr !important; }
          .podium-grid-home > *:nth-child(1) { order: 2; }
          .podium-grid-home > *:nth-child(2) { order: 1; }
          .podium-grid-home > *:nth-child(3) { order: 3; }
        }
      `}</style>
    </section>);

}

function PodiumCardHome({ 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>
  );
}

// ─── TESTIMONIALS ──────────────────────────────────────────────
function TestimonialsHome() {
  const items = [
  { quote: 'Am început de la 200 de followers. Într-un an, am ajuns la 480K și sunt în top 10 al agenției. 4U mi-a schimbat viața.', name: 'Andra M.', role: '@andra.live', tier: 'DIAMOND' },
  { quote: 'Modulele au fost game-changer. Am dublat diamantele lunare în 6 săptămâni urmărind strategiile lor de retenție.', name: 'Cosmin O.', role: '@cosminovskii', tier: 'PLATINUM' },
  { quote: 'Suport real, nu vorbe. Suni la 2 dimineața când ai o problemă tehnică în live, și răspunde cineva. E rar așa ceva.', name: 'Raluca P.', role: '@_ralucaa', tier: 'PLATINUM' }];

  const [i, setI] = useStateH(0);
  useEffectH(() => {const t = setInterval(() => setI((x) => (x + 1) % items.length), 5500);return () => clearInterval(t);}, []);

  return (
    <section style={{ padding: '120px 0' }}>
      <div className="container">
        <SectionHead label="TESTIMONIALE" title="Vocea celor care" titleAccent="construiesc cu noi." />
        <div className="card-glass" style={{ marginTop: 56, padding: 'clamp(32px, 5vw, 64px)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -40, left: -20, fontSize: 280, lineHeight: 1, color: 'rgba(82,242,15,.06)', fontFamily: 'serif' }}>&ldquo;</div>
          <div style={{ position: 'relative', zIndex: 2, minHeight: 180 }}>
            <p className="display" style={{ fontSize: 'clamp(22px, 2.4vw, 32px)', lineHeight: 1.4, fontWeight: 500, letterSpacing: '-0.02em', textWrap: 'pretty' }}>
              "{items[i].quote}"
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 32 }}>
              <div style={{ width: 44, height: 44, borderRadius: 999, background: `linear-gradient(135deg, var(--accent-2), var(--accent-1))` }} />
              <div>
                <div style={{ fontWeight: 500 }}>{items[i].name}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>{items[i].role} · ● {items[i].tier}</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 32, position: 'relative', zIndex: 2 }}>
            {items.map((_, k) =>
            <button key={k} onClick={() => setI(k)} style={{
              width: k === i ? 28 : 8, height: 8, borderRadius: 4, padding: 0,
              background: k === i ? 'var(--accent-1)' : 'var(--line)', border: 0, cursor: 'pointer',
              transition: 'all .25s'
            }} />
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ─── WHY US ────────────────────────────────────────────────────
function WhyHome() {
  const items = [
  { ico: '🏢', title: '3 studiouri proprii', desc: 'Singura agenție din România cu studiouri profesionale de live streaming — 2 în București și 1 în Cluj-Napoca. Pentru creatorii 4U, cu un procent din încasări — discutat individual.' },
  { ico: '🎁', title: 'Cadouri lunare, de 3 ani', desc: 'Singura agenție care recompensează creatorii lună de lună, constant, de la fondare. Nu doar vorbe — fapte concrete în fiecare lună.' },
  { ico: '🏆', title: '6 trofee naționale', desc: 'Locul 1 la Community Fest și Live Fest, doi ani consecutivi. Plus titlul oficial de Agenția #1 din România.' },
  { ico: '💎', title: '100M+ diamante', desc: 'Prima agenție din România care depășește pragul de 100 milioane diamante. A 4-a din Europa. Un record care vorbește.' },
  { ico: '🌍', title: '8 țări, 1 echipă', desc: 'Suport în limba ta, fie că ești în România, UK, Germania, Italia, Spania sau MENA. Nicio distanță prea mare.' },
  { ico: '👨‍💼', title: 'Fondată de un fost creator', desc: 'Înțelegem creatorii pentru că am fost creatori. Nu e doar business — e pasiune transformată în profesie.' }];

  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <SectionHead label="DE CE 4U" title="Șase motive" titleAccent="pentru care suntem #1." />
        <Reveal delay={100}>
          <p style={{ fontSize: 16, color: 'var(--txt-2)', marginTop: 20, maxWidth: 680, lineHeight: 1.6 }}>
            Nu suntem doar încă o agenție. Iată de ce creatorii aleg 4U.
          </p>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, marginTop: 56, background: 'var(--line)', border: '.5px solid var(--line)', borderRadius: 24, overflow: 'hidden' }} className="why-grid">
          {items.map((it, i) =>
          <Reveal key={i} delay={i * 60}>
              <div style={{ background: 'var(--bg-1)', padding: 36, height: '100%', minHeight: 220 }}>
                <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: 'rgba(82,242,15,.08)', border: '.5px solid rgba(82,242,15,.18)',
                display: 'grid', placeItems: 'center', fontSize: 20, marginBottom: 20
              }}>{it.ico}</div>
                <div className="display" style={{ fontSize: 20, marginBottom: 10 }}>{it.title}</div>
                <p style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.6, margin: 0 }}>{it.desc}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr !important; }} @media (max-width: 600px) { .why-grid { grid-template-columns: 1fr !important; }}`}</style>
    </section>);

}

// ─── CTA ───────────────────────────────────────────────────────
function CTAHome({ onNav }) {
  return (
    <section style={{ padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}>
        <div className="mesh" />
      </div>
      <Particles count={40} />
      <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <Reveal>
          <div className="pill" style={{ marginBottom: 24 }}><span className="dot" /><span className="mono" style={{ fontSize: 11 }}>ÎNSCRIERE DESCHISĂ</span></div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', maxWidth: 900, margin: '0 auto', lineHeight: 1 }}>
            Ești gata să te dezvolți <br />pe <span style={{ background: 'var(--grad)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>TikTok?</span>
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ fontSize: 18, color: 'var(--txt-2)', marginTop: 24, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
            Înscrie-te în 2 minute. Echipa noastră te contactează în 24h cu un plan personalizat.
          </p>
        </Reveal>
        <Reveal delay={300}>
          <button className="btn btn-primary btn-lg" onClick={() => onNav('signup')} style={{ marginTop: 32 }}>Înscrie-te în 4U Agency →</button>
        </Reveal>
      </div>
    </section>);

}

// ─── Section header ────────────────────────────────────────────
function SectionHead({ label, title, titleAccent }) {
  return (
    <Reveal>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
          <span style={{ width: 24, height: 1, background: 'var(--accent-1)' }} />
          <span className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em' }}>{label}</span>
        </div>
        <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', margin: 0, lineHeight: 1, maxWidth: 900 }}>
          {title} <span style={{ color: 'var(--txt-3)' }}>{titleAccent}</span>
        </h2>
      </div>
    </Reveal>);

}

window.HomePage = HomePage;