// signup-company.jsx — Înscriere companii (multi-step brief form)

const { useState: useStateSc } = React;

const SC_INDUSTRIES = ['Beauty', 'Fashion', 'Tech', 'Food & Beverage', 'Auto', 'Finance', 'Travel', 'Entertainment', 'Health', 'Other'];
const SC_TYPES = [
  { id: 'integration', ico: '🎬', t: 'Brand integration' },
  { id: 'launch', ico: '🛍', t: 'Product launch' },
  { id: 'live', ico: '🏆', t: 'Live shopping' },
  { id: 'perf', ico: '🎯', t: 'Performance / conversii' },
  { id: 'partner', ico: '🤝', t: 'Long-term partnership' },
];
const SC_AGES = ['16-24', '25-34', '35-44', '45+'];
const SC_CATS = ['Lifestyle', 'Gaming', 'Beauty', 'Fashion', 'Food', 'Tech', 'Sport', 'Family'];
const SC_COUNTRIES = [['🇷🇴','RO'],['🇬🇧','UK'],['🇩🇪','DE'],['🇮🇹','IT'],['🇫🇷','FR'],['🇪🇸','ES'],['🇳🇱','NL'],['🌍','Global']];
const SC_BUDGETS = ['Sub 5.000 RON', '5.000 - 15.000 RON', '15.000 - 50.000 RON', 'Peste 50.000 RON', 'Preferă să discute'];

function SignupCompanyPage({ onNav }) {
  const [step, setStep] = useStateSc(1);
  const [done, setDone] = useStateSc(false);
  const [loading, setLoading] = useStateSc(false);
  const [errorMsg, setErrorMsg] = useStateSc('');
  const [data, setData] = useStateSc({
    company: '', cui: '', contactName: '', contactRole: '', email: '', phone: '', website: '', industry: '',
    hqCountry: 'România', hqCounty: '', hqCity: '',
    brand: '', types: [], ages: [], cats: [], countries: [], goals: '',
    budget: '', message: '', source: '', terms: false,
    website_url: '',
  });

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const toggle = (k, v) => setData(d => ({ ...d, [k]: d[k].includes(v) ? d[k].filter(x => x !== v) : [...d[k], v] }));

  const submit = async () => {
    // Honeypot — bot a completat câmpul invizibil; afișăm success silent + confetti, fără să trimitem nimic
    if (data.website_url) {
      setDone(true);
      setTimeout(() => { if (window.fireConfetti) window.fireConfetti(); }, 200);
      return;
    }
    setLoading(true);
    setErrorMsg('');
    const nullIfEmpty = (val) => {
      const s = (val == null ? '' : String(val)).trim();
      return s === '' ? null : s;
    };
    try {
      const { error } = await window.sb.from('brand_applications').insert({
        company: data.company,
        cui: nullIfEmpty(data.cui),
        contact_name: data.contactName,
        contact_role: nullIfEmpty(data.contactRole),
        email: data.email.trim().toLowerCase(),
        phone: nullIfEmpty(data.phone),
        website: nullIfEmpty(data.website),
        industry: nullIfEmpty(data.industry),
        country: nullIfEmpty(data.hqCountry),
        county: nullIfEmpty(data.hqCounty),
        city: nullIfEmpty(data.hqCity),
        brand: nullIfEmpty(data.brand),
        campaign_types: data.types,
        target_ages: data.ages,
        categories: data.cats,
        countries: data.countries,
        goals: nullIfEmpty(data.goals),
        budget: nullIfEmpty(data.budget),
        message: nullIfEmpty(data.message),
        source: nullIfEmpty(data.source),
        terms_accepted: data.terms,
      });
      if (error) {
        console.error('[4U Media] Eroare submit brand:', error);
        setErrorMsg('A apărut o eroare la trimitere. Te rugăm să încerci din nou sau să ne contactezi pe email.');
        setLoading(false);
        return;
      }
      setLoading(false);
      setDone(true);
      setTimeout(() => { if (window.fireConfetti) window.fireConfetti(); }, 200);
    } catch (e) {
      console.error('[4U Media] Network error submit brand:', e);
      setErrorMsg('Conexiune eșuată. Verifică internetul și încearcă din nou.');
      setLoading(false);
    }
  };

  return (
    <div className="page" style={{ minHeight: '100vh', position: 'relative', overflow: 'hidden', paddingTop: 100, paddingBottom: 80 }}>
      <Mesh /><Particles count={28} />
      <div className="container" style={{ position: 'relative', zIndex: 2, maxWidth: 920 }}>
        <ScHero onNav={onNav} />
        {!done ? (
          <>
            <ScProgress step={step} />
            <Reveal delay={100}>
              <div className="card-glass" style={{ padding: 'clamp(28px, 4vw, 48px)', marginTop: 24 }}>
                {step === 1 && <ScStep1 data={data} set={set} next={() => setStep(2)} />}
                {step === 2 && <ScStep2 data={data} set={set} toggle={toggle} prev={() => setStep(1)} next={() => setStep(3)} />}
                {step === 3 && <ScStep3 data={data} set={set} prev={() => setStep(2)} submit={submit} loading={loading} errorMsg={errorMsg} />}
              </div>
            </Reveal>
          </>
        ) : <ScSuccess onNav={onNav} />}
        {!done && <ScBenefits />}
      </div>
    </div>
  );
}

function ScHero({ onNav }) {
  return (
    <Reveal>
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <div className="pill" style={{ marginBottom: 20, display: 'inline-flex' }}><span className="dot" /><span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>ÎNSCRIERE COMPANII</span></div>
        <h1 className="display" style={{ fontSize: 'clamp(34px, 5vw, 64px)', margin: '0 0 16px', lineHeight: 1.05 }}>Conectăm brandul tău cu creatorii potriviți.</h1>
        <p style={{ fontSize: 17, color: 'var(--txt-2)', maxWidth: 620, margin: '0 auto 24px', lineHeight: 1.6 }}>Completează brief-ul. Echipa noastră îți pregătește o propunere personalizată în 48h.</p>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}><BackButton onNav={onNav} /></div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          {[['120+','campanii executate'],['85%','rata satisfacție'],['8','verticale']].map(([n, l]) => (
            <div key={l} className="card-glass" style={{ padding: '10px 16px', display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span className="display mono" style={{ fontSize: 18, color: 'var(--accent-1)' }}>{n}</span>
              <span style={{ fontSize: 12, color: 'var(--txt-2)' }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

function ScProgress({ step }) {
  const labels = ['Date companie', 'Detalii campanie', 'Buget & timing'];
  return (
    <Reveal delay={50}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center', marginTop: 32 }}>
        {labels.map((l, i) => {
          const n = i + 1;
          const active = n === step, done = n < step;
          return (
            <React.Fragment key={l}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ width: 32, height: 32, borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 600, fontFamily: 'JetBrains Mono', background: active ? 'var(--accent-1)' : done ? 'rgba(82,242,15,.18)' : 'rgba(255,255,255,.05)', color: active ? '#000' : done ? 'var(--accent-1)' : 'var(--txt-3)', border: '.5px solid', borderColor: active || done ? 'var(--accent-1)' : 'var(--line)' }}>{done ? '✓' : n}</div>
                <span style={{ fontSize: 12, color: active ? 'var(--txt-0)' : 'var(--txt-3)', fontWeight: active ? 500 : 400 }} className="sc-label">{l}</span>
              </div>
              {i < 2 && <div style={{ width: 32, height: 1, background: done ? 'var(--accent-1)' : 'var(--line)' }} />}
            </React.Fragment>
          );
        })}
      </div>
      <style>{`@media (max-width: 600px) { .sc-label { display: none; } }`}</style>
    </Reveal>
  );
}

function ScStep1({ data, set, next }) {
  const phoneRegex = /^\+?[\d\s()-]{8,20}$/;
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const phoneValid = !data.phone || phoneRegex.test(data.phone);
  const geoOk = data.hqCountry && (data.hqCountry !== 'România' || (data.hqCounty && data.hqCity));
  const can = data.company && data.email && emailRegex.test(data.email) && data.contactName && data.phone && phoneRegex.test(data.phone) && data.industry && geoOk;
  const selectDarkStyle = {
    height: 44,
    appearance: 'none',
    color: '#FFFFFF',
    backgroundColor: '#1a1a1a',
    backgroundImage: 'linear-gradient(45deg, transparent 50%, var(--accent-1) 50%), linear-gradient(135deg, var(--accent-1) 50%, transparent 50%)',
    backgroundPosition: 'calc(100% - 18px) 50%, calc(100% - 14px) 50%',
    backgroundSize: '4px 4px, 4px 4px',
    backgroundRepeat: 'no-repeat',
  };
  const darkOpt = { color: '#FFFFFF', backgroundColor: '#1a1a1a' };
  return (
    <div>
      <h2 className="display" style={{ fontSize: 24, margin: '0 0 24px' }}>Date companie</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="sc-grid2">
        <ScField label="Nume companie *"><input className="input" value={data.company} onChange={e => set('company', e.target.value)} placeholder="SC Brand SRL" /></ScField>
        <ScField label="CUI / Tax ID"><input className="input" value={data.cui} onChange={e => set('cui', e.target.value)} placeholder="RO12345678" /></ScField>
        <ScField label="Persoană de contact *"><input className="input" value={data.contactName} onChange={e => set('contactName', e.target.value)} placeholder="Nume Prenume" /></ScField>
        <ScField label="Funcție"><input className="input" value={data.contactRole} onChange={e => set('contactRole', e.target.value)} placeholder="Marketing Manager" /></ScField>
        <ScField label="Email business *">
          <input className="input" type="email" value={data.email} onChange={e => set('email', e.target.value)} placeholder="contact@brand.ro" />
          {data.email && !emailRegex.test(data.email) && (
            <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 4 }}>Format email invalid</div>
          )}
        </ScField>
        <ScField label="Telefon *">
          <input className="input" value={data.phone} onChange={e => set('phone', e.target.value)} placeholder="+40 7XX XXX XXX" />
          {!phoneValid && (
            <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 4 }}>Format telefon invalid</div>
          )}
        </ScField>
        <ScField label="Website" full>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px', background: 'rgba(255,255,255,.03)', border: '.5px solid var(--line)', borderRadius: 10, height: 44 }}>
            <span className="mono" style={{ fontSize: 12, color: 'var(--txt-3)' }}>https://</span>
            <input value={data.website} onChange={e => set('website', e.target.value)} placeholder="brand.ro" style={{ flex: 1, background: 'transparent', border: 0, color: 'var(--txt-0)', fontSize: 14, outline: 0 }} />
          </div>
        </ScField>
        <ScField label="Industrie *" full>
          <select className="input" value={data.industry} onChange={e => set('industry', e.target.value)} style={selectDarkStyle}>
            <option value="" style={darkOpt}>Selectează industria</option>
            {SC_INDUSTRIES.map(i => <option key={i} value={i} style={darkOpt}>{i}</option>)}
          </select>
        </ScField>
      </div>
      <div style={{ marginTop: 18 }}>
        <div style={{ fontSize: 12, color: 'var(--txt-3)', marginBottom: 10, letterSpacing: '0.05em' }}>Sediu companie</div>
        <window.CountryCascade
          country={data.hqCountry}
          county={data.hqCounty}
          city={data.hqCity}
          setCountry={v => set('hqCountry', v)}
          setCounty={v => set('hqCounty', v)}
          setCity={v => set('hqCity', v)}
          required={true}
        />
      </div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 32 }}>
        <button disabled={!can} className="btn btn-primary btn-lg" onClick={next} style={{ opacity: can ? 1 : 0.4, cursor: can ? 'pointer' : 'not-allowed' }}>Continuă →</button>
      </div>
      <style>{`@media (max-width: 600px) { .sc-grid2 { grid-template-columns: 1fr !important; } }`}</style>
    </div>
  );
}

function ScStep2({ data, set, toggle, prev, next }) {
  return (
    <div>
      <h2 className="display" style={{ fontSize: 24, margin: '0 0 24px' }}>Detalii campanie</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <ScField label="Nume brand"><input className="input" value={data.brand} onChange={e => set('brand', e.target.value)} placeholder="Numele care va apărea în campanie" /></ScField>
        <ScField label="Tip campanie">
          <div style={{ fontSize: 12, color: 'var(--txt-3)', marginBottom: 10 }}>Poți alege mai multe.</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }} className="sc-types">
            {SC_TYPES.map(t => {
              const active = data.types.includes(t.id);
              return (
                <button key={t.id} type="button" onClick={() => toggle('types', t.id)} className="hov" style={{ padding: '14px 10px', borderRadius: 12, border: '.5px solid', cursor: 'pointer', borderColor: active ? 'var(--accent-1)' : 'var(--line)', background: active ? 'rgba(82,242,15,.10)' : 'transparent', color: active ? 'var(--txt-0)' : 'var(--txt-2)', textAlign: 'center', fontSize: 12, lineHeight: 1.3, transition: 'all .2s' }}>
                  <div style={{ fontSize: 24, marginBottom: 8 }}>{t.ico}</div>{t.t}
                </button>
              );
            })}
          </div>
        </ScField>
        <ScField label="Target audience — vârstă">
          <ScChips opts={SC_AGES} value={data.ages} onToggle={(v) => toggle('ages', v)} />
        </ScField>
        <ScField label="Target audience — categorie">
          <ScChips opts={SC_CATS} value={data.cats} onToggle={(v) => toggle('cats', v)} />
        </ScField>
        <ScField label="Țări target">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {SC_COUNTRIES.map(([flag, code]) => (
              <button key={code} type="button" onClick={() => toggle('countries', code)} className="hov" style={{ padding: '8px 14px', borderRadius: 999, border: '.5px solid', cursor: 'pointer', borderColor: data.countries.includes(code) ? 'var(--accent-1)' : 'var(--line)', background: data.countries.includes(code) ? 'rgba(82,242,15,.10)' : 'transparent', color: data.countries.includes(code) ? 'var(--accent-1)' : 'var(--txt-2)', fontSize: 12, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 14 }}>{flag}</span>{code}
              </button>
            ))}
          </div>
        </ScField>
        <ScField label="Obiective"><textarea className="input" value={data.goals} onChange={e => set('goals', e.target.value)} placeholder="Ce vrei să obții cu această campanie? (awareness, vânzări, lansare produs, ...)" rows={4} style={{ resize: 'vertical', height: 'auto', padding: 14 }} /></ScField>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 32, gap: 12 }}>
        <button className="btn btn-glass btn-lg" onClick={prev}>← Înapoi</button>
        <button className="btn btn-primary btn-lg" onClick={next}>Continuă →</button>
      </div>
      <style>{`@media (max-width: 800px) { .sc-types { grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
    </div>
  );
}

function ScStep3({ data, set, prev, submit, loading, errorMsg }) {
  React.useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.iubenda.com/iubenda.js';
    script.async = true;
    document.body.appendChild(script);
    return () => {
      if (script.parentNode) script.parentNode.removeChild(script);
    };
  }, []);

  const can = data.terms;
  const selectDarkStyle = {
    height: 44,
    appearance: 'none',
    color: '#FFFFFF',
    backgroundColor: '#1a1a1a',
    backgroundImage: 'linear-gradient(45deg, transparent 50%, var(--accent-1) 50%), linear-gradient(135deg, var(--accent-1) 50%, transparent 50%)',
    backgroundPosition: 'calc(100% - 18px) 50%, calc(100% - 14px) 50%',
    backgroundSize: '4px 4px, 4px 4px',
    backgroundRepeat: 'no-repeat',
  };
  const darkOpt = { color: '#FFFFFF', backgroundColor: '#1a1a1a' };
  return (
    <div>
      <h2 className="display" style={{ fontSize: 24, margin: '0 0 24px' }}>Buget & timing</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        <ScField label="Buget aproximativ">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {SC_BUDGETS.map(b => (
              <button key={b} type="button" onClick={() => set('budget', b)} className="hov" style={{ padding: '14px 18px', borderRadius: 12, border: '.5px solid', cursor: 'pointer', borderColor: data.budget === b ? 'var(--accent-1)' : 'var(--line)', background: data.budget === b ? 'rgba(82,242,15,.08)' : 'transparent', color: data.budget === b ? 'var(--txt-0)' : 'var(--txt-2)', textAlign: 'left', fontSize: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 18, height: 18, borderRadius: '50%', border: '.5px solid', borderColor: data.budget === b ? 'var(--accent-1)' : 'var(--line)', display: 'grid', placeItems: 'center' }}>
                  {data.budget === b && <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent-1)' }} />}
                </span>
                {b}
              </button>
            ))}
          </div>
        </ScField>
        <ScField label="Mesaj liber"><textarea className="input" value={data.message} onChange={e => set('message', e.target.value)} placeholder="Detalii suplimentare sau întrebări..." rows={3} style={{ resize: 'vertical', height: 'auto', padding: 14 }} /></ScField>
        <ScField label="Cum ai aflat de noi">
          <select className="input" value={data.source} onChange={e => set('source', e.target.value)} style={selectDarkStyle}>
            <option value="" style={darkOpt}>Selectează</option>
            {['Recomandare','Google','TikTok','Instagram','LinkedIn','Eveniment','Altă agenție','Altul'].map(s => <option key={s} value={s} style={darkOpt}>{s}</option>)}
          </select>
        </ScField>
        <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer' }} className="hov">
          <input type="checkbox" checked={data.terms} onChange={e => set('terms', e.target.checked)} style={{ marginTop: 3, accentColor: 'var(--accent-1)' }} />
          <span style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.5 }}>
            Am citit și sunt de acord cu{' '}
            <a href="https://www.iubenda.com/terms-and-conditions/26919297"
               className="iubenda-nostyle iubenda-noiframe iubenda-embed ulink"
               title="Termeni și condiții"
               style={{ cursor: 'pointer' }}>Termenii</a>
            {' '}și{' '}
            <a href="https://www.iubenda.com/privacy-policy/49632785"
               className="iubenda-nostyle iubenda-noiframe iubenda-embed ulink"
               title="Politică de Confidențialitate"
               style={{ cursor: 'pointer' }}>Politica de Confidențialitate</a>.
          </span>
        </label>
      </div>

      {/* Honeypot — câmp invizibil pentru detectare boți */}
      <input
        type="text"
        name="website_url"
        value={data.website_url}
        onChange={e => set('website_url', e.target.value)}
        tabIndex={-1}
        autoComplete="off"
        aria-hidden="true"
        style={{ position: 'absolute', left: -9999, width: 1, height: 1, opacity: 0, pointerEvents: 'none' }}
      />

      {/* Error message */}
      {errorMsg && (
        <div style={{ marginTop: 24, padding: '12px 14px', borderRadius: 10, background: 'rgba(255,90,90,.06)', border: '.5px solid rgba(255,100,100,.3)', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <span style={{ fontSize: 16, lineHeight: 1.4 }}>⚠️</span>
          <span style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.5 }}>{errorMsg}</span>
        </div>
      )}

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 32, gap: 12 }}>
        <button className="btn btn-glass btn-lg" onClick={prev} disabled={loading}
          style={{ opacity: loading ? 0.6 : 1, cursor: loading ? 'not-allowed' : 'pointer' }}>← Înapoi</button>
        <button disabled={loading || !can} className="btn btn-primary btn-lg" onClick={submit}
          style={{ opacity: (loading || !can) ? 0.4 : 1, cursor: (loading || !can) ? 'not-allowed' : 'pointer' }}>
          {loading ? (
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 14, height: 14, border: '2px solid rgba(0,0,0,.2)', borderTopColor: 'currentColor', borderRadius: '50%', animation: 'sc-spin .8s linear infinite', display: 'inline-block' }} />
              Se trimite...
            </span>
          ) : 'Trimite solicitarea ✨'}
        </button>
      </div>
      <style>{`@keyframes sc-spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

function ScField({ label, children, full }) {
  return (
    <div style={{ gridColumn: full ? '1 / -1' : undefined }}>
      <label className="mono" style={{ fontSize: 11, color: 'var(--txt-3)', letterSpacing: '0.1em', display: 'block', marginBottom: 8, textTransform: 'uppercase' }}>{label}</label>
      {children}
    </div>
  );
}

function ScChips({ opts, value, onToggle }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      {opts.map(o => (
        <button key={o} type="button" onClick={() => onToggle(o)} className="hov" style={{ padding: '8px 14px', borderRadius: 999, border: '.5px solid', cursor: 'pointer', borderColor: value.includes(o) ? 'var(--accent-1)' : 'var(--line)', background: value.includes(o) ? 'rgba(82,242,15,.10)' : 'transparent', color: value.includes(o) ? 'var(--accent-1)' : 'var(--txt-2)', fontSize: 12, fontWeight: 500 }}>{o}</button>
      ))}
    </div>
  );
}

function ScSuccess({ onNav }) {
  return (
    <Reveal>
      <div className="card-glass" style={{ padding: 'clamp(40px, 6vw, 80px)', textAlign: 'center', marginTop: 24, background: 'linear-gradient(135deg, rgba(82,242,15,.12), rgba(255,215,0,.06))', border: '.5px solid rgba(82,242,15,.3)' }}>
        <div style={{ width: 88, height: 88, borderRadius: '50%', background: 'rgba(82,242,15,.15)', border: '2px solid var(--accent-1)', display: 'grid', placeItems: 'center', margin: '0 auto 24px', fontSize: 40, color: 'var(--accent-1)', boxShadow: '0 0 60px rgba(82,242,15,.4)' }}>✓</div>
        <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 44px)', margin: '0 0 16px' }}>Solicitare primită!</h2>
        <p style={{ color: 'var(--txt-2)', fontSize: 16, maxWidth: 500, margin: '0 auto 32px', lineHeight: 1.6 }}>Un reprezentant al 4U Agency te va contacta în maxim 48h cu o propunere personalizată.</p>
        <button className="btn btn-glass btn-lg" onClick={() => onNav('home')}>← Înapoi acasă</button>
      </div>
    </Reveal>
  );
}

function ScBenefits() {
  const items = [
    { ico: '💼', t: 'Account manager dedicat', d: 'Un singur punct de contact pe toată campania.' },
    { ico: '📊', t: 'Raportare transparentă', d: 'Date reale, dashboard live, nu doar screenshot-uri.' },
    { ico: '🔒', t: 'Garanție rezultate', d: 'KPI agreați în contract. Rambursare dacă nu livrăm.' },
  ];
  return (
    <Reveal delay={300}>
      <div style={{ marginTop: 64, paddingTop: 40, borderTop: '.5px solid var(--line-soft)' }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--txt-3)', letterSpacing: '.15em', marginBottom: 20, textAlign: 'center' }}>● DE CE SĂ LUCREZI CU NOI</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }} className="sc-bn">
          {items.map(it => (
            <div key={it.t} className="card" style={{ padding: 20, textAlign: 'center' }}>
              <div style={{ fontSize: 28, marginBottom: 10 }}>{it.ico}</div>
              <div className="display" style={{ fontSize: 15, marginBottom: 6 }}>{it.t}</div>
              <div style={{ color: 'var(--txt-2)', fontSize: 12.5, lineHeight: 1.55 }}>{it.d}</div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 700px) { .sc-bn { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </Reveal>
  );
}

window.SignupCompanyPage = SignupCompanyPage;