/* Pilot section — clean white v5. Bilingual (window.LANG). Footer is in shell.jsx. */

const TLANG = (typeof window !== 'undefined' && window.LANG) || 'en';

const PILOT = {
  en: {
    eyebrow: 'Get Started',
    title: <>Free pilot.<br/><em>Zero risk.</em></>,
    intro: "Free violation scans for agencies, estates and rights organizations. No platform setup. No contract. No cost. Just a clear picture of what's happening with your talent's likeness right now.",
    successTitle: 'Request received.',
    successText: 'Our rights team will respond within one business day with NDA and intake call scheduling.',
    formEyebrow: '● FREE VIOLATION SCAN · INTAKE', formRef: '5 BUS. DAYS',
    nameL: 'Your name', namePh: 'Full legal name',
    emailL: 'Email', emailPh: 'you@firm.com',
    talentL: 'Talent name', talentPh: 'Subject of the scan',
    roleL: 'Your role',
    roles: ['Estate', 'Agency', 'Rights Org', 'Studio / Brand'],
    submit: 'Request a free scan',
    disclaimer: 'By submitting you agree to our intake process. No payment information collected.',
  },
  es: {
    eyebrow: 'Empieza aquí',
    title: <>Piloto gratuito.<br/><em>Sin riesgo.</em></>,
    intro: 'Escaneos de infracciones gratuitos para agencias, herederos y organizaciones de derechos. Sin configuración. Sin contrato. Sin costo. Solo una imagen clara de lo que está pasando con la imagen de tu talento ahora mismo.',
    successTitle: 'Solicitud recibida.',
    successText: 'Nuestro equipo te responderá en un día hábil con el NDA y la programación de la llamada.',
    formEyebrow: '● ESCANEO GRATUITO · ADMISIÓN', formRef: '5 DÍAS HÁB.',
    nameL: 'Tu nombre', namePh: 'Nombre legal completo',
    emailL: 'Correo', emailPh: 'tu@empresa.com',
    talentL: 'Nombre del talento', talentPh: 'Sujeto del escaneo',
    roleL: 'Tu rol',
    roles: ['Heredero', 'Agencia', 'Org. de derechos', 'Estudio / Marca'],
    submit: 'Solicitar escaneo gratuito',
    disclaimer: 'Al enviar aceptas nuestro proceso de admisión. No se recopila información de pago.',
  },
}[TLANG];

const ROLES = PILOT.roles;

const PilotSection = () => {
  const [role, setRole] = React.useState(ROLES[1]);
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', talent: '' });
  const submit = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent(`Free violation scan request: ${form.talent || 'talent'}`);
    const body = encodeURIComponent(
      `New free violation scan request from the talicense site:\n\n` +
      `Name: ${form.name}\n` +
      `Email: ${form.email}\n` +
      `Talent / subject of scan: ${form.talent}\n` +
      `Role: ${role}\n`
    );
    window.location.href = `mailto:hello@talicense.com?subject=${subject}&body=${body}`;
    setSubmitted(true);
  };

  return (
    <section id="pilot" className="pilot-section">
      <div className="container">
        <div className="pilot-grid">
          <div>
            <div className="eyebrow">{PILOT.eyebrow}</div>
            <h2 className="section-title" style={{marginTop: 28}}>{PILOT.title}</h2>
            <p style={{marginTop: 32, fontSize: 18, lineHeight: 1.6, color: 'var(--text-soft)'}}>
              {PILOT.intro}
            </p>
          </div>

          <form className="pilot-form" onSubmit={submit}>
            {submitted ? (
              <div className="form-success">
                <div className="ok">✓</div>
                <h4>{PILOT.successTitle}</h4>
                <p style={{fontSize: 14, color: 'rgba(255,255,255,0.7)'}}>{PILOT.successText}</p>
                <div style={{marginTop: 24, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.18em'}}>REF · IMG-{Math.floor(Math.random()*900000+100000)}</div>
              </div>
            ) : (
              <>
                <div className="form-eyebrow">
                  <span>{PILOT.formEyebrow}</span>
                  <span className="ref">{PILOT.formRef}</span>
                </div>
                <div className="field">
                  <label>{PILOT.nameL}</label>
                  <input type="text" value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder={PILOT.namePh} required />
                </div>
                <div className="field">
                  <label>{PILOT.emailL}</label>
                  <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder={PILOT.emailPh} required />
                </div>
                <div className="field">
                  <label>{PILOT.talentL}</label>
                  <input type="text" value={form.talent} onChange={e => setForm({...form, talent: e.target.value})} placeholder={PILOT.talentPh} required />
                </div>
                <div className="field">
                  <label>{PILOT.roleL}</label>
                  <div className="role-options">
                    {ROLES.map(r => (
                      <div key={r} className={'role-opt' + (role === r ? ' active' : '')} onClick={() => setRole(r)}>{r}</div>
                    ))}
                  </div>
                </div>
                <button type="submit" className="btn form-submit">
                  {PILOT.submit} <span className="arrow">→</span>
                </button>
                <div style={{marginTop: 18, fontSize: 11, color: 'rgba(255,255,255,0.4)', lineHeight: 1.6, textAlign: 'center', fontFamily: 'var(--mono)', letterSpacing: '0.08em'}}>
                  {PILOT.disclaimer}
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PilotSection });