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

/* ------------------------------------------------------------------
   Header — minimal: logo + CTA
------------------------------------------------------------------ */
function Header({ onJoinClick }) {
  return (
    <header className="header">
      <div className="header__row">
        <a className="logo" href="#top">
          <img className="logo__mark" src="v13.png" alt="" aria-hidden="true" />
          <span>Community</span>
        </a>
        <nav className="nav">
          <a
            href="#waitlist"
            className="btn btn--primary nav__cta"
            style={{ padding: "9px 16px", fontSize: 13.5 }}
            onClick={(e) => { e.preventDefault(); onJoinClick(); }}
          >Join waitlist</a>
        </nav>
      </div>
    </header>
  );
}

/* ------------------------------------------------------------------
   Hero — intentionally broad
------------------------------------------------------------------ */
function Hero({ headline }) {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero__inner">
          <div className="hero__logo-wrap" aria-hidden="true">
            <img className="hero__logo" src="v13.png" alt="" />
          </div>
          <span className="eyebrow">Private waitlist · Early access</span>
          <h1>
            <span className="gradient-text">{headline}</span>
          </h1>
          <p className="hero__lede">
            A new space for Music Wars Rockstar players and community members to stay connected and be part of what comes next.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------
   Waitlist form — email + optional name + interest
   POSTs to /api/subscribe (Vercel serverless function holds the key)
------------------------------------------------------------------ */
const INTEREST_OPTIONS = [
  { value: "music-wars", label: "Music Wars Rockstar" },
  { value: "charted",    label: "Charted" },
  { value: "fame-game",  label: "The Fame Game" },
  { value: "all",        label: "All of the above" },
];

function WaitlistForm() {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [interest, setInterest] = useState("music-wars");
  const [error, setError] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  async function submit(e) {
    e.preventDefault();
    setError("");
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());
    if (!ok) { setError("Please enter a valid email."); return; }

    setSubmitting(true);
    const tags = [interest, "early-access", "community"];

    try {
      const res = await fetch("/api/subscribe", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim(), name: name.trim(), tags })
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error || "Couldn't sign you up. Try again in a moment.");
      }
      setSubmitted(true);
    } catch (err) {
      setError(err.message || "Something went wrong.");
    } finally {
      setSubmitting(false);
    }
  }

  function reset() {
    setSubmitted(false);
    setEmail("");
    setName("");
  }

  if (submitted) {
    return (
      <section className="form-section" id="waitlist">
        <div className="container">
          <div className="form-card">
            <div className="confirm">
              <div className="confirm__mark" aria-hidden="true">
                <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
                  <path d="M6 13.5l4.5 4.5L20 8" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <h3>You're on the list.</h3>
              <p>We'll send updates when the Community is ready.</p>
              <div style={{ marginTop: 22 }}>
                <button type="button" className="btn btn--ghost" onClick={reset}>Sign up another email</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="form-section" id="waitlist">
      <div className="container">
        <form className="form-card" onSubmit={submit} noValidate>
          <div className="form-grid">
            <div className="field">
              <label className="field__label" htmlFor="wl-email">Email</label>
              <input
                id="wl-email"
                type="email"
                inputMode="email"
                autoComplete="email"
                placeholder="you@domain.com"
                className={"input" + (error ? " input--error" : "")}
                value={email}
                onChange={(e) => { setEmail(e.target.value); if (error) setError(""); }}
                required
              />
              {error && <div className="field__error">{error}</div>}
            </div>

            <div className="field">
              <label className="field__label" htmlFor="wl-name">
                Name <span className="field__optional">optional</span>
              </label>
              <input
                id="wl-name"
                type="text"
                placeholder="What should we call you?"
                className="input"
                value={name}
                onChange={(e) => setName(e.target.value)}
              />
            </div>

            <div className="field">
              <label className="field__label" htmlFor="wl-interest">
                I'm interested in <span className="field__optional">optional</span>
              </label>
              <select
                id="wl-interest"
                className="select"
                value={interest}
                onChange={(e) => setInterest(e.target.value)}
              >
                {INTEREST_OPTIONS.map(o => (
                  <option key={o.value} value={o.value}>{o.label}</option>
                ))}
              </select>
            </div>

            <button type="submit" className="btn btn--primary btn--lg" disabled={submitting}>
              {submitting ? "Saving…" : "Save my spot"}
            </button>

            <p className="form-meta">Get updates and early access when we're ready to open the doors.</p>
          </div>
        </form>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="container container--wide">
        <div className="footer__row">
          <div className="footer__credo">More soon.</div>
          <nav className="footer__links">
            <a href="#waitlist">Community Waitlist</a>
            <a href="#contact">Contact</a>
            <a href="#privacy">Privacy</a>
          </nav>
        </div>
        <div className="footer__fineprint">
          <span>© {year} The Community</span>
          <span>Private waitlist · Early access</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, WaitlistForm, Footer });