// about.jsx — Despre 4U Agency

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

function AboutPage({ onNav }) {
  return (
    <div className="page">
      <AboutHero onNav={onNav} />
      <AboutStory />
      <AboutMission />
      <AboutPresence />
      <AboutValues />
      <AboutTimeline />
      <AboutCTA onNav={onNav} />
    </div>
  );
}

// ─── HERO ──────────────────────────────────────────────────────
function AboutHero({ onNav }) {
  return (
    <section style={{ minHeight: '60vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 60 }}>
      <Mesh />
      <Particles count={30} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="pill" style={{ marginBottom: 24 }}>
            <span className="dot" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>DESPRE NOI</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', margin: 0, maxWidth: 1100 }}>
            Suntem <span style={{ background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>4U Agency</span>.
          </h1>
        </Reveal>
        <Reveal delay={220}>
          <p style={{ fontSize: 'clamp(18px, 1.4vw, 22px)', color: 'var(--txt-2)', marginTop: 28, maxWidth: 760, lineHeight: 1.55 }}>
            Singura agenție românească care a depășit pragul de <strong style={{ color: 'var(--txt-0)' }}>100M diamante</strong> și a 4-a din Europa. Fondată în <strong style={{ color: 'var(--txt-0)' }}>2023</strong>, prezentă acum în <strong style={{ color: 'var(--txt-0)' }}>8 țări</strong>, cu peste <strong style={{ color: 'var(--txt-0)' }}>5.000 de creatori</strong> în portofoliu.
          </p>
        </Reveal>
        <Reveal delay={300}>
          <div style={{ marginTop: 32 }}><BackButton onNav={onNav} /></div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── STORY ─────────────────────────────────────────────────────
function AboutStory() {
  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }} className="story-grid">
          <Reveal>
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● POVESTEA NOASTRĂ</div>
              <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: '0 0 32px', maxWidth: 600 }}>Cum a început totul.</h2>
              <p style={{ color: 'var(--txt-2)', fontSize: 16, lineHeight: 1.7, marginBottom: 20 }}>
                Înainte să fondez 4U Agency, eram <strong style={{ color: 'var(--txt-0)' }}>live streamer pe TikTok</strong>. Pasionat, dedicat, dar mai ales — atent la ce se întâmpla în jurul meu pe platformă. Lucram cu o manageră de cont TikTok care îmi observa rezultatele și implicarea zi de zi.
              </p>
              <p style={{ color: 'var(--txt-2)', fontSize: 16, lineHeight: 1.7, marginBottom: 20 }}>
                În <strong style={{ color: 'var(--txt-0)' }}>2023</strong>, când TikTok a început să deschidă oficial agenții partenere în România, ea a fost cea care m-a propus celor de la TikTok pentru a deschide o agenție. M-a recomandat nu pentru că aveam experiență în business — ci pentru că <strong style={{ color: 'var(--txt-0)' }}>înțelegeam, din interior, ce înseamnă viața de creator pe TikTok Live</strong>.
              </p>
              <p style={{ color: 'var(--txt-2)', fontSize: 16, lineHeight: 1.7 }}>
                Așa s-a născut 4U Agency. <strong style={{ color: 'var(--txt-0)' }}>O agenție făcută de un fost creator, pentru creatori.</strong> Cu respect față de munca lor, devotament pentru creșterea lor și seriozitate în tot ce promitem. Astăzi suntem prezenți în 8 țări și ne mândrim că am rămas aproape de creatorii care au crescut alături de noi.
              </p>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div style={{ position: 'relative', aspectRatio: '1', maxWidth: 480 }}>
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 50%, rgba(82,242,15,.25), transparent 65%)', filter: 'blur(40px)' }} />
              <div className="card-glass" style={{ position: 'relative', height: '100%', display: 'grid', placeItems: 'center', overflow: 'hidden', background: 'linear-gradient(135deg, rgba(82,242,15,.16), rgba(255,215,0,.10))', border: '.5px solid rgba(82,242,15,.25)' }}>
                <div style={{ fontSize: 200, lineHeight: 1, filter: 'drop-shadow(0 0 40px rgba(82,242,15,.5))', animation: 'floatY 6s ease-in-out infinite' }}>💚</div>
                <div className="mono" style={{ position: 'absolute', top: 24, left: 24, fontSize: 10, color: 'var(--accent-1)', letterSpacing: '0.15em' }}>EST. 2023</div>
                <div className="mono" style={{ position: 'absolute', bottom: 24, right: 24, fontSize: 10, color: 'var(--accent-2)', letterSpacing: '0.15em' }}>BY CREATORS, FOR CREATORS</div>
                {/* corner asterisks */}
                {[[16,16],[16,'auto',16],['auto',16,16,'auto'],[null,null,16,16]].map((p, i) => (
                  <span key={i} className="mono" style={{ position: 'absolute', top: p[0], right: p[1], bottom: p[2], left: p[3], color: 'rgba(82,242,15,.3)', fontSize: 14 }}>✦</span>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`
        @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
        @media (max-width: 900px) { .story-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }
      `}</style>
    </section>
  );
}

// ─── MISSION ───────────────────────────────────────────────────
function AboutMission() {
  const pillars = [
    { ico: '🎯', title: 'Creștere reală', desc: 'Nu promitem viral peste noapte. Construim cariere sustenabile, pas cu pas, alături de creatori care vor să muncească pentru ele.' },
    { ico: '🤝', title: 'Suport autentic', desc: 'Echipa noastră a fost în papucii creatorilor. Înțelegem ce simți la primul live, la primul match, la primul milion de diamante.' },
    { ico: '🏆', title: 'Performanță dovedită', desc: '100M+ diamante, 6 trofee naționale și a 4-a poziție în Europa. Rezultate, nu doar vorbe.' },
  ];
  return (
    <section style={{ padding: '120px 0', position: 'relative', borderTop: '.5px solid var(--line-soft)', borderBottom: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 80px' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● MISIUNEA NOASTRĂ</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0 }}>Misiunea noastră.</h2>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }} className="pillar-grid">
          {pillars.map((p, i) => (
            <Reveal key={p.title} delay={i * 100}>
              <div className="card" style={{ padding: 32, height: '100%' }}>
                <div style={{ width: 64, height: 64, borderRadius: 16, background: 'linear-gradient(135deg, rgba(82,242,15,.18), rgba(255,215,0,.08))', display: 'grid', placeItems: 'center', fontSize: 32, marginBottom: 20, border: '.5px solid rgba(82,242,15,.2)' }}>{p.ico}</div>
                <h3 className="display" style={{ fontSize: 22, margin: '0 0 12px' }}>{p.title}</h3>
                <p style={{ color: 'var(--txt-2)', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{p.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

// ─── PRESENCE ──────────────────────────────────────────────────
function AboutPresence() {
  const countries = [
    { flag: '🇷🇴', name: 'România', badge: 'BAZA' },
    { flag: '🇩🇪', name: 'Germania' },
    { flag: '🇦🇹', name: 'Austria' },
    { flag: '🇨🇭', name: 'Elveția' },
    { flag: '🇬🇧', name: 'UK' },
    { flag: '🇮🇹', name: 'Italia' },
    { flag: '🇪🇸', name: 'Spania' },
    { flag: '🌍', name: 'MENA', sub: 'Middle East & North Africa' },
  ];
  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 32 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● PREZENȚA NOASTRĂ</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: '0 0 20px' }}>Prezenți în <span style={{ color: 'var(--accent-1)' }}>8 țări</span>.</h2>
            <p style={{ color: 'var(--txt-2)', fontSize: 16, lineHeight: 1.6, maxWidth: 680, margin: 0 }}>
              Am pornit din România. Apoi, pe rând, ne-am extins în Europa și MENA — pe măsură ce creatorii noștri au cerut-o.
            </p>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 32 }} className="country-grid">
          {countries.map((c, i) => (
            <Reveal key={c.name} delay={i * 60}>
              <div className="card hov" style={{ padding: 24, cursor: 'pointer', position: 'relative', height: '100%' }}>
                {c.badge && (
                  <div className="mono" style={{ position: 'absolute', top: 14, right: 14, fontSize: 9, letterSpacing: '0.12em', color: 'var(--accent-2)', background: 'rgba(255,215,0,.10)', border: '.5px solid rgba(255,215,0,.35)', padding: '3px 8px', borderRadius: 999 }}>{c.badge}</div>
                )}
                <div style={{ fontSize: 40, marginBottom: 12 }}>{c.flag}</div>
                <div className="display" style={{ fontSize: 20, marginBottom: 4 }}>{c.name}</div>
                {c.sub && <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.05em' }}>{c.sub}</div>}
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={500}>
          <p style={{ textAlign: 'center', color: 'var(--txt-3)', fontSize: 14, margin: 0 }}>
            Peste <strong style={{ color: 'var(--accent-1)' }}>5.000 de creatori</strong> activi pe toate piețele.
          </p>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 900px) { .country-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 500px) { .country-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ─── VALUES ────────────────────────────────────────────────────
function AboutValues() {
  const values = [
    { svg: <svg viewBox="0 0 32 32" fill="none"><path d="M16 4 L26 10 L26 22 L16 28 L6 22 L6 10 Z" stroke="currentColor" strokeWidth="1.5"/><circle cx="16" cy="16" r="4" fill="currentColor"/></svg>, title: 'Respect', desc: 'Față de timpul, munca și pasiunea fiecărui creator. Tratăm fiecare cont cu aceeași grijă, indiferent de mărime.' },
    { svg: <svg viewBox="0 0 32 32" fill="none"><path d="M16 4 V28 M8 10 L16 4 L24 10 M10 18 H22" stroke="currentColor" strokeWidth="1.5"/><circle cx="16" cy="24" r="3" stroke="currentColor" strokeWidth="1.5"/></svg>, title: 'Devotament', desc: 'Suntem alături de creatori la 2 dimineața când au probleme tehnice și la 9 dimineața când strâng strategia pentru match. Mereu acolo.' },
    { svg: <svg viewBox="0 0 32 32" fill="none"><rect x="6" y="14" width="20" height="14" stroke="currentColor" strokeWidth="1.5"/><path d="M10 14 V10 a6 6 0 0 1 12 0 v4" stroke="currentColor" strokeWidth="1.5"/><circle cx="16" cy="21" r="1.5" fill="currentColor"/></svg>, title: 'Seriozitate', desc: 'Spunem ce facem, facem ce spunem. Plăți la timp, suport real, fără promisiuni goale.' },
    { svg: <svg viewBox="0 0 32 32" fill="none"><circle cx="16" cy="16" r="12" stroke="currentColor" strokeWidth="1.5"/><path d="M16 8 V16 L22 20" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/><circle cx="16" cy="16" r="2" fill="currentColor"/></svg>, title: 'Implicare', desc: 'Nu suntem doar o agenție administrativă. Construim alături de creatori, ne pasă de fiecare etapă a creșterii lor.' },
  ];
  return (
    <section style={{ padding: '120px 0', position: 'relative', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 56 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● VALORILE NOASTRE</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0, maxWidth: 720 }}>Valorile noastre.</h2>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="value-grid">
          {values.map((v, i) => (
            <Reveal key={v.title} delay={i * 80}>
              <div className="card" style={{ padding: 28, height: '100%' }}>
                <div style={{ width: 40, height: 40, color: 'var(--accent-1)', marginBottom: 20 }}>{v.svg}</div>
                <h3 className="display" style={{ fontSize: 20, margin: '0 0 10px' }}>{v.title}</h3>
                <p style={{ color: 'var(--txt-2)', fontSize: 13, lineHeight: 1.6, margin: 0 }}>{v.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .value-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 500px) { .value-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// ─── TIMELINE ──────────────────────────────────────────────────
function AboutTimeline() {
  const events = [
    { year: '2023', title: 'Fondarea 4U Agency', desc: 'Vlad fondează agenția după ce este propus de managera lui de cont TikTok pentru a deveni agenție parteneră oficială.' },
    { year: '2023', title: 'Primii 1.000 de creatori', desc: 'Atingem pragul de 1.000 de creatori înscriși în agenție. Confirmarea că direcția e bună.' },
    { year: '2024', title: '🏆 Locul 1 — Community Fest', desc: 'Primul nostru trofeu național. O recunoaștere a comunității pe care am construit-o.' },
    { year: '2024', title: '🏆 Locul 1 — Live Fest 2024', desc: 'Al doilea trofeu major al anului. Confirmarea că suntem în topul agențiilor din România.' },
    { year: '2024', title: '🏆 Agenția #1 din România', desc: 'Trofeul oficial care ne consacră drept agenția numărul 1 de TikTok Live din țară.' },
    { year: '2024', title: 'Pragul de 2.000 de creatori', desc: 'Dublăm portofoliul. Echipa de manageri se extinde pentru a păstra calitatea suportului.' },
    { year: '2025', title: '🏆 Locul 1 — Community Fest 2025', desc: 'Al doilea an consecutiv în care câștigăm. Nu a fost noroc — e munca.' },
    { year: '2025', title: '🏆 Locul 1 — Live Fest 2025', desc: 'Repetăm performanța din 2024. Devenim singura agenție care câștigă două ediții consecutive.' },
    { year: '2025', title: '🏆 100M diamante — istorie făcută', desc: 'Devenim prima agenție din România care depășește pragul de 100 de milioane de diamante. A 4-a în Europa. Un record care vorbește.' },
    { year: '2025', title: 'Pragul de 3.000 de creatori în România', desc: 'Creștem constant. Calitatea suportului rămâne la fel — pentru că ne-am construit echipa odată cu noi.' },
    { year: '2025-26', title: 'Expansiune internațională', desc: 'Deschidem pe rând în Germania, Austria, Elveția, UK, Italia, Spania și MENA. Peste 5.000 de creatori activi pe toate piețele.' },
  ];
  return (
    <section style={{ padding: '120px 0', position: 'relative', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 64 }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● TIMELINE</div>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0 }}>Drumul nostru.</h2>
          </div>
        </Reveal>
        <div style={{ position: 'relative', maxWidth: 880, margin: '0 auto' }}>
          <div style={{ position: 'absolute', left: 80, top: 0, bottom: 0, width: 1, background: 'linear-gradient(180deg, var(--accent-1), var(--accent-2), transparent)' }} className="tl-line" />
          {events.map((e, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr', gap: 24, marginBottom: 48, position: 'relative' }} className="tl-row">
                <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', textAlign: 'right', paddingTop: 4 }}>{e.year}</div>
                <div style={{ position: 'relative', paddingLeft: 32 }}>
                  <div style={{ position: 'absolute', left: -7, top: 6, width: 14, height: 14, borderRadius: 999, background: 'var(--bg-1)', border: '2px solid var(--accent-1)', boxShadow: '0 0 12px rgba(82,242,15,.6)' }} />
                  <div className="card-glass" style={{ padding: 20 }}>
                    <h3 className="display" style={{ fontSize: 18, margin: '0 0 8px' }}>{e.title}</h3>
                    <p style={{ color: 'var(--txt-2)', fontSize: 13, lineHeight: 1.6, margin: 0 }}>{e.desc}</p>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA ───────────────────────────────────────────────────────
function AboutCTA({ onNav }) {
  return (
    <section style={{ padding: '80px 0 120px' }}>
      <div className="container">
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center', position: 'relative', overflow: 'hidden', background: 'linear-gradient(135deg, rgba(82,242,15,.12), rgba(255,215,0,.06))', border: '.5px solid rgba(82,242,15,.25)' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 0%, rgba(82,242,15,.2), transparent 70%)' }} />
            <div style={{ position: 'relative' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● ÎNCEPE AICI</div>
              <h2 className="display" style={{ fontSize: 'clamp(32px, 5vw, 64px)', margin: '0 0 20px' }}>Vrei să fii parte din povestea noastră?</h2>
              <p style={{ color: 'var(--txt-2)', fontSize: 17, maxWidth: 560, margin: '0 auto 32px', lineHeight: 1.6 }}>Indiferent dacă ești la primul live sau ai deja milioane de diamante — avem un loc pentru tine.</p>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-lg" onClick={() => onNav('signup')}>Aplică acum →</button>
                <button className="btn btn-glass btn-lg" onClick={() => onNav('contact')}>Vorbește cu echipa →</button>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.AboutPage = AboutPage;