/* global React */
const { useState: useStateCB } = React;

window.ContactBlock = function ContactBlock({ onCta }) {
  const [name, setName] = useStateCB("");
  const [email, setEmail] = useStateCB("");
  const [sent, setSent] = useStateCB(false);
  const send = (e) => {
    e.preventDefault();
    if (!email) return;
    setSent(true);
    onCta && onCta({ name, email });
  };
  return (
    <section className="contact" id="about">
      <div className="section-inner">
        <header className="section-head">
          <EyebrowRow kicker="§ 04 — Briefing" />
          <h2>One 45-minute call. No deck required.</h2>
          <p className="lead">
            Tell us about the part of your week you'd most like back. We'll tell
            you honestly whether AI is the right answer — and if it isn't, what is.
          </p>
        </header>
        {sent ? (
          <div className="contact-sent">
            <Hairline w={28} />
            <h3>We'll be in touch within one business day.</h3>
            <p>A partner will reach out from a real email address.</p>
          </div>
        ) : (
          <form className="contact-form" onSubmit={send}>
            <div className="field">
              <label>Name</label>
              <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Anders Wahlberg" />
            </div>
            <div className="field">
              <label>Work email</label>
              <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="anders@example.com" type="email" required />
            </div>
            <Button as="button">Book a briefing</Button>
          </form>
        )}
      </div>
    </section>
  );
};