{!done ? (

{/* 01 — Date personale */}

set('fullName', v)} /> set('email', v)} error={data.email && !emailRegex.test(data.email) ? 'Format email invalid' : ''} /> set('phone', v)} />

set('country', v)} setCounty={v => set('county', v)} setCity={v => set('city', v)} required={true} />

set('address', v)} />

{/* 02 — Platforme */}

set('tiktokHandle', v)} onFollowers={v => set('tiktokFollowers', v)} /> set('instaHandle', v)} onFollowers={v => set('instaFollowers', v)} /> set('fbHandle', v)} onFollowers={v => set('fbFollowers', v)} /> set('ytHandle', v)} onFollowers={v => set('ytFollowers', v)} />

{/* 03 — Niches */}

{SI_NICHES.map(n => ( toggle('niches', n)}>{n} ))}

{/* 04 — Tipuri colaborări */}

{SI_COLLAB_TYPES.map(c => ( toggle('collabTypes', c.id)} icon={c.ico} label={c.t} /> ))}

{/* 05 — Onorariu */}

⚠️ Important: Alege o sumă realistă, în concordanță cu numărul tău de urmăritori și engagement-ul real. Suma este folosită ca filtru pentru colaborările pe care ți le propunem — selectarea unei sume nepotrivite cu profilul tău reduce drastic ofertele primite.

{SI_RATE_RANGES.map(b => ( set('rateRange', b)} compact>{b} ))}

{/* 06 — Mesaj */}

set('message', e.target.value)}
                placeholder="Spune-ne pe scurt despre tine, despre publicul tău, ce te motivează să colaborezi cu 4U..."
                rows={4}
                className="input"
                style={{ width: '100%', resize: 'vertical', marginBottom: 24, minHeight: 96, padding: 14, fontFamily: 'inherit' }}
              />

{/* Terms */}
              <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer', marginBottom: 24, fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.5 }}>
                <input type="checkbox" checked={data.terms} onChange={e => set('terms', e.target.checked)}
                  style={{ marginTop: 3, accentColor: 'var(--accent-1)', width: 16, height: 16 }} />
                <span>
                  Sunt de acord cu{' '}
                  <a href="https://www.iubenda.com/terms-and-conditions/26919297"
                     className="iubenda-nostyle iubenda-noiframe iubenda-embed hov"
                     title="Termeni și condiții"
                     style={{ color: 'var(--accent-1)', cursor: 'pointer' }}>Termenii și condițiile</a>
                  {' '}și{' '}
                  <a href="https://www.iubenda.com/privacy-policy/49632785"
                     className="iubenda-nostyle iubenda-noiframe iubenda-embed hov"
                     title="Politică de Confidențialitate"
                     style={{ color: 'var(--accent-1)', cursor: 'pointer' }}>Politica de confidențialitate</a>. Datele vor fi folosite exclusiv pentru evaluarea aplicației mele.
                </span>
              </label>

{/* 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={{ marginBottom: 16, 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>
              )}

{/* Actions */}
              <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
                <button className="btn btn-glass" onClick={() => onNav('home')} disabled={loading}
                  style={{ opacity: loading ? 0.6 : 1, cursor: loading ? 'not-allowed' : 'pointer' }}>Anulează</button>
                <button className="btn btn-primary" onClick={submit} disabled={loading || !canSubmit}
                  style={{ opacity: (loading || !canSubmit) ? 0.45 : 1, cursor: (loading || !canSubmit) ? '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: 'si-spin .8s linear infinite', display: 'inline-block' }} />
                      Se trimite...
                    </span>
                  ) : 'Trimite aplicația →'}
                </button>
              </div>
              <style>{`@keyframes si-spin { to { transform: rotate(360deg); } }`}</style>
              {!canSubmit && !loading && (
                <div style={{ marginTop: 12, fontSize: 12, color: 'var(--txt-3)', textAlign: 'right' }}>
                  Toate secțiunile sunt obligatorii — completează tot și acceptă termenii.
                </div>
              )}
            </div>
          </Reveal>
        ) : <SiSuccess onNav={onNav} name={data.fullName} />}

{!done && <SiBenefits />}
      </div>
    </div>
  );
}

// ─── Hero ─────────────────────────────────────────────────────
function SiHero({ 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 INFLUENCERI</span>
        </div>
        <h1 className="display" style={{ fontSize: 'clamp(34px, 5vw, 64px)', margin: '0 0 16px', lineHeight: 1.05 }}>
          Aplică să devii influencer 4U.
        </h1>
        <div style={{ maxWidth: 620, margin: '0 auto 24px', padding: '12px 16px', borderRadius: 10, background: 'rgba(255,215,0,.06)', border: '.5px solid rgba(255,215,0,.25)', display: 'flex', gap: 10, alignItems: 'flex-start', textAlign: 'left' }}>
          <span style={{ fontSize: 16, lineHeight: 1.4 }}>⚠️</span>
          <span style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.5 }}>
            <strong style={{ color: 'var(--accent-2)' }}>Atenție:</strong> Formularul este disponibil exclusiv creatorilor 4U Agency care colaborează cu noi pe TikTok Live. Dacă nu ești încă creator 4U, înscrie-te mai întâi în agenție pentru a putea aplica la programul de influenceri.
          </span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
          <BackButton onNav={onNav} />
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          {[['5.000+','creatori în rețea'],['8','țări'],['48h','răspuns mediu']].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>
  );
}

// ─── Section header ───────────────────────────────────────────
function SiSection({ title, label, hint }) {
  return (
    <div style={{ marginBottom: 16, display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
      <span className="mono" style={{ fontSize: 11, color: 'var(--accent-1)', letterSpacing: '0.1em' }}>{title}</span>
      <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em' }}>{label}</h3>
      {hint && <span style={{ fontSize: 12, color: 'var(--txt-3)' }}>· {hint}</span>}
    </div>
  );
}

// ─── Field ────────────────────────────────────────────────────
function SiField({ label, type = 'text', placeholder, value, onChange, error }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 12, color: 'var(--txt-2)', fontWeight: 500 }}>{label}</span>
      <input className="input" type={type} placeholder={placeholder} value={value} onChange={e => onChange(e.target.value)} />
      {error && <span style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 2 }}>{error}</span>}
    </label>
  );
}

// ─── Platform row ─────────────────────────────────────────────
function SiPlatformRow({ type, name, handle, followers, onHandle, onFollowers }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr 1fr', gap: 12, alignItems: 'center' }} className="si-platform">
      <SiPlatformLogo type={type} />
      <input className="input" placeholder={`@handle ${name}`} value={handle} onChange={e => onHandle(e.target.value)} />
      <input className="input" type="text" inputMode="numeric" pattern="[0-9]*"
        placeholder="Urmăritori — completează (ex: 13485)"
        value={followers}
        onChange={e => onFollowers(e.target.value.replace(/\D/g, ''))} />
      <style>{`.si-platform > * { min-width: 0; } @media (max-width: 600px) { .si-platform { grid-template-columns: 40px 1fr !important; } .si-platform > *:nth-child(3) { grid-column: 1 / -1; } }`}</style>
    </div>
  );
}

// ─── Chip ─────────────────────────────────────────────────────
function SiChip({ active, onClick, children, compact }) {
  return (
    <button onClick={onClick} className="hov" style={{
      padding: compact ? '7px 12px' : '8px 14px', borderRadius: 999, fontSize: compact ? 12 : 13,
      background: active ? 'rgba(82,242,15,.12)' : 'rgba(255,255,255,.03)',
      border: `.5px solid ${active ? 'var(--accent-1)' : 'var(--line)'}`,
      color: active ? 'var(--accent-1)' : 'var(--txt-1)',
      cursor: 'pointer', fontFamily: 'inherit', transition: 'all .15s',
    }}>
      {children}
    </button>
  );
}

// ─── Card (collab type) ───────────────────────────────────────
function SiCard({ active, onClick, icon, label }) {
  return (
    <button onClick={onClick} className="hov" style={{
      padding: '14px 16px', borderRadius: 12,
      background: active ? 'rgba(82,242,15,.08)' : 'rgba(255,255,255,.03)',
      border: `.5px solid ${active ? 'var(--accent-1)' : 'var(--line)'}`,
      display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
      fontFamily: 'inherit', textAlign: 'left', transition: 'all .15s',
    }}>
      <span style={{ fontSize: 20 }}>{icon}</span>
      <span style={{ fontSize: 13, color: active ? 'var(--accent-1)' : 'var(--txt-1)', fontWeight: 500 }}>{label}</span>
    </button>
  );
}

// ─── Benefits ─────────────────────────────────────────────────
function SiBenefits() {
  const items = [
    { ico: '💰', t: 'Câștiguri mai mari',  d: 'Acces la branduri și campanii pe care nu le obții individual.' },
    { ico: '🎬', t: 'Studiouri profesionale', d: 'Spațiu, lumini, echipă tehnică pentru filmări de calitate.' },
    { ico: '🤝', t: 'Echipă dedicată',     d: 'Manager de cont care îți negociază contractele și oportunitățile.' },
  ];
  return (
    <Reveal delay={200}>
      <div style={{ marginTop: 48 }}>
        <h3 style={{ fontSize: 20, fontWeight: 600, marginBottom: 20, textAlign: 'center', letterSpacing: '-0.01em' }}>
          De ce să te alături 4U Agency
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16 }}>
          {items.map(it => (
            <div key={it.t} className="card-glass" style={{ padding: 20 }}>
              <div style={{ fontSize: 28, marginBottom: 10 }}>{it.ico}</div>
              <div style={{ fontWeight: 600, marginBottom: 4 }}>{it.t}</div>
              <div style={{ fontSize: 13, color: 'var(--txt-2)', lineHeight: 1.5 }}>{it.d}</div>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

// ─── Success state ────────────────────────────────────────────
function SiSuccess({ onNav, name }) {
  const first = (name || '').split(' ')[0] || 'tu';
  return (
    <Reveal>
      <div className="card-glass" style={{ padding: 'clamp(32px, 5vw, 56px)', textAlign: 'center', marginTop: 24 }}>
        <div style={{ fontSize: 56, marginBottom: 16 }}>🎉</div>
        <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 44px)', margin: '0 0 12px', letterSpacing: '-0.02em' }}>
          Aplicația ta a fost trimisă, {first}!
        </h2>
        <p style={{ fontSize: 16, color: 'var(--txt-2)', maxWidth: 520, margin: '0 auto 32px', lineHeight: 1.6 }}>
          Echipa 4U îți va răspunde pe email în maximum 5 zile lucrătoare. Verifică și folderul de Spam, în caz că răspunsul aterizează acolo.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => onNav('home')}>Înapoi acasă</button>
          <button className="btn btn-glass"   onClick={() => onNav('about')}>Despre 4U</button>
        </div>
      </div>
    </Reveal>
  );
}