// Contact — form + info
function Contact() {
  const [form, setForm] = useState({
    nombre: '', contacto: '', tipo: 'Tatuaje',
    estilo: 'Black & Grey', zona: 'Brazo',
    descripcion: '', website: ''
  });
  const [sending, setSending] = useState(false);
  const [error, setError] = useState('');
  const submitTimes = useRef([]);

  const change = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = (e) => {
    e.preventDefault();
    // honeypot
    if (form.website) return;
    // rate limit
    const now = Date.now();
    submitTimes.current = submitTimes.current.filter(t => now - t < 60000);
    if (submitTimes.current.length >= 3) {
      setError('Por favor espera un momento...');
      return;
    }
    // validate
    if (form.nombre.trim().length < 3) {
      setError('Ingresa tu nombre (mínimo 3 caracteres).');
      return;
    }
    setError('');
    setSending(true);
    const n = sanitizeForm(form.nombre).slice(0, 60);
    const c = sanitizeForm(form.contacto).slice(0, 120);
    const d = sanitizeForm(form.descripcion);
    const extra = form.tipo === 'Tatuaje' ? ` Estilo: ${form.estilo}.` : '';
    const msg = `Hola Edwin, soy ${n} (${c}). Me interesa: ${form.tipo}.${extra} Zona: ${form.zona}. ${d}`;
    submitTimes.current.push(now);
    setTimeout(() => {
      window.open(waLink(msg), '_blank', 'noopener,noreferrer');
      setSending(false);
    }, 300);
  };

  const infos = [
    { icon: <Icon.WhatsApp/>, label: 'WhatsApp', value: '+502 4666 4086',
      href: waLink('Hola Edwin, quiero agendar una cita') },
    { icon: <Icon.Instagram/>, label: 'Instagram', value: '@isfer502_tattoos', href: IG_URL },
    { icon: <Icon.TikTok/>, label: 'TikTok', value: '@isfer502', href: TT_URL },
    { icon: <Icon.Pin/>, label: 'Ubicación', value: 'Hype Tattoo Collective, Quetzaltenango', href: MAP_URL },
    { icon: <Icon.Clock/>, label: 'Horario', value: 'Lunes a Sábado · previa cita', href: null },
  ];

  return (
    <section id="contacto">
      <Reveal><div className="label-tag">Contacto</div></Reveal>
      <Reveal delay={0.1}>
        <h2 style={{ fontSize: 'clamp(40px, 6vw, 84px)', marginTop: 16, lineHeight: 1 }}>
          Agenda tu <em style={{ color: 'var(--ink-red-bright)' }}>cita.</em>
        </h2>
      </Reveal>
      <Reveal delay={0.15}>
        <p className="italic-lead" style={{ fontSize: 22, color: 'var(--white)', opacity: 0.7, marginTop: 12 }}>
          ¿Listo para llevar arte en tu piel?
        </p>
      </Reveal>

      <div style={{
        marginTop: 64, display: 'grid',
        gridTemplateColumns: '1fr 1.2fr', gap: 48,
      }} className="contact-grid">
        {/* Left */}
        <div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {infos.map((info, i) => {
              const Wrap = info.href ? 'a' : 'div';
              return (
                <Reveal key={info.label} delay={i * 0.06}>
                  <Wrap
                    href={info.href || undefined}
                    target={info.href ? '_blank' : undefined}
                    rel={info.href ? 'noopener noreferrer' : undefined}
                    style={{
                      display: 'flex', gap: 20, padding: '20px 0',
                      borderBottom: '1px solid rgba(139,0,0,0.15)',
                      alignItems: 'center',
                    }}
                  >
                    <div style={{
                      width: 44, height: 44, border: '1px solid rgba(139,0,0,0.4)',
                      display: 'grid', placeItems: 'center', color: 'var(--ink-red-bright)',
                      flexShrink: 0,
                    }}>{info.icon}</div>
                    <div>
                      <div style={{
                        fontFamily: 'var(--font-accent)', fontSize: 11,
                        letterSpacing: '0.25em', color: 'var(--gray)',
                      }}>{info.label.toUpperCase()}</div>
                      <div style={{ color: 'var(--white)', fontSize: 15, marginTop: 4 }}>
                        {info.value}
                      </div>
                    </div>
                  </Wrap>
                </Reveal>
              );
            })}
          </div>

          <Reveal delay={0.4}>
            <div style={{
              marginTop: 32, padding: 28,
              background: 'linear-gradient(135deg, #8B0000 0%, #3a0808 100%)',
              border: '1px solid var(--ink-red-bright)', position: 'relative',
            }} className="corner-marks">
              <span className="cm-a"/><span className="cm-b"/>
              <div className="label-tag" style={{ color: 'var(--white)' }}>
                Respuesta rápida
              </div>
              <p style={{
                marginTop: 12, color: 'var(--white)',
                fontFamily: 'var(--font-heading)', fontStyle: 'italic',
                fontSize: 20, lineHeight: 1.5,
              }}>
                La mejor forma de contactarme es por WhatsApp.
                Respondo en menos de 2 horas.
              </p>
              <a
                href={waLink('Hola Edwin, quiero agendar una cita para un tatuaje')}
                target="_blank" rel="noopener noreferrer"
                className="btn btn-ghost"
                style={{ marginTop: 20, borderColor: 'var(--white)' }}
              ><Icon.WhatsApp/> Escribir por WhatsApp</a>
            </div>
          </Reveal>
        </div>

        {/* Right — form */}
        <Reveal delay={0.2}>
          <form onSubmit={handleSubmit} className="card contact-form" style={{ padding: 24 }}>
            <input
              name="website" value={form.website} onChange={change('website')}
              style={{ display: 'none' }} tabIndex={-1} autoComplete="off"
              aria-hidden="true"
            />
            <div style={{ display: 'grid', gap: 20 }}>
              <div>
                <label>Nombre completo</label>
                <input type="text" maxLength={60} value={form.nombre} onChange={change('nombre')} required/>
              </div>
              <div>
                <label>WhatsApp o Instagram</label>
                <input type="text" maxLength={120} value={form.contacto} onChange={change('contacto')} placeholder="+502 o @usuario"/>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div>
                  <label>Tipo</label>
                  <select value={form.tipo} onChange={change('tipo')}>
                    <option>Tatuaje</option>
                    <option>Piercing</option>
                    <option>Joyería</option>
                    <option>Otro</option>
                  </select>
                </div>
                {form.tipo === 'Tatuaje' && (
                  <div>
                    <label>Estilo</label>
                    <select value={form.estilo} onChange={change('estilo')}>
                      <option>Black & Grey</option>
                      <option>Blackwork</option>
                      <option>Fineline</option>
                      <option>No sé aún</option>
                    </select>
                  </div>
                )}
                <div style={{ gridColumn: form.tipo === 'Tatuaje' ? undefined : 'span 2' }}>
                  <label>Zona del cuerpo</label>
                  <select value={form.zona} onChange={change('zona')}>
                    <option>Brazo</option><option>Pierna</option>
                    <option>Espalda</option><option>Pecho</option>
                    <option>Oreja</option><option>Otro</option>
                  </select>
                </div>
              </div>
              <div>
                <label>Describe tu idea</label>
                <textarea maxLength={500} value={form.descripcion} onChange={change('descripcion')}
                  placeholder="Tamaño aproximado, referencias, fechas..."/>
              </div>
              {error && <div style={{ color: 'var(--ink-red-bright)', fontSize: 13 }}>{error}</div>}
              <button
                type="submit" disabled={sending}
                className="btn btn-primary"
                style={{ opacity: sending ? 0.6 : 1, justifyContent: 'center' }}
              >
                <Icon.WhatsApp/> {sending ? 'Enviando…' : 'Enviar por WhatsApp'}
              </button>
              <p style={{ fontSize: 11, color: 'var(--gray)', textAlign: 'center', marginTop: -4 }}>
                Tu mensaje se abre en WhatsApp. No guardamos tus datos.
              </p>
            </div>
          </form>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
        @media (max-width: 600px) {
          .contact-form { padding: 18px !important; }
          .contact-form input, .contact-form select, .contact-form textarea { padding: 11px 12px !important; }
        }
      `}</style>
    </section>
  );
}

window.Contact = Contact;