// GSP — Página de Contacto (exclusiva). Hero split + despedida + footer liviano.
function ContactoFormCard() {
  const Icon = window.Icon;
  const [status, setStatus] = React.useState('idle');
  const [form, setForm] = React.useState({ nombre: '', telefono: '', email: '', servicio: '', mensaje: '', empresa_web: '' });
  const startedAt = React.useRef(Date.now());
  const tsRef = React.useRef(null);
  const tsId = React.useRef(null);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  React.useEffect(() => {
    startedAt.current = Date.now();
    if (window.GSPForms) window.GSPForms.renderTurnstile(tsRef.current).then((id) => { tsId.current = id; });
  }, []);
  const handleSubmit = (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    const token = window.GSPForms ? window.GSPForms.getToken(tsId.current) : '';
    window.GSPForms.submit({
      formId: 'contacto-contacto',
      fields: { nombre: form.nombre, telefono: form.telefono, email: form.email, servicio: form.servicio, mensaje: form.mensaje },
      meta: { startedAt: startedAt.current, hp: form.empresa_web, token },
    }).then(() => setStatus('sent')).catch((err) => {
      console.warn('[Contacto] envío falló:', err && err.message);
      setStatus('error');
      if (window.GSPForms) window.GSPForms.resetTurnstile(tsId.current);
    });
  };
  const sent = status === 'sent';
  const sending = status === 'sending';
  return (
    <div className="contacto-formcard">
      {sent ? (
        <div className="form-sent">
          <div className="ok"><Icon name="check" size={26} sw={2.5} /></div>
          <h3>¡Consulta enviada!</h3>
          <p>Gracias. Un especialista de GSP te va a contactar dentro de las próximas 24 horas.</p>
        </div>
      ) : (
        <React.Fragment>
          <h3 className="contacto-formcard-title">Solicitá tu cotización</h3>
          <p className="contacto-formcard-sub">Sin compromiso. Te respondemos en 24 horas.</p>
          <form onSubmit={handleSubmit} noValidate>
            <div className="form-grid" style={{ marginBottom: '1rem' }}>
              <Field label="Nombre completo"><Input name="nombre" placeholder="Tu nombre" required value={form.nombre} onChange={set('nombre')} /></Field>
              <Field label="Teléfono"><Input name="telefono" type="tel" placeholder="11-XXXX-XXXX" value={form.telefono} onChange={set('telefono')} /></Field>
              <Field label="Email"><Input name="email" type="email" placeholder="tu@email.com" required value={form.email} onChange={set('email')} /></Field>
              <Field label="Tipo de servicio">
                <Select name="servicio" value={form.servicio} onChange={set('servicio')}>
                  <option value="" disabled>Seleccioná un servicio</option>
                  <option>Vigilancia Privada</option>
                  <option>Alarmas</option>
                  <option>Cámaras de Seguridad</option>
                  <option>Control de Accesos</option>
                  <option>Geolocalización de Flotas</option>
                  <option>Otro</option>
                </Select>
              </Field>
              <Field label="Mensaje" full><Textarea name="mensaje" placeholder="Contanos qué necesitás proteger..." value={form.mensaje} onChange={set('mensaje')} /></Field>
            </div>
            <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }}>
              <label>No completar<input type="text" name="empresa_web" tabIndex={-1} autoComplete="off" value={form.empresa_web} onChange={set('empresa_web')} /></label>
            </div>
            <div ref={tsRef} style={{ marginBottom: '.75rem' }} />
            <Button variant="primary" fullWidth type="submit" size="lg" disabled={sending}>{sending ? 'Enviando…' : 'Enviar consulta'}</Button>
            {status === 'error' && <p style={{ color: 'var(--red-500)', fontSize: '.82rem', marginTop: '.6rem', textAlign: 'center' }}>No pudimos enviar tu consulta. Reintentá o llamanos al 0810-220-0477.</p>}
          </form>
        </React.Fragment>
      )}
    </div>
  );
}

function Contacto() {
  const Icon = window.Icon;
  const zonas = ['Pinamar', 'CABA', 'La Plata', 'GBA'];
  return (
    <React.Fragment>
      <section className="contacto-hero" id="contacto">
        <div className="contacto-glow" />
        <div className="contacto-inner">
          <div className="contacto-left">
            <div className="hero-eyebrow">Contacto</div>
            <h1 className="contacto-title">Contanos qué<br /><span className="hero-accent">necesitás proteger</span></h1>
            <p className="contacto-sub">Un especialista analiza tu caso y te arma una propuesta a medida. Sin compromiso y con respuesta en 24 horas.</p>

            <div className="contacto-channels">
              <a className="contacto-channel" href="tel:08102200477">
                <span className="contacto-channel-ic"><Icon name="phone" size={20} /></span>
                <span className="contacto-channel-txt"><span className="cc-label">Teléfono</span><span className="cc-value">0810-220-0477</span></span>
              </a>
              <a className="contacto-channel" href="mailto:info@gspseguridad.com.ar">
                <span className="contacto-channel-ic"><Icon name="mail" size={20} /></span>
                <span className="contacto-channel-txt"><span className="cc-label">Email</span><span className="cc-value">info@gspseguridad.com.ar</span></span>
              </a>
            </div>

            <div className="contacto-assure">
              <span><Icon name="clock" size={15} sw={2} /> Respuesta en 24 horas</span>
              <span><Icon name="check-circle" size={15} sw={2} /> Análisis de riesgo sin cargo</span>
            </div>

            <div className="contacto-presence">
              <span className="cp-label">Presencia</span>
              <div className="cp-chips">
                {zonas.map((z) => (
                  <span className="cp-chip" key={z}><Icon name="map-pin" size={13} sw={2} /> {z}</span>
                ))}
              </div>
            </div>
          </div>

          <div className="contacto-right">
            <ContactoFormCard />
            <div className="contacto-empleo">
              <span className="ce-text">¿Buscás empleo? Este formulario no es para eso.</span>
              <a className="ce-btn" href="https://empleo.gspseguridad.com.ar/" rel="nofollow">Trabajá con nosotros →</a>
            </div>
          </div>
        </div>
      </section>

      <section className="contacto-despedida">
        <div className="contacto-despedida-inner">
          <h2>Gracias por llegar hasta acá.</h2>
          <p>Lo que sigue es simple: contanos y nos ocupamos del resto.</p>
          <div className="contacto-creds">
            {['ISO 9001:2015', 'ANMaC', 'Prefectura Naval', 'ASIS International', '+20 años'].map((c) => (
              <span className="contacto-cred" key={c}>{c}</span>
            ))}
          </div>
        </div>
      </section>

      <footer className="contacto-footer-lite">
        <div className="cfl-inner">
          <a className="cfl-logo" href="index.html"><img src="gsp-logo.svg" alt="GSP Seguridad Privada" /></a>
          <div className="cfl-contact">
            <a href="tel:08102200477"><Icon name="phone" size={14} /> 0810-220-0477</a>
            <a href="mailto:info@gspseguridad.com.ar"><Icon name="mail" size={14} /> info@gspseguridad.com.ar</a>
          </div>
          <div className="cfl-social">
            <IconButton onDark aria-label="Facebook"><Icon name="facebook" size={15} stroke="none" style={{ fill: 'currentColor' }} /></IconButton>
            <IconButton onDark aria-label="Instagram"><Icon name="eye" size={15} /></IconButton>
          </div>
        </div>
        <div className="cfl-bottom">© 2026 GSP Seguridad y Tecnología S.R.L. · Seguridad integral basada en la gestión del riesgo.</div>
      </footer>
    </React.Fragment>
  );
}
window.Contacto = Contacto;