// Contáctanos — abre el correo con el mensaje listo
function CTA() {
  const DESTINO = 'originatural.flowfam@gmail.com';
  const [motivo, setMotivo] = React.useState('Quiero sumarme');
  const [form, setForm] = React.useState({ nombre: '', whatsapp: '', mensaje: '' });
  const [enviado, setEnviado] = React.useState(false);

  const motivos = ['Quiero sumarme', 'Taller o clase', 'Evento / batalla', 'Alianza', 'Otro'];

  const buildMailto = () => {
    const asunto = `${motivo} — ${form.nombre || 'FlowFam'}`;
    const cuerpo = [
      `Nombre / alias: ${form.nombre}`,
      `WhatsApp: ${form.whatsapp}`,
      `Motivo: ${motivo}`,
      '',
      'Mensaje:',
      form.mensaje || '(sin mensaje)',
    ].join('\n');
    return `mailto:${DESTINO}?subject=${encodeURIComponent(asunto)}&body=${encodeURIComponent(cuerpo)}`;
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.nombre) return;
    window.location.href = buildMailto();
    setEnviado(true);
  };

  return (
    <section id="cta" className="py-20 lg:py-28 bg-bone-100 border-y-2 border-ink-900 relative overflow-hidden">
      <div aria-hidden className="absolute inset-x-0 -bottom-10 font-display text-ink-900/10 text-[clamp(140px,24vw,380px)] leading-[0.8] text-center pointer-events-none select-none">
        ESCRÍBENOS
      </div>

      <div className="max-w-[1400px] mx-auto px-5 lg:px-10 relative">
        <div className="grid lg:grid-cols-12 gap-10 lg:gap-16 items-start">

          <div className="lg:col-span-6 reveal">
            <div className="font-mono text-[10px] tracking-[0.28em] uppercase text-ink-900 mb-3">
              07 — CONTÁCTANOS
            </div>
            <h2 className="font-display text-[clamp(56px,9vw,150px)] text-ink-900 leading-[1.02]">
              Manda<br/>
              <span className="inline-block bg-ink-900 text-fire-500 px-2 py-1 leading-none">un correo.</span>
            </h2>
            <p className="mt-7 max-w-[42ch] text-[16px] leading-relaxed text-ink-900">
              Escribe para sumarte, pedir un taller, invitarnos a un evento o proponer una alianza.
              Respondemos en menos de 24 horas.
            </p>

            <a
              href={`mailto:${DESTINO}`}
              className="mt-7 btn-ink inline-flex items-center gap-2 px-5 py-3 text-[12.5px] uppercase tracking-[0.1em]"
            >
              <Icon name="mail" size={15} />
              {DESTINO}
            </a>

            <div className="mt-8 flex flex-col gap-2 text-[14px] text-ink-900">
              <div className="flex items-center gap-3"><Icon name="map_pin" size={16} /> Pudahuel · Estación Central · Cerro Navia</div>
              <div className="flex items-center gap-3"><Icon name="calendar" size={16} /> Junta semanal · todos los sábados</div>
            </div>
          </div>

          <div className="lg:col-span-6 reveal">
            <div className="bg-bone-100 border-2 border-ink-900 p-6 lg:p-8" style={{ boxShadow: '12px 12px 0 0 #05050C' }}>
              {!enviado ? (
                <form onSubmit={onSubmit} className="grid gap-5">
                  <div>
                    <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink-900/70 mb-2">Motivo</div>
                    <div className="flex flex-wrap gap-1.5">
                      {motivos.map(m => (
                        <button
                          key={m}
                          type="button"
                          onClick={() => setMotivo(m)}
                          className={
                            'px-3 py-1.5 text-[11px] uppercase tracking-[0.12em] font-medium border-2 border-ink-900 transition ' +
                            (motivo === m ? 'bg-ink-900 text-bone-100' : 'bg-bone-100 text-ink-900 hover:bg-electric-500 hover:text-bone-100')
                          }
                        >
                          {m}
                        </button>
                      ))}
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <Field label="Nombre / alias" value={form.nombre}   onChange={v => setForm({...form, nombre: v})}   placeholder="Lalo, Mc Vega..." />
                    <Field label="WhatsApp"       value={form.whatsapp} onChange={v => setForm({...form, whatsapp: v})} placeholder="+56 9 ..." />
                  </div>
                  <Field label="Mensaje" value={form.mensaje} onChange={v => setForm({...form, mensaje: v})} placeholder="Cuéntanos brevemente..." textarea />

                  <div className="flex flex-wrap items-center justify-between gap-4 pt-1">
                    <div className="font-mono text-[10px] tracking-[0.16em] uppercase text-ink-900/60 max-w-[24ch]">
                      Se abre tu correo con el mensaje listo
                    </div>
                    <button
                      type="submit"
                      disabled={!form.nombre}
                      className="btn-ink inline-flex items-center gap-2 px-5 py-3 text-[12px] uppercase tracking-[0.1em] disabled:opacity-40 disabled:cursor-not-allowed"
                    >
                      <Icon name="mail" size={14} />
                      Enviar correo
                    </button>
                  </div>
                </form>
              ) : (
                <div className="py-6 text-center">
                  <div className="mx-auto w-14 h-14 bg-ink-900 text-fire-500 grid place-items-center mb-5">
                    <Icon name="mail" size={24} stroke={2} />
                  </div>
                  <h3 className="font-display text-[38px] text-ink-900 leading-[1.05]">CORREO PREPARADO</h3>
                  <p className="mt-3 text-[14px] text-ink-900/80 max-w-[40ch] mx-auto">
                    Se abrió tu aplicación de correo con el mensaje dirigido a{' '}
                    <span className="font-mono">{DESTINO}</span>. Solo dale enviar.
                  </p>
                  <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
                    <a href={buildMailto()} className="btn-fire inline-flex items-center gap-2 px-4 py-2.5 text-[11px] uppercase tracking-[0.1em]">
                      Abrir de nuevo
                    </a>
                    <button
                      onClick={() => { setEnviado(false); setForm({ nombre:'', whatsapp:'', mensaje:'' }); }}
                      className="btn-outline inline-flex items-center gap-2 px-4 py-2.5 text-[11px] uppercase tracking-[0.1em]">
                      Escribir otro
                    </button>
                  </div>
                </div>
              )}
            </div>

            <div className="mt-4 flex items-center justify-between font-mono text-[10px] tracking-[0.18em] uppercase text-ink-900/70 px-1">
              <span>· no spam · no datos vendidos ·</span>
              <span>v.2026</span>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

function Field({ label, value, onChange, placeholder, textarea = false }) {
  const cls = "w-full px-3.5 py-2.5 bg-bone-50 border-2 border-ink-900 text-[14px] text-ink-900 placeholder:text-ink-900/30 focus:outline-none focus:bg-fire-500/25 transition";
  return (
    <label className="block">
      <div className="font-mono text-[10px] tracking-[0.22em] uppercase text-ink-900/70 mb-1.5">{label}</div>
      {textarea
        ? <textarea rows={3} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} className={cls + ' resize-none'} />
        : <input type="text" value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} className={cls} />}
    </label>
  );
}

window.CTA = CTA;