function LeadForm() {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    nombre:'', apellidos:'', telefono:'', email:'', nacionalidad:'',
    provincia:'', enEspana:'', elegible:'', situacion:'', familia:'',
    descripcion:'', idioma:'Español', sector:'', consent:false,
    tipoConsulta: '', empresa:'', cargo:''
  });
  const set = (k) => (e) => setForm({...form, [k]: e.target.type==='checkbox'?e.target.checked:e.target.value});

  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    // Envío directo al proxy local que inyectará las credenciales
    // de CapRover antes de enviarlo al CRM Frappe.

    try {
      const frappeLead = {
        first_name: form.nombre.trim(),
        last_name: form.apellidos.trim(),
        lead_name: `${form.nombre} ${form.apellidos}`.trim(),
        email: form.email.trim(),
        mobile_no: form.telefono.replace(/[^\d+]/g, '').trim(),
        company_name: form.empresa?.trim() || "", 
        lead_source: "Migrantes",
        source: "Formularios Web",

        custom_nacionalidad: form.nacionalidad,
        nacionalidad: form.nacionalidad,
        country: form.nacionalidad,
        territory: form.provincia.trim(),
        provincia: form.provincia.trim(),
        custom_provincia: form.provincia.trim(),
        ubicacion: form.provincia.trim(),
        custom_ubicacion: form.provincia.trim(),
        zip_code: "", 
        job_title: form.cargo?.trim() || "",
        cargo: form.cargo?.trim() || "",
        custom_cargo: form.cargo?.trim() || "",
        empresa: form.empresa?.trim() || "",
        custom_empresa: form.empresa?.trim() || "",
        industry: "",
        sector: "",
        custom_sector: "",
        status: "Interesado",
        lead_owner: "",
        situacion_migratoria: form.situacion,
        custom_situacion_migratoria: form.situacion,
        motivo_de_consulta: form.tipoConsulta,
        custom_motivo_de_consulta: form.tipoConsulta,
        url_origen: typeof window !== "undefined" ? window.location.origin + window.location.pathname : "",
        custom_url_origen: typeof window !== "undefined" ? window.location.origin + window.location.pathname : "",
        custom_observaciones: [
          `¿ESTÁ EN ESPAÑA?: ${form.enEspana}`,
          `¿ELIGIBLE REGULARIZACIÓN?: ${form.elegible}`,
          `SITUACIÓN ACTUAL: ${form.situacion}`,
          `FAMILIA AFECTADA: ${form.familia}`,
          `IDIOMA CONTACTO: ${form.idioma}`,
          `SECTOR DESEADO: ${form.sector || 'No especificado'}`,
          `DESCRIPCIÓN/SITUACIÓN: ${form.descripcion?.trim() || 'Sin descripción'}`
        ].join('\n'),
        observaciones: [
          `¿ESTÁ EN ESPAÑA?: ${form.enEspana}`,
          `¿ELIGIBLE REGULARIZACIÓN?: ${form.elegible}`,
          `SITUACIÓN ACTUAL: ${form.situacion}`,
          `FAMILIA AFECTADA: ${form.familia}`,
          `IDIOMA CONTACTO: ${form.idioma}`,
          `SECTOR DESEADO: ${form.sector || 'No especificado'}`,
          `DESCRIPCIÓN/SITUACIÓN: ${form.descripcion?.trim() || 'Sin descripción'}`
        ].join('\n'),
        notes: [
          `¿ESTÁ EN ESPAÑA?: ${form.enEspana}`,
          `¿ELIGIBLE REGULARIZACIÓN?: ${form.elegible}`,
          `SITUACIÓN ACTUAL: ${form.situacion}`,
          `FAMILIA AFECTADA: ${form.familia}`,
          `IDIOMA CONTACTO: ${form.idioma}`,
          `SECTOR DESEADO: ${form.sector || 'No especificado'}`,
          `DESCRIPCIÓN/SITUACIÓN: ${form.descripcion?.trim() || 'Sin descripción'}`
        ].join('\n'),
        description: [
          `¿ESTÁ EN ESPAÑA?: ${form.enEspana}`,
          `¿ELIGIBLE REGULARIZACIÓN?: ${form.elegible}`,
          `SITUACIÓN ACTUAL: ${form.situacion}`,
          `FAMILIA AFECTADA: ${form.familia}`,
          `IDIOMA CONTACTO: ${form.idioma}`,
          `SECTOR DESEADO: ${form.sector || 'No especificado'}`,
          `DESCRIPCIÓN/SITUACIÓN: ${form.descripcion?.trim() || 'Sin descripción'}`
        ].join('\n')
      };

      const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
      const crmUrl = isLocal ? 'http://localhost:8099/api/resource/CRM Lead' : '/api/resource/CRM Lead';
      
      console.log("Sending payload to CRM:", frappeLead);

      const response = await fetch(crmUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(frappeLead),
      });

      if (response.ok) {
        setSubmitted(true);
        // Trigger automatic download
        const link = document.createElement('a');
        link.href = '../../assets/Regularizaci%C3%B3n%202026%20en%20lenguaje%20claro.pdf';
        link.download = 'Regularizacion_2026_Lenguaje_Claro.pdf';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        const errorData = await response.json().catch(() => ({}));
        console.error("CRM Error Response:", errorData);
        throw new Error(errorData.message || `Error ${response.status}`);
      }
    } catch (err) {
      console.error("Submission failed:", err);
      if (err.message === 'Failed to fetch') {
        setError("Error de conexión (CORS): El servidor CRM bloquea solicitudes desde localhost. El código es correcto, pero requiere configuración en el servidor.");
      } else {
        setError("No se pudo enviar el formulario: " + err.message);
      }
    } finally {
      setLoading(false);
    }
  };

  if (submitted) {
    return (
      <section id="form" className="section" style={{background:'var(--bg-brand-soft)'}}>
        <div className="container" style={{maxWidth:640,textAlign:'center'}}>
          <div className="icon-square" style={{width:64,height:64,borderRadius:20,margin:'0 auto 20px',background:'#D4F4DD',color:'#1F9D55'}}>
            <i data-lucide="check" style={{width:32,height:32}}></i>
          </div>
          <h2 style={{margin:'0 0 14px'}}>¡Gracias! Tu guía se está descargando.</h2>
          <p className="lead" style={{margin:'0 auto',maxWidth:520}}>
            Hemos recibido tus datos correctamente. Si la descarga no ha comenzado automáticamente, puedes usar el botón de abajo.
          </p>
          <div style={{marginTop:32, display:'flex', flexDirection:'column', gap:12, alignItems:'center'}}>
            <a href="../../assets/Regularizaci%C3%B3n%202026%20en%20lenguaje%20claro.pdf" download="Regularizacion_2026_Lenguaje_Claro.pdf" className="btn btn-primary" style={{width:'fit-content', padding:'14px 32px'}}>
              <i data-lucide="download" style={{width:20,height:20, marginRight:8}}></i> Descargar Guía PDF
            </a>
            <button className="btn btn-ghost" onClick={()=>setSubmitted(false)}>
              ← Volver al formulario
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="form" className="section" style={{background:'var(--bg-brand-soft)'}}>
      <div className="container" style={{maxWidth:780}}>
        <div style={{textAlign:'center',marginBottom:32}}>
          <div className="eyebrow-pill" style={{background:'#fff',marginBottom:14}}>Atención personalizada</div>
          <h2 style={{margin:'0 0 10px'}}>Déjanos tus datos y te contactamos</h2>
          <p className="lead" style={{maxWidth:560,margin:'0 auto'}}>
            Cuéntanos tu situación y nuestro equipo podrá orientarte de forma personalizada sobre tu caso.
          </p>
        </div>

        <form onSubmit={submit} style={{background:'#fff',borderRadius:20,padding:'32px 32px 28px',boxShadow:'var(--shadow-md)'}}>
          <div className="grid-2">
            <div className="field"><label className="field-label">Nombre *</label><input className="input" required value={form.nombre} onChange={set('nombre')} /></div>
            <div className="field"><label className="field-label">Apellidos *</label><input className="input" required value={form.apellidos} onChange={set('apellidos')} /></div>
          </div>

          <div className="grid-2">
            <div className="field"><label className="field-label">Teléfono / WhatsApp *</label><input className="input" required type="tel" value={form.telefono} onChange={set('telefono')} placeholder="+34 600 000 000" /></div>
            <div className="field"><label className="field-label">Email *</label><input className="input" required type="email" value={form.email} onChange={set('email')} /></div>
          </div>
          
          <div className="grid-2">
            <div className="field"><label className="field-label">Provincia de residencia en España *</label><input className="input" required value={form.provincia} onChange={set('provincia')} /></div>
            <div className="field"><label className="field-label">Nacionalidad *</label>
              <select className="select" required value={form.nacionalidad} onChange={set('nacionalidad')}>
                <option value="">Selecciona tu país</option>
                <option>Marruecos</option><option>Perú</option><option>Colombia</option>
                <option>Venezuela</option><option>Brasil</option><option>Paraguay</option>
                <option>Bolivia</option><option>Otro</option>
              </select>
            </div>
          </div>

          <div className="field">
            <label className="field-label">¿Estás actualmente en España?</label>
            <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
              {['Sí','No'].map(o => (
                <RadioPill key={o} name="enEspana" value={o} current={form.enEspana} onChange={set('enEspana')} />
              ))}
            </div>
          </div>

          <div className="field">
            <label className="field-label">Dinos en qué sector te gustaría trabajar</label>
            <select className="select" value={form.sector} onChange={set('sector')}>
              <option value="">Selecciona un sector</option>
              <option>Cuidado a personas mayores</option>
              <option>Atención al cliente</option>
              <option>Hostelería</option>
              <option>Administración y oficina</option>
              <option>Logística y almacén</option>
              <option>Sanidad</option>
              <option>Construcción</option>
              <option>Peluquería y estética</option>
              <option>Informática</option>
              <option>Marketing y comunicación</option>
              <option value="Otro">Otros</option>
            </select>
          </div>

          <div className="field">
            <label className="field-label">Cuéntanos brevemente tu situación</label>
            <textarea className="textarea input" rows="4" value={form.descripcion} onChange={set('descripcion')}></textarea>
          </div>

          <label style={{display:'flex',gap:10,alignItems:'flex-start',fontSize:13,color:'var(--fg-2)',lineHeight:1.5,marginBottom:20,cursor:'pointer'}}>
            <input type="checkbox" required checked={form.consent} onChange={set('consent')} style={{marginTop:3,accentColor:'var(--atu-blue)',width:16,height:16}}/>
            <span>Acepto la <a href="#legal">política de privacidad</a> y doy mi consentimiento para que Grupo ATU contacte conmigo sobre mi caso.</span>
          </label>

          {error && (
            <div style={{color:'#D93025',background:'#FEEBEB',padding:'12px 16px',borderRadius:10,fontSize:14,marginBottom:20,fontWeight:500}}>
              {error}
            </div>
          )}

          <button className="btn btn-primary" type="submit" disabled={loading} style={{width:'100%',justifyContent:'center',opacity:loading?0.7:1,cursor:loading?'not-allowed':'pointer'}}>
            {loading ? 'Enviando...' : 'Quiero atención personalizada'} 
            <span style={{display: loading ? 'none' : 'inline-flex', marginLeft: 8, alignItems: 'center'}}>
              <i data-lucide="arrow-right" style={{width:18,height:18}}></i>
            </span>
          </button>

          <p style={{fontSize:12,color:'var(--fg-3)',textAlign:'center',margin:'16px 0 0',lineHeight:1.5}}>
            La información ofrecida en esta página es orientativa. Cada caso debe revisarse individualmente.
          </p>
        </form>
      </div>
    </section>
  );
}

function RadioPill({name, value, current, onChange}) {
  const active = current === value;
  return (
    <label style={{
      padding:'9px 16px',borderRadius:999,cursor:'pointer',
      fontSize:14,fontWeight:600,transition:'all 120ms',
      background: active ? 'var(--atu-blue)' : '#fff',
      color: active ? '#fff' : 'var(--fg-1)',
      border: `1.5px solid ${active ? 'var(--atu-blue)' : 'var(--border-strong)'}`,
    }}>
      <input type="radio" name={name} value={value} checked={active} onChange={onChange} style={{display:'none'}} />
      {value}
    </label>
  );
}
window.LeadForm = LeadForm;