const CTA = () => {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [err, setErr] = React.useState('');

  const submit = (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setErr('Enter a valid email.');
      return;
    }
    setErr('');
    setSent(true);
  };

  return (
    <section id="cta" className="k-section k-section--cta" data-screen-label="CTA">
      <div className="k-container">
        <div className="k-cta">
          <div className="k-cta__copy">
            <span className="k-mono k-section__num">// 04 — get in touch</span>
            <h2 className="k-cta__title">
              Have an application worth building?<br />
              <span className="k-muted">We're open to the right collaborations.</span>
            </h2>
            <p className="k-cta__sub">
              Product ideas, partnerships, or a real-world problem you think we should look at. One thoughtful note a month, nothing more.
            </p>
          </div>

          {!sent ? (
            <form className="k-cta__form" onSubmit={submit} noValidate>
              <div className={`k-input ${err ? 'is-err' : ''}`}>
                <span className="k-mono k-input__prefix">$</span>
                <input
                  type="email"
                  placeholder="you@company.com"
                  value={email}
                  onChange={(e) => { setEmail(e.target.value); if (err) setErr(''); }}
                  aria-label="Email address"
                />
              </div>
              <button type="submit" className="k-btn k-btn--primary">
                Subscribe
                <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="square"/></svg>
              </button>
              {err && <span className="k-input__err k-mono">{err}</span>}
            </form>
          ) : (
            <div className="k-cta__sent">
              <span className="k-dot k-dot--live" />
              <span className="k-mono">subscribed — check your inbox.</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

window.CTA = CTA;