/* global React, GuideSignupForm, GuideSignupSuccess, AYLA_WAITLIST */
const { useState, useEffect } = React;

function Waitlist({ setRoute }) {
  const [done, setDone] = useState(false);

  useEffect(() => {
    if (!done) return;
    requestAnimationFrame(() => {
      window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
    });
  }, [done]);

  const handleSuccess = () => {
    setDone(true);
  };

  return (
    <div className="page">
      <section className="gf-wrap">
        <header className="gf-head">
          <span className="eyebrow">The Cycle Guide · Waitlist</span>
          {!done && (
            <>
              <h1>Join the waitlist. Get the guide.</h1>
              <p className="lede">
                Sign up for early access to Ayla and we&apos;ll send you{' '}
                <span className="it">The Cycle Guide</span>: a practical read on each phase,
                what to eat, when to move, and how to advocate for yourself at the doctor's office.
              </p>
            </>
          )}
        </header>

        {!done ? (
          <GuideSignupForm
            setRoute={setRoute}
            onSuccess={handleSuccess}
            submitLabel="Get the Cycle Guide"
          />
        ) : (
          <GuideSignupSuccess />
        )}
      </section>
    </div>
  );
}

window.Waitlist = Waitlist;