/* global React, window */
const { useState } = React;
const { Icon } = window;

const LeadMagnet = () => {
  const [sent, setSent] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => { setLoading(false); setSent(true); }, 900);
  };

  return (
    <section id="lead" data-theme="dark" className="section dark-section">
      <div className="painpoint-grid" />
      <div className="container" style={{ position: "relative" }}>
        <div className="lead reveal">
          <span className="lead-deco tl">◆ The Group / Agenda</span>
          <span className="lead-deco tr">2026 · Ediciones abiertas</span>
          <span className="lead-deco br">wa.me/+54 922 24533928</span>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".16em", textTransform: "uppercase", opacity: .7, marginBottom: 18 }}>DIAGNOSTICO EXPRESS · GRATIS </div>
            <h2 style={{ textWrap: "balance", maxWidth: "14ch" }}>
              ¿Empezamos a buscar tu <span className="serif-em" style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400 }}>diferencial?</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 17, lineHeight: 1.55, maxWidth: "44ch", opacity: .75 }}>
              Contanos en dos líneas qué hace tu marca. Si podemos ayudarte, te respondemos con un primer enfoque para que apliques directamente en tu negocio.
            </p>
          </div>
          <form className="lead-form" onSubmit={handleSubmit}>
            {sent ? (
              <div style={{ padding: "24px 0", textAlign: "center" }}>
                <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--accent)", color: "var(--accent-ink)", display: "grid", placeItems: "center", margin: "0 auto 16px" }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 6 }}>Recibido.</div>
                <div style={{ opacity: .6, fontSize: 14 }}>Te escribimos por WhatsApp en las próximas 24h.</div>
              </div>
            ) : (
              <>
                <div style={{ display: "flex", gap: 10, minWidth: 0 }}>
                  <input className="lead-input" type="text" autoComplete="given-name" placeholder="Nombre" style={{ flex: 1, minWidth: 0 }} />
                  <input className="lead-input" type="text" autoComplete="organization" placeholder="Marca" style={{ flex: 1, minWidth: 0 }} />
                </div>
                <input className="lead-input" type="tel" autoComplete="tel" placeholder="WhatsApp" />
                <textarea className="lead-input" placeholder="En dos líneas: ¿qué hace tu marca hoy?" rows={3} style={{ resize: "vertical", fontFamily: "inherit" }} />
                <button className="btn btn-lime" style={{ justifyContent: "center", marginTop: 4 }} type="submit" disabled={loading}>
                  {loading
                    ? <><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" style={{ animation: "spin 0.7s linear infinite" }}><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg> Enviando…</>
                    : <>Enviar y agendar <Icon name="arrow" size={14} /></>
                  }
                </button>
                <div className="lead-foot" style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase", textAlign: "center", marginTop: 6 }}>
                  Respondemos en el día · No spam · Ever
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

window.LeadMagnet = LeadMagnet;