/* FinalCTA.jsx + Footer.jsx — Last waitlist field + inverted footer. */

function FinalCTA() {
  const [sent, setSent] = React.useState(false);
  return (
    <section className="section" id="waitlist" data-screen-label="05 Final CTA">
      <div className="container">
        <div className="offer">
          <span className="eyebrow">Early access</span>
          <h3>Get on the waitlist.</h3>
          <p>We're letting people in slowly. Drop your email and we'll send your invite when it's your turn — no marketing, no drip, no sharing.</p>

          {sent ? (
            <p style={{
              marginTop:18, padding:'12px 16px',
              color:'#1F8B3D', fontSize:14, fontWeight:500,
              background:'rgba(52,199,89,.08)',
              border:'1px solid rgba(52,199,89,.25)', borderRadius:999, textAlign:'center',
            }}>
              ✓ You're on the list — we'll be in touch.
            </p>
          ) : (
            <form className="wl-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
              <input type="email" required placeholder="you@domain.com" aria-label="Email address" />
              <button className="btn btn--primary" type="submit">Join the waitlist</button>
            </form>
          )}

          <p className="micro">We'll email you once. You can unsubscribe in one click.</p>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot" role="contentinfo" data-screen-label="06 Footer">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-brand">
            <BrandMark />
            <span className="brand-name">Ordentus</span>
            <p className="blurb">One page for your life. Your calendars and your body, on the same screen, every morning.</p>
            <form className="foot-mini" onSubmit={e => e.preventDefault()}>
              <input type="email" placeholder="Email for the waitlist" required />
              <button type="submit">Join</button>
            </form>
          </div>
          <div className="foot-col">
            <h6>Product</h6>
            <ul>
              <li><a href="#calendar">Calendar</a></li>
              <li><a href="#health">Health</a></li>
              <li><a href="#how">How it works</a></li>
              <li><a href="#waitlist">Waitlist</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h6>Resources</h6>
            <ul>
              <li><a href="#">Docs</a></li>
              <li><a href="#">Changelog</a></li>
              <li><a href="#">Roadmap</a></li>
              <li><a href="#">Status</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h6>Company</h6>
            <ul>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#privacy">Privacy</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-rule">
          <span>© 2026 Ordentus.</span>
          <span className="ver">build 2026.05.13 · v5.5</span>
        </div>
      </div>
    </footer>
  );
}

window.FinalCTA = FinalCTA;
window.Footer = Footer;