// Section 10 — Final CTA + Section 10.5 — Email capture.

const FinalCTASection = () => (
  <section className="section final-cta-section" id="apply">
    <div className="wide">
      <div className="final-cta-inner">
        <h2 className="final-h">
          You've read the page.<br />
          Now pick a programme.
        </h2>

        <p className="final-restate">
          Grade up. <Scribble>Or money back.</Scribble>
        </p>

        <div className="final-buttons">
          <a className="btn black" href="#apply-essay" onClick={(e) => { e.preventDefault(); openApplyFlow({ programme: 'essay' }); }}>
            Apply — Essay Intensive <Icon name="arrow-right" />
          </a>
          <a className="btn black" href="#apply-component" onClick={(e) => { e.preventDefault(); openApplyFlow({ programme: 'component' }); }}>
            Apply — Component Intensive <Icon name="arrow-right" />
          </a>
        </div>

        <p className="final-tertiary">
          <b>Not sure which?</b> Mention it on the application; we'll route you.
        </p>

        <p className="final-secondary">
          Just need a session?{" "}
          <a className="text-link" href="#coaching">
            <span className="scribble-arrow">Book Office Hours <Icon name="arrow-right" /></span>
          </a>
        </p>

        <div className="final-micro">
          <span>August 2026 cohort</span>
          <span className="divider">·</span>
          <span>Rolling 1:1 intake</span>
          <span className="divider">·</span>
          <span>Year-round coaching</span>
        </div>
      </div>
    </div>
  </section>
);

const EmailCaptureStrip = () => {
  const [email, setEmail] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [done, setDone] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setBusy(true);
    const result = await submitToConvertKit({
      email,
      fields: { signup_source: 'intensives-page-strip' },
      tags: ['intensives-waitlist'],
    });
    setBusy(false);
    if (result.ok) setDone(true);
  };

  return (
    <section className="section email-capture-section">
      <div className="wide">
        <div className="email-strip">
          <div className="eyebrow">Stay in the loop</div>
          <h3 className="email-h">Not ready yet? Get the email when the next cohort opens.</h3>
          <p className="email-body">One email when the next cohort opens, and one when pricing changes. That's it.</p>

          {!done ? (
            <form className="email-form" onSubmit={submit}>
              <input
                type="email" required value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="your@email.com"
                aria-label="Email address"
              />
              <button type="submit" className="btn purple" disabled={busy}>
                {busy ? "Sending…" : <>Notify me <Icon name="arrow-right" /></>}
              </button>
            </form>
          ) : (
            <div className="email-confirm">
              <Icon name="check-circle-2" />
              <span>You're on the list. We'll email when the next cohort opens.</span>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FinalCTASection, EmailCaptureStrip });