// team.jsx — Echipa 4U Agency

const { useState: useStateTm } = React;

const TEAM_MEMBERS = [
  { name: 'Vlad',          role: 'CEO & Fondator',   img: 'uploads/vlad.png',          isFounder: true,
    bio: 'Strategist & mentor pentru top creators 4U. Specializat în creșterea sustainable a creatorilor cu potențial pe termen lung.' },
  { name: 'Addalicious',   role: 'Sub-agency Owner', img: 'uploads/adda.png',
    bio: 'Coach pentru meciuri live oficiale și strategii de battles. Ajută creatorii să transforme audiența în comunitate activă.' },
  { name: 'Florin',        role: 'Sub-agency Owner', img: 'uploads/florin.png',
    bio: 'Specialist în hook-uri, retenție și prima impresie. Antrenează creatorii pe primele 30 de secunde de live — momentul cheie al oricărui stream.' },
  { name: 'Andreea Foxxy', role: 'Sub-agency Owner', img: 'uploads/andreea.png',
    bio: 'Specializată în beauty, lifestyle și fashion creators. Coach pentru personal branding și conținut autentic.' },
  { name: 'Vali',          role: 'Sub-agency Owner', img: 'uploads/vali.png',
    bio: 'Coach pentru content gaming și talk show. Ajută creatorii să își structureze live-urile pentru audiențe loiale și engaged.' },
  { name: 'Andreea T',     role: 'Sub-agency Owner', img: 'uploads/andreeatudose.png',
    bio: 'Coach pentru music, dance și entertainment creators. Specializată în energie de live și interacțiunea cu fanii.' },
];

function TeamPage({ onNav }) {
  return (
    <div className="page">
      <TeamHero onNav={onNav} />
      <TeamGrid />
      <TeamNumbers />
      <TeamCTA onNav={onNav} />
    </div>
  );
}

function TeamHero({ onNav }) {
  return (
    <section style={{ minHeight: '50vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 40 }}>
      <Mesh /><Particles count={32} />
      <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' }}>ECHIPA</span></div></Reveal>
        <Reveal delay={120}><h1 className="display" style={{ fontSize: 'clamp(44px, 7vw, 96px)', margin: 0, maxWidth: 1100, letterSpacing: '-0.04em' }}>Oamenii din spatele <span style={{ color: 'var(--accent-1)' }}>rezultatelor</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 }}><strong style={{ color: 'var(--txt-0)' }}>Profesioniștii</strong> dedicați creșterii creatorilor din 4U Agency.</p></Reveal>
        <Reveal delay={300}><div style={{ marginTop: 32 }}><BackButton onNav={onNav} /></div></Reveal>
      </div>
    </section>
  );
}

function TikTokGlyph({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
    </svg>
  );
}

function SocialIcon({ kind }) {
  return (
    <button className="hov" title="TikTok" style={{ width: 32, height: 32, borderRadius: 8, background: 'rgba(255,255,255,.04)', border: '.5px solid var(--line)', color: 'var(--txt-1)', cursor: 'pointer', display: 'grid', placeItems: 'center' }}>
      <TikTokGlyph size={16} />
    </button>
  );
}

function TeamGrid() {
  const [active, setActive] = useStateTm(null);
  return (
    <section style={{ padding: '60px 0 120px' }}>
      <div className="container">
        <Reveal>
          <div style={{ marginBottom: 64, textAlign: 'center' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', marginBottom: 16 }}>● ECHIPA NOASTRĂ</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 64px)', margin: 0 }}>Echipa 4U.</h2>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, maxWidth: 760, margin: '0 auto' }} className="tg-grid">
          {TEAM_MEMBERS.map((p, i) => (
            <Reveal key={p.name} delay={i * 70}>
              <button onClick={() => setActive(p)} className="card hov" style={{
                padding: 0, overflow: 'hidden', cursor: 'pointer', textAlign: 'center', width: '100%', height: '100%',
                border: '.5px solid var(--line)',
                position: 'relative',
              }}>
                <div style={{ aspectRatio: '4/5', overflow: 'hidden' }}>
                  <img src={p.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 25%', display: 'block' }} />
                </div>
                <div style={{ padding: 10 }}>
                  <div className="mono" style={{ fontSize: 8, color: 'var(--accent-1)', letterSpacing: '0.12em', marginBottom: 3 }}>{p.role.toUpperCase()}</div>
                  <div className="display" style={{ fontSize: 12, color: 'var(--txt-0)', lineHeight: 1.15 }}>{p.name}</div>
                </div>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
      {active && ReactDOM.createPortal(
        <div onClick={() => setActive(null)} style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, zIndex: 9999, background: 'rgba(0,0,0,.78)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, overflowY: 'auto' }}>
          <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: 460, width: '100%', padding: 28, position: 'relative', background: '#15151a', border: '.5px solid rgba(82,242,15,.25)', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,.6)' }}>
            <button onClick={() => setActive(null)} style={{ position: 'absolute', top: 14, right: 14, width: 32, height: 32, borderRadius: 999, background: 'rgba(255,255,255,.06)', border: '.5px solid var(--line)', color: 'var(--txt-0)', cursor: 'pointer', fontSize: 14 }}>✕</button>
            <div style={{ width: 96, height: 96, borderRadius: 999, overflow: 'hidden', marginBottom: 18, border: '.5px solid var(--line)' }}>
              <img src={active.img} alt={active.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.12em', marginBottom: 6 }}>{active.role.toUpperCase()}</div>
            <h3 className="display" style={{ fontSize: 24, margin: '0 0 14px' }}>{active.name}</h3>
            <p style={{ color: 'var(--txt-2)', fontSize: 14, lineHeight: 1.6, margin: 0 }}>{active.bio}</p>
            <div style={{ display: 'flex', gap: 8, marginTop: 20 }}><SocialIcon /></div>
          </div>
        </div>,
        document.body
      )}
      <style>{`@media (max-width: 900px) { .tg-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 520px !important; } } @media (max-width: 600px) { .tg-grid { grid-template-columns: 1fr !important; max-width: 280px !important; margin: 0 auto; } }`}</style>
    </section>
  );
}

function TeamNumbers() {
  const stats = [['5.000+','Creatori activi'],['8','Țări'],['24/7','Suport'],['3+','Ani de experiență']];
  return (
    <section style={{ padding: '80px 0', borderTop: '.5px solid var(--line-soft)', borderBottom: '.5px solid var(--line-soft)', background: 'rgba(82,242,15,.025)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, textAlign: 'center' }} className="num-grid">
          {stats.map(([n, l]) => (
            <div key={l}>
              <div className="display mono" style={{ fontSize: 'clamp(36px, 5vw, 64px)', color: 'var(--accent-1)', letterSpacing: '-0.04em', marginBottom: 8 }}>{n}</div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--txt-3)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 600px) { .num-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </section>
  );
}

function TeamCTA({ onNav }) {
  return (
    <section style={{ padding: '60px 0 120px' }}>
      <div className="container">
        <Reveal>
          <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 72px)', textAlign: 'center', background: 'linear-gradient(135deg, rgba(82,242,15,.10), rgba(255,215,0,.06))', border: '.5px solid rgba(82,242,15,.25)' }}>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 5vw, 60px)', margin: '0 0 24px' }}>Pasionat de TikTok Live?<br/>Avem un loc pentru tine.</h2>
            <div style={{ display: 'flex', justifyContent: 'center', marginTop: 12 }}>
              <button className="btn btn-primary btn-lg" onClick={() => onNav('signup')}>Înscrie-te acum →</button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.TeamPage = TeamPage;