// GSP — Trabajá con nosotros (empleo). Página de fuga: subdominio, noindex, sin Cliengo.
// Copy fiel a la página actual del cliente, render on-brand.
function EmpleoForm() {
  const Icon = window.Icon;
  const [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [fileName, setFileName] = React.useState('');
  const fileRef = React.useRef(null);

  function readFile(file) {
    return new Promise((res) => {
      if (!file) return res(null);
      const r = new FileReader();
      r.onload = () => res({ name: file.name, type: file.type, base64: r.result });
      r.onerror = () => res(null);
      r.readAsDataURL(file);
    });
  }

  async function handleSubmit(e) {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    const form = e.target;
    const file = fileRef.current && fileRef.current.files[0];
    const cv = await readFile(file);
    const payload = {
      nombre: form.nombre.value,
      email: form.email.value,
      telefono: form.telefono.value,
      puesto: form.puesto.value,
      mensaje: form.mensaje.value,
      cvName: cv ? cv.name : '',
      cvType: cv ? cv.type : '',
      cvBase64: cv ? cv.base64 : '',
      origen: 'empleo.gsp-seguridad.com',
      ts: new Date().toISOString(),
    };
    const endpoint = window.GSP_EMPLEO_ENDPOINT;
    try {
      if (endpoint) await fetch(endpoint, { method: 'POST', mode: 'no-cors', body: JSON.stringify(payload) });
    } catch (err) { console.warn('Empleo submit:', err); }
    setBusy(false);
    setSent(true);
  }

  return (
    <div className="empleo-formcard">
      {sent ? (
        <div className="empleo-sent">
          <div className="ok"><Icon name="check" size={26} sw={2.5} /></div>
          <h3>¡Postulación enviada!</h3>
          <p>Gracias. Tu información quedó registrada en nuestro equipo de selección. Si tu perfil se adecúa a una búsqueda activa, nos pondremos en contacto.</p>
        </div>
      ) : (
        <React.Fragment>
          <h3 className="empleo-formcard-title">Complete sus datos y adjunte su currículo</h3>
          <form onSubmit={handleSubmit}>
            <div className="empleo-grid">
              <Field label="Nombre completo"><Input name="nombre" placeholder="Tu nombre" required /></Field>
              <Field label="Email"><Input name="email" type="email" placeholder="tu@email.com" required /></Field>
              <Field label="Teléfono"><Input name="telefono" type="tel" placeholder="11-XXXX-XXXX" /></Field>
              <Field label="Puesto al que postulás">
                <Select name="puesto" defaultValue="">
                  <option value="" disabled>Seleccioná un puesto</option>
                  <option>Vigilador/a</option>
                  <option>Supervisor/a</option>
                  <option>Administrativo/a</option>
                  <option>Otro</option>
                </Select>
              </Field>
              <Field label="Mensaje" full><Textarea name="mensaje" placeholder="Contanos brevemente tu experiencia y disponibilidad..." /></Field>
            </div>

            <div className="empleo-file">
              <input ref={fileRef} type="file" accept=".pdf,.doc,.docx,.jpg,.jpeg" style={{ display: 'none' }}
                onChange={(e) => setFileName(e.target.files && e.target.files[0] ? e.target.files[0].name : '')} />
              <div className="empleo-file-row">
                <span className="empleo-file-label"><Icon name="mail" size={16} /> {fileName || 'Agregar currículo (PDF / Word / JPG)'}</span>
                <button type="button" className="empleo-file-btn" onClick={() => fileRef.current && fileRef.current.click()}>Adjuntar</button>
              </div>
            </div>

            <Button variant="primary" fullWidth type="submit" size="lg" disabled={busy}>{busy ? 'Enviando…' : 'Enviar postulación'}</Button>
            <p className="empleo-form-note">Tus datos se registran en nuestro equipo de selección (RRHH). No es un canal de cotización ni de atención comercial.</p>
          </form>
        </React.Fragment>
      )}
    </div>
  );
}

function Empleo() {
  const Icon = window.Icon;
  const buscamos = [
    'Compromiso, responsabilidad y buena presencia',
    'Capacidad para trabajar en equipo y cumplir procedimientos',
    'Actitud preventiva y orientación al servicio',
    'Disponibilidad horaria según el puesto',
  ];
  const ofrecemos = [
    'Incorporación a una empresa con más de 20 años de trayectoria',
    'Posibilidades de desarrollo según desempeño',
    'Trabajo en distintos tipos de objetivos',
    'Acompañamiento operativo y supervisión permanente',
  ];
  return (
    <React.Fragment>
      <header className="empleo-topbar">
        <a className="empleo-logo" href="https://gsp-seguridad.com"><img src="gsp-logo.svg" alt="GSP Seguridad Privada" /></a>
        <a className="empleo-back" href="https://gsp-seguridad.com"><Icon name="arrow" size={15} style={{ transform: 'scaleX(-1)' }} /> Volver al sitio</a>
      </header>

      <section className="empleo-hero">
        <div className="empleo-hero-glow" />
        <div className="empleo-hero-inner">
          <div className="empleo-pill">Trabajá con nosotros</div>
          <h1 className="empleo-hero-title">Sumate a una empresa de seguridad en <span className="hero-accent">constante crecimiento</span></h1>
          <p className="empleo-hero-sub">En GSP Seguridad buscamos incorporar de forma permanente personal comprometido, responsable y con vocación de servicio para desempeñarse en distintos objetivos de vigilancia física.</p>
        </div>
        <div className="hero-diagonal">
          <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0 80L1440 0V80H0Z" fill="#fff" /></svg>
        </div>
      </section>

      <section className="section empleo-body">
        <div className="empleo-inner">
          <div className="empleo-highlight">
            Si te interesa formar parte de un equipo profesional y desarrollar tu carrera en el rubro de la seguridad privada, completá el formulario y te tendremos en cuenta para futuras búsquedas laborales.
          </div>

          <div className="empleo-cols">
            <div className="empleo-col">
              <div className="empleo-block">
                <h2 className="empleo-h">¿A quién buscamos?</h2>
                <p className="empleo-lead">Personas que cuenten con:</p>
                <ul className="empleo-list">
                  {buscamos.map((t) => <li key={t}><Icon name="check" size={16} sw={2.5} /><span>{t}</span></li>)}
                </ul>
              </div>
              <div className="empleo-block">
                <h2 className="empleo-h">¿Qué ofrecemos?</h2>
                <ul className="empleo-list">
                  {ofrecemos.map((t) => <li key={t}><Icon name="check" size={16} sw={2.5} /><span>{t}</span></li>)}
                </ul>
              </div>
            </div>

            <div className="empleo-col">
              <div className="empleo-block">
                <h2 className="empleo-h">Proceso de postulación</h2>
                <p className="empleo-proc">Completá el formulario con tus datos personales y laborales. La información será evaluada por nuestro equipo de selección y, en caso de adecuarse a una búsqueda activa, nos pondremos en contacto.</p>
              </div>
              <div className="empleo-banner-black"><span className="ebb-ic"><Icon name="bell" size={16} sw={2} /></span> No se coordinan entrevistas de forma telefónica.</div>
              <div className="empleo-banner-red"><strong>Importante:</strong> el envío del formulario no implica incorporación inmediata ni garantiza una entrevista.</div>
            </div>
          </div>

          <EmpleoForm />
        </div>
      </section>

      <footer className="empleo-footer">
        <div className="empleo-footer-inner">
          <span>© 2026 GSP Seguridad y Tecnología S.R.L.</span>
          <a href="https://gsp-seguridad.com">gsp-seguridad.com</a>
        </div>
      </footer>
    </React.Fragment>
  );
}
window.Empleo = Empleo;