// CTA final — email directo
const CTA = () => {
  const [copied, setCopied] = React.useState(false);
  const email = 'contacto@loprogramamos.com';

  const handleCopy = async (e) => {
    e.preventDefault();
    try {
      await navigator.clipboard.writeText(email);
      setCopied(true);
      setTimeout(() => setCopied(false), 1600);
    } catch (_) {
      window.location.href = `mailto:${email}`;
    }
  };

  return (
    <section id="contacto" className="cta">
      <div className="container">
        <div className="cta__inner">
          <div className="eyebrow">contacto · directo</div>

          <h2 className="cta__title">
            ¿Tienes un proyecto?<br/>
            <em>Escríbenos.</em>
          </h2>

          <p className="cta__lead">
            Respondemos el mismo día. En la primera llamada te decimos si podemos ayudarte, un plazo estimado y un precio cerrado.
          </p>

          <div className="cta__email-row">
            <a href={`mailto:${email}?subject=Proyecto nuevo`} className="cta__email">
              <span className="cta__email-at">@</span>
              <span className="cta__email-text">{email}</span>
            </a>
            <button onClick={handleCopy} className="cta__copy mono" aria-label="Copiar email">
              {copied ? (
                <>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                  copiado
                </>
              ) : (
                <>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                  copiar
                </>
              )}
            </button>
          </div>

          <div className="cta__alt">
            <div className="cta__alt-item">
              <span className="mono dim">// ubicación</span>
              <span>Guadalajara, Jalisco · remoto</span>
            </div>
            <div className="cta__alt-item">
              <span className="mono dim">// horario</span>
              <span>Lun–Vie · 09:00–19:00</span>
            </div>
            <div className="cta__alt-item">
              <span className="mono dim">// respuesta</span>
              <span>Mismo día hábil</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.CTA = CTA;