/* global React */
const { useState: useStateB, useEffect: useEffectB } = React;

/* ============================ THE CRAFT / THE WAIT (dark) ============================ */
function TheCraft() {
  const phases = [
    "Reading the room…",
    "Finding the angle…",
    "Sketching the concept…",
    "Designing your one-of-a-kind print…",
    "Almost there…",
  ];
  const [i, setI] = useStateB(0);
  useEffectB(() => {
    const id = setInterval(() => setI((p) => (p + 1) % phases.length), 1800);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="section craft dark" id="craft">
      <div className="shell">
        <div className="sec-head sec-head--center reveal">
          <span className="idx">02</span>
          <p className="eyebrow">The craft · Beta</p>
        </div>
        <h2 className="display reveal" data-d="1">Good things take a <em>minute.</em></h2>
        <p className="body-lg reveal" data-d="2">
          Every design is generated to order, one at a time and just for you. That process takes
          up to <strong>90 seconds</strong>, and because we're in early access, the occasional
          one may take a touch longer. No two are ever the same.
        </p>

        <div className="gen reveal" data-d="2" aria-hidden="true">
          <div className="gen-label">
            <span>{phases[i]}</span>
            <span>~0:90</span>
          </div>
          <div className="gen-track"><div className="gen-fill"></div></div>
        </div>

        <p className="craft-foot reveal" data-d="3">
          Worth the wait — it's a hoodie nobody else on earth will have.
        </p>
      </div>
    </section>
  );
}

/* ============================ MEANING ============================ */
function Meaning() {
  return (
    <section className="section meaning" id="meaning">
      <div className="shell">
        <div className="sec-head reveal">
          <span className="idx">03</span>
          <hr className="rule" />
          <p className="eyebrow">Why it matters</p>
        </div>
        <h2 className="display reveal" data-d="1">This actually <em>means</em> something.</h2>
        <div className="meaning-foot">
          <p className="eyebrow reveal" data-d="2">Worn, not explained</p>
          <p className="body body-lg reveal" data-d="2">
            Roast &amp; Toast turns real relationships, inside jokes, and the moments that
            matter into something you can actually wear and keep. Some people get the
            reference instantly. Others ask. Either way, it starts a conversation.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ============================ FINAL CTA / CREATE ============================ */
function FinalCta() {
  return (
    <section className="section cta-final" id="create">
      <div className="shell">
        <div className="cta-grid">
          <div className="cta-media reveal">
            <image-slot id="rt-cta" fit="cover" src="images/cta-opt.png"
              placeholder="CLOSING — hero hoodie on a clean warm backdrop, or worn in-context · the money shot"></image-slot>
          </div>
          <div className="cta-copy">
            <p className="eyebrow reveal accent">Early access · Beta</p>
            <h2 className="display reveal" data-d="1">Make the one that doesn't exist yet.</h2>
            <p className="body-lg reveal" data-d="2">
              Answer a few prompts, let the AI design it, and preview it on the hoodie before you commit.
            </p>
            <div className="reveal" data-d="2">
              <a className="btn" href="https://roastandtoast.softr.app">
                Create My Hoodie <span className="arrow">&rarr;</span>
              </a>
              <p className="cta-note">Free to design · pay only when you love it · generation takes up to ~90 seconds</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ FOOTER ============================ */
function Footer() {
  const [email, setEmail] = useStateB("");
  const [done, setDone] = useStateB(false);
  const submit = (e) => {
    e.preventDefault();
    if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) setDone(true);
  };
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-top">
          <div>
            <h3 className="reveal">Not ready yet? Get on the early list.</h3>
            <form className={"news reveal" + (done ? " ok" : "")} data-d="1" onSubmit={submit}>
              <input type="email" value={email} disabled={done}
                onChange={(e) => setEmail(e.target.value)}
                placeholder={done ? "You're on the list." : "Email address"} />
              <button type="submit" aria-label="Subscribe">&rarr;</button>
            </form>
            <p className="news-msg">{done ? "You're in — we'll send you the good stuff, never spam." : ""}</p>
          </div>
          <div className="footer-cols reveal" data-d="2">
            <div className="footer-col">
              <h5>Product</h5>
              <a href="#how" onClick={(e) => { e.preventDefault(); window.scroll({ top: document.querySelector('#how').offsetTop - 8, behavior: 'smooth' }); }}>How it works</a>
              <a href="#craft" onClick={(e) => { e.preventDefault(); window.scroll({ top: document.querySelector('#craft').offsetTop - 8, behavior: 'smooth' }); }}>The craft</a>
              <a href="#create" onClick={(e) => { e.preventDefault(); window.scroll({ top: document.querySelector('#create').offsetTop - 8, behavior: 'smooth' }); }}>Create</a>
              <a href="Stories.html">Stories</a>
            </div>
            <div className="footer-col">
              <h5>Connect</h5>
              <a href="#">Instagram</a>
              <a href="#">TikTok</a>
              <a href="#">Contact</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span className="wordmark" style={{ color: "var(--bone)" }}>Roast<span className="amp">&amp;</span>Toast</span>
          <span>&copy; 2026 · Early access · Made to order</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TheCraft, Meaning, FinalCta, Footer });