// ADOS website — Contact / consultoría
const { Button, Input, Select, Checkbox, Callout, Tag } = window.ADOSDesignSystem_5aafbb;

// El formulario hace POST a /api/contact (función serverless en Vercel) que
// envía el correo vía Resend. En desarrollo local no existe /api → el envío
// muestra el aviso de error; solo funciona en el sitio publicado.

// Textarea con la misma piel que el Input del design system (el DS no trae
// componente Textarea; esta versión local usa la clase .ados-textarea).
function TextArea({ label, id, style = {}, ...rest }) {
  const areaId = id || (label ? `ta-${label.replace(/\s+/g, '-').toLowerCase()}` : undefined);
  return (
    <label htmlFor={areaId} style={{ display: 'block', fontFamily: 'var(--font-body)' }}>
      {label && (
        <span style={{ display: 'block', fontSize: 12, fontWeight: 500, letterSpacing: '0.04em', color: 'var(--text-muted)', marginBottom: 8 }}>
          {label}
        </span>
      )}
      <textarea id={areaId} className="ados-textarea" rows={4}
        style={{
          width: '100%', padding: '11px 14px', resize: 'vertical', minHeight: 96,
          background: 'var(--ados-navy-950)', color: 'var(--text)',
          fontFamily: 'var(--font-body)', fontSize: 14, lineHeight: 1.55,
          border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-ui)',
          transition: 'border-color var(--dur-fast), box-shadow var(--dur-fast)',
          ...style,
        }}
        {...rest} />
    </label>
  );
}

function ContactSection({ onNavigate }) {
  // idle | sending | sent | error
  const [status, setStatus] = React.useState('idle');
  const sent = status === 'sent';

  const handleSubmit = (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    const data = Object.fromEntries(new FormData(e.target).entries());
    fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })
      .then((r) => { if (!r.ok) throw new Error('HTTP ' + r.status); setStatus('sent'); })
      .catch((err) => { console.error('Contacto:', err); setStatus('error'); });
  };

  const wrap = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--pad-x)' };
  return (
    <React.Fragment>
      <section style={{ background: 'var(--bg-deep)' }}>
      <div className="w-split" style={{ ...wrap, padding: 'clamp(56px, 8vw, 72px) var(--pad-x) 96px' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Solicitar consultoría</div>
          <h1 style={{ fontSize: 'clamp(32px, 5vw, 48px)', letterSpacing: '-0.03em', margin: '0 0 20px' }}>Hablemos de su modelo</h1>
          <p style={{ color: 'var(--text-muted)', fontSize: 17, lineHeight: 1.65, maxWidth: 420, margin: '0 0 36px' }}>
            Cuéntenos qué quiere construir. Le respondemos con un alcance BIM concreto:
            disciplinas, nivel de detalle y entregables.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 380 }}>
            {[['Correo', 'adosiyc@hotmail.com'], ['WhatsApp', '+57 310 233 5153'], ['Ubicación', 'Colombia'], ['Sector', 'Público y privado']].map(([k, v]) => (
              <div key={k} style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: 16, borderBottom: '1px solid var(--border)' }}>
                <span style={{ fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--text-faint)' }}>{k}</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 15 }}>{v}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 28, display: 'flex', gap: 8 }}>
            <Tag tone="default">Revit</Tag><Tag tone="default">Civil 3D</Tag><Tag tone="default">Enscape</Tag>
          </div>
        </div>

        <div style={{ background: 'linear-gradient(to top, #0C0F12 0%, #1a2230 100%)', border: '1px solid var(--border)', borderRadius: 'var(--radius-ui)', padding: 32 }}>
          {sent ? (
            <Callout tone="success" title="Solicitud enviada">
              Gracias. Revisamos su proyecto y le escribimos a la brevedad con un alcance preliminar.
            </Callout>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              {/* honeypot anti-spam: invisible para personas; los bots lo llenan y el API descarta el envío */}
              <input type="text" name="sitio_web" tabIndex={-1} autoComplete="off" aria-hidden="true"
                style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
              <div className="w-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                <Input label="Nombre" name="nombre" placeholder="Su nombre" required />
                <Input label="Organización" name="organizacion" placeholder="Empresa / entidad" />
              </div>
              <Input label="Correo" name="correo" type="email" placeholder="correo@dominio.co" required />
              <Select label="Disciplina principal" name="disciplina" options={['Estructural', 'Hidrosanitario', 'Arquitectura', 'MEP coordinado', 'Varias disciplinas']} />
              <TextArea label="Cuéntenos del proyecto" name="mensaje" placeholder="Tipo de obra, ubicación, plazos…" />
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 2 }}>
                <Checkbox label="Necesito renders fotorrealistas (Enscape)" name="renders" value="Sí" defaultChecked />
                <Checkbox label="Requiero detección de interferencias" name="interferencias" value="Sí" />
              </div>
              {status === 'error' && (
                <Callout tone="danger" title="No se pudo enviar">
                  Inténtelo de nuevo, o escríbanos directo a adosiyc@hotmail.com.
                </Callout>
              )}
              <Button variant="primary" size="lg" type="submit" fullWidth disabled={status === 'sending'}>
                {status === 'sending' ? 'Enviando…' : 'Enviar solicitud'}
              </Button>
            </form>
          )}
        </div>
      </div>
      </section>
    </React.Fragment>
  );
}

window.ContactSection = ContactSection;