// Community.jsx — Social wall, platforms, WhatsApp, newsletter.

function TgCommunity({ setView }) {
  return (
    <main>
      {/* HERO */}
      <section className="tg-comm-hero" style={{ backgroundImage: "url(assets/gradients/gradient-05.jpg)" }}>
        <span className="eyebrow eyebrow--light"><span className="spark">✦</span> The community</span>
        <h1>Follow the<br/><span className="script">girls</span>.</h1>
        <p>Six WhatsApp circles. A Sunday newsletter. Instagram, TikTok, YouTube. Subscribe to one, two, or all of it — we're somewhere on the timeline most days.</p>
        <span style={{ position: "absolute", top: 32, right: 32, fontSize: 42, color: "var(--tg-cream)", transform: "rotate(15deg)" }}>✦</span>
        <span style={{ position: "absolute", bottom: 40, right: 120, fontSize: 24, color: "var(--tg-cream)", transform: "rotate(-10deg)" }}>✦</span>
      </section>

      {/* PLATFORMS */}
      <section className="section">
        <div className="container">
          <div className="section-head" style={{ textAlign: "left" }}>
            <span className="eyebrow"><span className="spark">✦</span> The platforms</span>
            <h2>Pick your <span className="script">poison</span>.</h2>
          </div>
          <div className="tg-platforms">
            {window.TG_PLATFORMS.map((p, i) => {
              const bg = ["var(--tg-magenta)", "var(--tg-ink)", "var(--tg-orange)", "#25D366", "var(--tg-cream)"][i];
              const fg = i === 4 ? "var(--tg-ink)" : "var(--tg-cream)";
              return (
                <a key={p.name} href="#" className="tg-platform" style={{ background: bg, color: fg }}>
                  <div className="tg-platform__name" style={{ color: fg, opacity: 0.75 }}>{p.name}</div>
                  <div className="tg-platform__handle">{p.handle}</div>
                  <div className="tg-platform__followers" style={{ color: fg, opacity: 0.85 }}>{p.followers}</div>
                  <div className="tg-platform__arrow" style={{ color: fg }}>→</div>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {/* SOCIAL WALL */}
      <section className="section--tight" style={{ padding: "20px 0 60px" }}>
        <div className="section-head--row">
          <div>
            <span className="eyebrow"><span className="spark">✦</span> Seen on the timeline</span>
            <h2>@teamgirl · <span className="script">live</span></h2>
          </div>
          <a href="#" className="link-underline">Follow on Instagram →</a>
        </div>
        <div className="container">
          <div className="tg-social-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
            {window.TG_SOCIAL_POSTS.map((p, i) => (
              <div key={i} className="tg-social-card" style={{ backgroundImage: `url(${p.bg})` }}>
                <span className="tg-social-card__platform">{p.platform}</span>
                <div className="tg-social-card__overlay">
                  <div className="tg-social-card__caption">{p.caption}</div>
                  <div className="tg-social-card__meta">{p.meta}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHATSAPP */}
      <section className="section--tight">
        <div className="container">
          <div className="tg-whatsapp">
            <div>
              <span className="eyebrow">★ Members-only</span>
              <h3>Join your city's <br/>group chat.</h3>
              <p>Each city has its own WhatsApp circle. Small — usually 80-200 girls. Plans for the week, ride-shares to the venue, recap photos the morning after. We add people one at a time. Pick your city to request in.</p>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 20 }}>
                {window.TG_CITIES.slice(0, 4).map(c => (
                  <button key={c.id} className="btn btn--ink btn--sm">{c.name} circle</button>
                ))}
                <button className="btn btn--ghost btn--sm">All six cities</button>
              </div>
            </div>
            <div style={{ position: "relative", aspectRatio: "1/1", borderRadius: 20, background: "var(--tg-ink)", color: "var(--tg-cream)", padding: 20, fontFamily: "var(--font-sans)", overflow: "hidden" }}>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
                <div style={{ alignSelf: "flex-start", maxWidth: "75%", background: "var(--tg-magenta)", padding: "8px 12px", borderRadius: "14px 14px 14px 4px" }}>
                  <strong style={{ display: "block", fontSize: 10, opacity: 0.85, letterSpacing: "0.1em", textTransform: "uppercase" }}>Anu · Mumbai</strong>
                  Game night Friday at Bandra Social. Who's pulling up?
                </div>
                <div style={{ alignSelf: "flex-end", maxWidth: "70%", background: "rgba(255,249,215,0.15)", padding: "8px 12px", borderRadius: "14px 14px 4px 14px" }}>
                  Me + 1, on the train already
                </div>
                <div style={{ alignSelf: "flex-end", maxWidth: "70%", background: "rgba(255,249,215,0.15)", padding: "8px 12px", borderRadius: "14px 14px 4px 14px" }}>
                  Save us the corner booth
                </div>
                <div style={{ alignSelf: "flex-start", maxWidth: "75%", background: "var(--tg-magenta)", padding: "8px 12px", borderRadius: "14px 14px 14px 4px" }}>
                  <strong style={{ display: "block", fontSize: 10, opacity: 0.85, letterSpacing: "0.1em", textTransform: "uppercase" }}>Riya</strong>
                  bringing fizz 🥂
                </div>
              </div>
              <div style={{ position: "absolute", bottom: 12, left: 12, right: 12, padding: "10px 14px", background: "rgba(255,249,215,0.95)", color: "var(--tg-ink)", borderRadius: 999, fontSize: 12, fontWeight: 600 }}>
                Mumbai Circle · 142 members · 8 online
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* UGC WALL */}
      <section className="section" style={{ padding: "100px 0 40px" }}>
        <div className="section-head--row">
          <div>
            <span className="eyebrow"><span className="spark">✦</span> Seen on Team Girl</span>
            <h2>Tag <span className="script">us</span></h2>
          </div>
          <span className="link-underline" style={{ borderBottom: "none", color: "var(--tg-muted)" }}>#teamgirl</span>
        </div>
        <div className="container">
          <div className="tg-social-grid" style={{ gridTemplateColumns: "repeat(8, 1fr)" }}>
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="tg-social-card" style={{
                backgroundImage: `url(assets/gradients/gradient-0${(i % 8) + 1}.jpg)`,
                aspectRatio: "1/1",
                borderRadius: 14,
              }}>
                <span className="tg-social-card__platform" style={{ fontSize: 9, padding: "3px 7px" }}>IG</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* NEWSLETTER */}
      <div className="tg-news">
        <div className="tg-news__sticker" style={{ background: "var(--tg-ink)" }}>
          <span className="tg-news__spark" style={{ color: "var(--tg-magenta)" }}>✦</span>
          <div className="tg-news__copy">
            <span className="eyebrow eyebrow--light" style={{ color: "var(--tg-peach)" }}>✦ The Locker Room</span>
            <h2>One letter.<br/>Every Sunday.</h2>
            <p>The next week, the next drop, the next host, the next city. We read it back to ourselves before we send it. One screen, never more.</p>
          </div>
          <form className="tg-news__form" onSubmit={(e) => { e.preventDefault(); alert("Filed under: on the list."); }}>
            <div className="row">
              <input placeholder="First name" required />
              <select required defaultValue="">
                <option value="" disabled>City</option>
                {window.TG_CITIES.map(c => <option key={c.id}>{c.name}</option>)}
              </select>
            </div>
            <input type="email" placeholder="your@email.com" required />
            <button className="btn btn--pri" type="submit">Subscribe <span className="arr">→</span></button>
          </form>
        </div>
      </div>
    </main>
  );
}

window.TgCommunity = TgCommunity;