/* careers.jsx — "Sumate a nuestro equipo" — careers / CV upload section */

const CAREER_AREAS = [
'Ingeniería',
'Técnico HVAC',
'Instalaciones',
'Arquitecto',
'Administración',
'Logística'];


const CAREER_VALUES = [
{
  t: 'Desarrollo profesional',
  d: 'Plan de carrera con objetivos claros y crecimiento sostenido dentro de la empresa.',
  icon:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 17l6-6 4 4 8-8" />
        <path d="M14 7h7v7" />
      </svg>

},
{
  t: 'Proyectos relevantes',
  d: 'Trabajá en obras de referencia: salud, banca, infraestructura y desarrollos premium.',
  icon:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 21h18" />
        <path d="M6 21V8l6-4 6 4v13" />
        <path d="M9 21v-6h6v6" />
      </svg>

},
{
  t: 'Capacitación constante',
  d: 'Certificaciones de fábrica y formación técnica continua con los principales partners.',
  icon:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M22 10 12 5 2 10l10 5 10-5z" />
        <path d="M6 12v5c3 2 9 2 12 0v-5" />
      </svg>

},
{
  t: 'Equipo y respaldo',
  d: 'Cultura colaborativa, condiciones formales y 35 años de respaldo en el rubro.',
  icon:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
        <path d="M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2" />
        <circle cx="10" cy="7" r="4" />
        <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
      </svg>

}];


const Careers = () => {
  const [area, setArea] = React.useState('Ingeniería');
  const [appType, setAppType] = React.useState('Empleo');
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const formRef = React.useRef(null);

  // ⚠️ REEMPLAZAR por el endpoint real de Formspree para EMPLEO/CV.
  //    Creá un segundo formulario en https://formspree.io (a administracion@aclimatarargentina.com.ar)
  //    y pegá acá su URL, con la forma: https://formspree.io/f/xxxxxxxx
  const FORMSPREE_EMPLEO = 'https://formspree.io/f/xkolglkd';


  const onSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    try {
      const fd = new FormData(formRef.current); // incluye los campos de texto y el CV adjunto
      fd.append('Tipo de postulación', appType);
      fd.append('Área de interés', area);
      fd.append('_subject', appType + ' · postulación web');
      const res = await fetch(FORMSPREE_EMPLEO, {
        method: 'POST',
        headers: { Accept: 'application/json' },
        body: fd,
      });
      if (res.ok) {
        setStatus('sent');
        if (formRef.current) formRef.current.reset();
      } else {
        setStatus('error');
      }
    } catch (err) {
      setStatus('error');
    }
  };

  return (
    <section id="empleo" className="section careers-section" data-screen-label="Empleo">
      <div className="container">
        <div className="careers-grid">
          {/* LEFT — pitch + values */}
          <div className="careers-pitch">
            <span className="eyebrow">Trabajá con nosotros</span>
            <h2 className="careers-h">
              Sumate a nuestro equipo o iniciá<br />
              <span className="hl">tu primera experiencia profesional.</span>
            </h2>
            <p className="lede">
              Buscamos profesionales, técnicos y estudiantes comprometidos
              con la excelencia. Si querés desarrollar tu carrera, realizar
              una pasantía o formar parte de una empresa con trayectoria en
              obras termomecánicas, postulate hoy.
            </p>

            <div className="careers-values">
              {CAREER_VALUES.map((v, i) =>
              <div key={i} className="careers-value">
                  <div className="careers-value-ic">{v.icon}</div>
                  <div>
                    <div className="careers-value-t">{v.t}</div>
                    <div className="careers-value-d">{v.d}</div>
                  </div>
                </div>
              )}
            </div>

            <div className="careers-meta">
              <div className="careers-meta-item">
                <div className="careers-meta-l">Oficina</div>
                <div className="careers-meta-v">Ciudadela, Buenos Aires</div>
              </div>
              <div className="careers-meta-item">
                <div className="careers-meta-l">Modalidad</div>
                <div className="careers-meta-v">Presencial</div>
              </div>
              <div className="careers-meta-item">
                <div className="careers-meta-l">Contacto</div>
                <div className="careers-meta-v">administracion@aclimatarargentina.com.ar</div>
              </div>
            </div>
          </div>

          {/* RIGHT — application form */}
          <form className="careers-form" ref={formRef} onSubmit={onSubmit}>
            <div className="careers-form-head">
              <h3>Completá tu postulación</h3>
              <p className="careers-form-lede">
                    Completá el formulario y luego enviá tu CV en formato PDF a
                    administracion@aclimatarargentina.com.ar para completar tu postulación.
                    Nuestro equipo revisará tu información y, si tu perfil se ajusta a una búsqueda,
                    se pondrá en contacto con vos.
              </p>
            </div>

            <div className="cf-field">
              <span className="cf-lbl">Tipo de postulación</span>
              <div className="careers-areas" role="radiogroup" aria-label="Tipo de postulación">
                {['Empleo', 'Pasantía'].map((t) =>
                <button
                  key={t}
                  type="button"
                  role="radio"
                  aria-checked={appType === t}
                  className={'careers-area-chip ' + (appType === t ? 'is-active' : '')}
                  onClick={() => setAppType(t)}>
                    {t}
                  </button>
                )}
              </div>
            </div>

            <div className="cf-row-2">
              <label className="cf-field">
                <span className="cf-lbl">Nombre y apellido</span>
                <input type="text" name="Nombre" required placeholder="Tu nombre" />
              </label>
              <label className="cf-field">
                <span className="cf-lbl">Email</span>
                <input type="email" name="email" required placeholder="tu@email.com" />
              </label>
            </div>

            <label className="cf-field">
              <span className="cf-lbl">Teléfono</span>
              <input type="tel" name="Teléfono" placeholder="+54 11 ..." />
            </label>

            <div className="cf-field">
              <span className="cf-lbl">Área de interés</span>
              <div className="careers-areas" role="radiogroup" aria-label="Área de interés">
                {CAREER_AREAS.map((a) =>
                <button
                  key={a}
                  type="button"
                  role="radio"
                  aria-checked={area === a}
                  className={'careers-area-chip ' + (area === a ? 'is-active' : '')}
                  onClick={() => setArea(a)}>
                    {a}
                  </button>
                )}
              </div>
            </div>

            <label className="cf-field">
              <span className="cf-lbl">Mensaje <span className="cf-opt">(opcional)</span></span>
              <textarea rows="3" name="Mensaje" placeholder="Contanos brevemente sobre vos, tu experiencia o por qué te gustaría sumarte a Aclimatar."></textarea>
            </label>


            <div className="careers-form-foot">
              {status === 'sent' &&
                <p className="cf-success" role="status" aria-live="polite">
                  ¡Postulación recibida! Gracias por tu interés en Aclimatar. Recordá enviar tu CV en formato PDF a administracion@aclimatarargentina.com.ar, indicando tu nombre completo y el área de interés.
                </p>}
              {status === 'error' &&
                <p className="cf-error" role="alert">
                  No pudimos enviar tu postulación en este momento. Reintentá en unos minutos o escribinos a administracion@aclimatarargentina.com.ar.
                </p>}
              <button type="submit" className="btn btn-primary btn-lg careers-submit" disabled={status === 'sending'}>
                {status === 'sending' ? 'Enviando…' : 'Enviar postulación'}
                {status !== 'sending' &&
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>}
              </button>
              <div className="careers-privacy">
                Tus datos se tratan de forma confidencial conforme a la
                Ley 25.326 de Protección de Datos Personales.
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>);

};

window.Careers = Careers;