// Footer.jsx — Email signup + sitemap + giant wordmark. Adapted from TG site.

function TgFooter({ setView, onOpenQuiz }) {
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email.includes("@")) setSent(true);
  };

  return (
    <footer className="tg-footer">
      <div className="tg-footer__grid">
        <div className="tg-footer__lead">
          <h2>
            See you<br />
            <span className="script">there</span>.
          </h2>
          <p>
            Team Girl is a city-by-city social sports club. Watch parties, play dates,
            athlete dinners, drops. New cities every month.
          </p>
          {!sent ? (
            <form onSubmit={submit} className="tg-footer__form">
              <input
                type="email"
                required
                placeholder="your@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
              <button className="btn btn--cream" type="submit">Get on the list</button>
            </form>
          ) : (
            <div className="tg-footer__sent">
              <span className="spark">✦</span>
              You're on the list. See you there.
            </div>
          )}
        </div>

        <div className="tg-footer__cols">
          <div className="tg-footer__col">
            <h4>Team Girl</h4>
            <ul>
              <li><button onClick={() => setView("about")}>About</button></li>
              <li><button onClick={onOpenQuiz}>Take the quiz</button></li>
              <li><button onClick={() => setView("community")}>Community</button></li>
              <li><button onClick={() => setView("merch")}>Merch</button></li>
            </ul>
          </div>
          <div className="tg-footer__col">
            <h4>Cities</h4>
            <ul>
              {window.TG_CITIES.map(c => (
                <li key={c.id}><button onClick={() => setView("events")}>{c.name}</button></li>
              ))}
              <li><button onClick={() => setView("community")}>Start your city</button></li>
            </ul>
          </div>
          <div className="tg-footer__col">
            <h4>Follow</h4>
            <ul>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">TikTok</a></li>
              <li><a href="#">YouTube</a></li>
              <li><a href="#">WhatsApp</a></li>
            </ul>
          </div>
          <div className="tg-footer__col">
            <h4>Reach us</h4>
            <ul>
              <li><a href="mailto:hi@teamgirl.club">hi@teamgirl.club</a></li>
              <li><a href="#">Host with us</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">FAQ</a></li>
            </ul>
          </div>
        </div>
      </div>

      <div className="tg-footer__giant">team girl</div>

      <div className="tg-footer__bottom">
        <span>© Team Girl Club, 2026. We showed up.</span>
        <span>Privacy · Terms · Made with care.</span>
      </div>
    </footer>
  );
}

window.TgFooter = TgFooter;