// GSP Contact form + Locations.
function ContactForm({ empleo = false, formId }) {
  const Icon = window.Icon;
  // status: 'idle' | 'sending' | 'sent' | 'error'
  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);          // container del captcha
  const tsId = React.useRef(null);           // widgetId de Turnstile
  const fid = formId || (window.GSPForms ? window.GSPForms.pageFormId('contacto') : 'contacto');
  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: fid,
      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('[ContactForm] envío falló:', err && err.message);
      setStatus('error');
      if (window.GSPForms) window.GSPForms.resetTurnstile(tsId.current);
    });
  };

  const sent = status === 'sent';
  const sending = status === 'sending';
  const features = [
    ['Respuesta en 24 hs', 'Nos comprometemos a responder rápido.'],
    ['Sin compromiso', 'Cotización gratuita y sin obligación.'],
    ['Asesoramiento profesional', 'Un especialista analiza tu caso particular.'],
  ];
  return (
    <section className="section form-section" id="contacto">
      <div className="section-inner">
        <div className="form-wrapper">
          <window.Reveal>
            <div className="form-info">
              <Overline style={{ marginBottom: '.75rem' }}>Contacto</Overline>
              <h2>Solicitá tu cotización<br />sin compromiso</h2>
              <p className="subtitle">Completá el formulario y nuestro equipo te contactará en menos de 24 horas con una propuesta adaptada a tus necesidades.</p>
              {features.map(([h, p]) => (
                <div className="form-feature" key={h}>
                  <div className="form-feature-icon"><Icon name="check" size={16} sw={2} /></div>
                  <div><h4>{h}</h4><p>{p}</p></div>
                </div>
              ))}
            </div>
          </window.Reveal>
          <window.Reveal delay={0.2}>
            <div className="form-card">
              {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>
              ) : (
                <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..." value={form.mensaje} onChange={set('mensaje')} /></Field>
                  </div>
                  {/* honeypot anti-bot: oculto para humanos, invisible a lectores de pantalla */}
                  <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 className="form-error" style={{ color: 'var(--red-500)', fontSize: '.82rem', marginTop: '.6rem', textAlign: 'center' }}>No pudimos enviar tu consulta. Reintentá o escribinos por teléfono.</p>
                  )}
                  {empleo ? (
                    <div className="form-empleo">
                      <span className="fe-text">¿Buscás empleo? Este formulario no es para eso.</span>
                      <a className="fe-btn" href="https://empleo.gspseguridad.com.ar/" rel="nofollow">Trabajá con nosotros →</a>
                    </div>
                  ) : (
                    <p className="form-whatsapp">o escribinos por <a href="#">WhatsApp →</a></p>
                  )}
                </form>
              )}
            </div>
          </window.Reveal>
        </div>
      </div>
    </section>
  );
}
window.ContactForm = ContactForm;

function Locations() {
  const items = [
    ['Capital Federal', 'Centro operativo CABA', 'Vigilancia + Electrónica'],
    ['La Plata', 'Centro operativo PBA', 'Vigilancia'],
    ['Pinamar', 'Av. Constitución 1386', 'Sede central · Electrónica'],
    ['Gral. Madariaga', 'Centro operativo Costa', 'Vigilancia'],
  ];
  return (
    <section className="section locations">
      <div className="section-inner">
        <window.Reveal><SectionHeading overline="Presencia" title="Nuestras sucursales" /></window.Reveal>
        <div className="locations-grid">
          {items.map(([h, p, tag], i) => (
            <window.Reveal key={h} delay={0.1 * (i + 1)}>
              <Card hoverable className="location-card" padding="1.5rem">
                <h4>{h}</h4><p>{p}</p><Tag>{tag}</Tag>
              </Card>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Locations = Locations;