// campaigns.jsx — Campanii cu influenceri (B2B + B2C creatori)

const { useState: useStateCa } = React;

function CampaignsPage({ onNav }) {
  return (
    <div className="page">
      <CaHero onNav={onNav} />
      <CaHow />
      <CaTypes />
      <CaCases />
      <CaBrands />
      <CaWhy />
      <CaCreators onNav={onNav} />
      <CaCTA onNav={onNav} />
    </div>
  );
}

function CaHero({ onNav }) {
  return (
    <section style={{ minHeight: '60vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 60 }}>
      <Mesh /><Particles count={36} />
      <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' }}>CAMPANII INFLUENCERI</span></div></Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 6.5vw, 92px)', margin: 0, maxWidth: 1100, lineHeight: 1.02 }}>
            Conectăm branduri cu <span style={{ background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>vocile potrivite</span>.
          </h1>
        </Reveal>
        <Reveal delay={220}>
          <p style={{ fontSize: 'clamp(17px, 1.3vw, 21px)', color: 'var(--txt-2)', marginTop: 24, maxWidth: 760, lineHeight: 1.55 }}>
            Peste 120 campanii executate end-to-end. Matching, briefing, execuție, raportare. Pentru branduri care vor rezultate, nu doar conținut.
          </p>
        </Reveal>
        <Reveal delay={260}>
          <div style={{ marginTop: 28 }}><BackButton onNav={onNav} /></div>
        </Reveal>
        <Reveal delay={300}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 40 }} className="ca-dual">
            <div className="card-glass" style={{ padding: 28, position: 'relative' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--accent-1)', letterSpacing: '.15em', marginBottom: 12 }}>PENTRU BRANDURI</div>
              <div className="display" style={{ fontSize: 22, marginBottom: 8 }}>Sunt brand și caut influenceri.</div>
              <p style={{ color: 'var(--txt-2)', fontSize: 13.5, lineHeight: 1.55, marginBottom: 18 }}>Brief-ul tău, creatorii noștri, raportare cu date reale.</p>
              <button className="btn btn-primary" onClick={() => onNav('signup-company')}>Solicită acum →</button>
            </div>
            <div className="card-glass" style={{ padding: 28, position: 'relative' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--accent-2)', letterSpacing: '.15em', marginBottom: 12 }}>PENTRU CREATORI</div>
              <div className="display" style={{ fontSize: 22, marginBottom: 8 }}>Sunt creator și vreau campanii.</div>
              <p style={{ color: 'var(--txt-2)', fontSize: 13.5, lineHeight: 1.55, marginBottom: 18 }}>Aplică în portofoliul nostru. Te chemăm la campanii potrivite.</p>
              <button className="btn btn-glass" onClick={() => onNav('signup-influencer')}>Aplică acum →</button>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 700px) { .ca-dual { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function CaHow() {
  const steps = [
    { n: '01', t: 'BRIEFING', d: 'Call de 30 minute. Definim împreună obiective, target, buget, KPI.', ico: '📋' },
    { n: '02', t: 'MATCHING', d: 'Selectăm creatorii potriviți din portofoliul nostru cu match peste 80%.', ico: '🎯' },
    { n: '03', t: 'EXECUȚIE', d: 'Coordonăm filmare, briefing creator, postare, monitorizare 24/7.', ico: '🎬' },
    { n: '04', t: 'RAPORTARE', d: 'Date complete: views, engagement, ROI, screenshot-uri, link-uri trackable.', ico: '📊' },
  ];
  return (
    <section style={{ padding: '120px 0', 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 }}>● CUM FUNCȚIONEAZĂ</div><h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0 }}>De la brief la raportare în 4 pași.</h2></div></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="ca-how">
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div className="card-glass" style={{ padding: 28, height: '100%' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                  <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(82,242,15,.12)', display: 'grid', placeItems: 'center', fontSize: 22, border: '.5px solid rgba(82,242,15,.25)' }}>{s.ico}</div>
                  <div className="display mono" style={{ fontSize: 32, color: 'var(--accent-1)', opacity: 0.85, letterSpacing: '-0.04em' }}>{s.n}</div>
                </div>
                <h3 className="display" style={{ fontSize: 18, margin: '0 0 8px', letterSpacing: '0.05em' }}>{s.t}</h3>
                <p style={{ color: 'var(--txt-2)', fontSize: 13, lineHeight: 1.6, margin: 0 }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .ca-how { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 500px) { .ca-how { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function CaTypes() {
  const items = [
    { ico: '🎬', t: 'Brand integration', d: 'Produsul tău natural în conținutul creatorului — nu e reclamă, e poveste.' },
    { ico: '🛍', t: 'Product launch', d: 'Campanie coordonată cu mai mulți creatori în paralel — impact masiv în 24h.' },
    { ico: '🏆', t: 'Live shopping events', d: 'Sesiuni live dedicate cu vânzare directă, link-uri trackable, raportare.' },
    { ico: '🎯', t: 'Performance campaigns', d: 'Focus pe conversii, link-uri trackable, optimizare în timp real.' },
  ];
  return (
    <section style={{ padding: '120px 0', 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 }}>● TIPURI DE CAMPANII</div><h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0 }}>Ce putem rula pentru tine.</h2></div></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="ca-types">
          {items.map((it, i) => (
            <Reveal key={it.t} delay={i * 60}>
              <div className="card hov" style={{ padding: 24, height: '100%', cursor: 'pointer' }}>
                <div style={{ width: 52, height: 52, borderRadius: 12, background: 'rgba(82,242,15,.10)', display: 'grid', placeItems: 'center', fontSize: 26, marginBottom: 16, border: '.5px solid rgba(82,242,15,.2)' }}>{it.ico}</div>
                <h3 className="display" style={{ fontSize: 17, margin: '0 0 8px' }}>{it.t}</h3>
                <p style={{ color: 'var(--txt-2)', fontSize: 13, lineHeight: 1.6, margin: 0 }}>{it.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 1000px) { .ca-types { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 500px) { .ca-types { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function CaCases() {
  const cases = [
    { brand: 'BEAUTÉ Co.', vertical: 'Cosmetics', creators: 5, hue: 320, m1: ['4.2M', 'views'], m2: ['18%', 'engagement'], m3: ['6x', 'ROI'] },
    { brand: 'NORD/CO', vertical: 'Fashion · Live Shopping', creators: 3, hue: 200, m1: ['320K', 'live views'], m2: ['8.5K', 'vânzări'], m3: ['4.2x', 'ROAS'] },
    { brand: 'VOLT', vertical: 'Electronics · Launch', creators: 8, hue: 50, m1: ['#1', 'trending RO'], m2: ['2.1M', 'reach 24h'], m3: ['+340%', 'pre-orders'] },
  ];
  return (
    <section style={{ padding: '120px 0', 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 }}>● STUDII DE CAZ</div><h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0 }}>Campanii recente cu rezultate reale.</h2></div></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="ca-cases">
          {cases.map((c, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="card hov" style={{ overflow: 'hidden', cursor: 'pointer', height: '100%', display: 'flex', flexDirection: 'column' }}>
                <div style={{ aspectRatio: '16/10', background: `linear-gradient(135deg, hsl(${c.hue}, 70%, 28%), hsl(${c.hue}, 50%, 8%))`, position: 'relative', display: 'grid', placeItems: 'center' }}>
                  <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.18), transparent 60%)' }} />
                  <div className="display" style={{ fontSize: 32, color: '#fff', letterSpacing: '0.05em' }}>{c.brand}</div>
                  <div style={{ position: 'absolute', bottom: 14, left: 14, display: 'flex', gap: 4 }}>
                    {Array.from({length: c.creators}).map((_, j) => (
                      <div key={j} style={{ width: 24, height: 24, borderRadius: '50%', background: `hsl(${(c.hue + j * 30) % 360}, 70%, 50%)`, border: '2px solid rgba(0,0,0,.4)', marginLeft: j === 0 ? 0 : -8 }} />
                    ))}
                  </div>
                </div>
                <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column' }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--txt-3)', marginBottom: 6 }}>{c.vertical} · {c.creators} creatori</div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, margin: '14px 0', padding: '14px 0', borderTop: '.5px solid var(--line)', borderBottom: '.5px solid var(--line)' }}>
                    {[c.m1, c.m2, c.m3].map(([v, l], j) => (
                      <div key={j}>
                        <div className="display mono" style={{ fontSize: 18, color: 'var(--accent-1)', letterSpacing: '-0.02em' }}>{v}</div>
                        <div style={{ fontSize: 10, color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '.1em' }}>{l}</div>
                      </div>
                    ))}
                  </div>
                  <a className="ulink" style={{ fontSize: 13, marginTop: 'auto' }}>Vezi case study →</a>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .ca-cases { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function CaBrands() {
  const brands = ['BRAND•01','MAISON','LUMA','NORD/CO','BEAUTÉ','VOLT','ATELIER','KAIA','MOOD','PRISM'];
  return (
    <section style={{ padding: '80px 0', borderTop: '.5px solid var(--line-soft)', overflow: 'hidden' }}>
      <div className="container" style={{ marginBottom: 32 }}>
        <Reveal><div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.15em', textAlign: 'center' }}>● BRANDURI PARTENERE — AU AVUT ÎNCREDERE ÎN 4U</div></Reveal>
      </div>
      <div style={{ display: 'flex', gap: 64, animation: 'caMarquee 30s linear infinite', whiteSpace: 'nowrap' }}>
        {[...brands, ...brands].map((b, i) => (
          <span key={i} className="display hov" style={{ fontSize: 28, color: 'var(--txt-2)', letterSpacing: '0.04em', flexShrink: 0, transition: 'color .25s', cursor: 'pointer' }}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent-1)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--txt-2)'}>{b}</span>
        ))}
      </div>
      <style>{`@keyframes caMarquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }`}</style>
    </section>
  );
}

function CaWhy() {
  const items = [
    { ico: '🎯', t: 'Matching algoritmic', d: 'Alegem creatori cu audience match peste 80%.' },
    { ico: '📊', t: 'Date reale', d: 'Analytics complete, nu screenshot-uri.' },
    { ico: '🔒', t: 'Garanție de execuție', d: 'Livrăm conform brief-ului, cu KPI-uri agreate de la început și transparență totală pe parcursul campaniei.' },
    { ico: '⚡', t: 'Speed', d: 'Campanie live în 7 zile de la brief.' },
    { ico: '🌍', t: 'Multi-țară', d: 'Execuție simultană în RO, UK, DE, IT și încă 4 piețe.' },
    { ico: '💼', t: 'Account manager dedicat', d: 'Un singur punct de contact pentru toată campania.' },
  ];
  return (
    <section style={{ padding: '120px 0', 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 }}>● DE CE 4U</div><h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0 }}>De ce brandurile aleg 4U.</h2></div></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="ca-why">
          {items.map((it, i) => (
            <Reveal key={it.t} delay={i * 50}>
              <div className="card" style={{ padding: 24, height: '100%' }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: 'rgba(82,242,15,.10)', display: 'grid', placeItems: 'center', fontSize: 22, marginBottom: 14, border: '.5px solid rgba(82,242,15,.2)' }}>{it.ico}</div>
                <h3 className="display" style={{ fontSize: 17, margin: '0 0 6px' }}>{it.t}</h3>
                <p style={{ color: 'var(--txt-2)', fontSize: 13, lineHeight: 1.55, margin: 0 }}>{it.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .ca-why { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 500px) { .ca-why { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function CaCreators({ onNav }) {
  const steps = [
    { n: '01', t: 'Aplică', d: 'Trimite-ne profilul tău TikTok și statisticile actuale.' },
    { n: '02', t: 'Verificare', d: 'Echipa noastră verifică audiența ta în 48 de ore.' },
    { n: '03', t: 'În portofoliu', d: 'Te adăugăm în baza noastră de creatori activi.' },
    { n: '04', t: 'Primești campanii', d: 'Te chemăm doar la campanii care îți potrivesc audienței.' },
  ];
  return (
    <section style={{ padding: '120px 0', borderTop: '.5px solid var(--line-soft)' }}>
      <div className="container">
        <Reveal><div style={{ marginBottom: 56 }}><div className="mono" style={{ fontSize: 11, color: 'var(--accent-2)', letterSpacing: '0.15em', marginBottom: 16 }}>● PENTRU CREATORI</div><h2 className="display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: 0 }}>Cum aplici ca și creator pentru campanii.</h2></div></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 32 }} className="ca-creators">
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 80}>
              <div className="card-glass" style={{ padding: 24, height: '100%' }}>
                <div className="display mono" style={{ fontSize: 36, color: 'var(--accent-2)', opacity: 0.85, marginBottom: 10, letterSpacing: '-0.04em' }}>{s.n}</div>
                <h3 className="display" style={{ fontSize: 17, margin: '0 0 6px' }}>{s.t}</h3>
                <p style={{ color: 'var(--txt-2)', fontSize: 13, lineHeight: 1.55, margin: 0 }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal delay={400}>
          <div style={{ textAlign: 'center' }}>
            <button className="btn btn-primary btn-lg" onClick={() => onNav('signup-influencer')}>Aplică acum →</button>
          </div>
        </Reveal>
      </div>
      <style>{`@media (max-width: 900px) { .ca-creators { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 500px) { .ca-creators { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function CaCTA({ onNav }) {
  return (
    <section style={{ padding: '80px 0 120px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="ca-cta-dual">
          <Reveal>
            <div className="card-glass" style={{ padding: 40, height: '100%', background: 'linear-gradient(135deg, rgba(82,242,15,.12), transparent)' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '.15em', marginBottom: 16 }}>PENTRU BRANDURI</div>
              <h3 className="display" style={{ fontSize: 28, margin: '0 0 20px' }}>Brand? Solicită acum.</h3>
              <button className="btn btn-primary btn-lg" onClick={() => onNav('signup-company')}>Solicită acum →</button>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div className="card-glass" style={{ padding: 40, height: '100%', background: 'linear-gradient(135deg, rgba(255,215,0,.12), transparent)' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--accent-2)', letterSpacing: '.15em', marginBottom: 16 }}>PENTRU CREATORI</div>
              <h3 className="display" style={{ fontSize: 28, margin: '0 0 20px' }}>Aplică pentru campanii.</h3>
              <button className="btn btn-glass btn-lg" onClick={() => onNav('signup-influencer')}>Aplică acum →</button>
            </div>
          </Reveal>
        </div>
      </div>
      <style>{`@media (max-width: 700px) { .ca-cta-dual { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

window.CampaignsPage = CampaignsPage;