// About.jsx — Manifesto, what we host, beliefs, origin timeline.

// Scroll-reveal wrapper: blurs + lifts in when scrolled into view.
function TgReveal({ children, as: Tag = "div", delay = 0, className = "", ...rest }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          el.style.transitionDelay = (delay || 0) + "ms";
          el.classList.add("is-in");
          io.unobserve(el);
        }
      });
    }, { threshold: 0.18, rootMargin: "0px 0px -10% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={"tg-reveal " + className} {...rest}>{children}</Tag>;
}

// Pink-tile grid hover effect for the About hero.
function TgHeroTiles({ cols = 16, rows = 8 }) {
  const wrapRef = React.useRef(null);
  const tilesRef = React.useRef([]);
  React.useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    // Listen on the parent section so mousemove still fires when the cursor
    // is over the headline / paragraph / buttons (which sit above the tiles).
    const host = wrap.parentElement || wrap;
    let raf = 0;
    let lastX = 0, lastY = 0, queued = false;
    function paint() {
      queued = false;
      const r = wrap.getBoundingClientRect();
      const x = lastX - r.left, y = lastY - r.top;
      const cellW = r.width / cols, cellH = r.height / rows;
      const reach = Math.max(cellW, cellH) * 1.35;
      for (let i = 0; i < tilesRef.current.length; i++) {
        const el = tilesRef.current[i];
        if (!el) continue;
        const col = i % cols, row = Math.floor(i / cols);
        const cx = col * cellW + cellW / 2;
        const cy = row * cellH + cellH / 2;
        const d = Math.hypot(x - cx, y - cy);
        if (d < reach) {
          const intensity = 1 - d / reach;
          el.style.backgroundColor = `rgba(234, 33, 162, ${(0.85 * intensity).toFixed(3)})`;
        } else {
          el.style.backgroundColor = "";
        }
      }
    }
    function onMove(e) {
      lastX = e.clientX; lastY = e.clientY;
      if (!queued) { queued = true; raf = requestAnimationFrame(paint); }
    }
    function onLeave() {
      tilesRef.current.forEach((el) => { if (el) el.style.backgroundColor = ""; });
    }
    wrap.addEventListener("mousemove", onMove);
    wrap.addEventListener("mouseleave", onLeave);
    host.addEventListener("mousemove", onMove);
    host.addEventListener("mouseleave", onLeave);
    return () => {
      cancelAnimationFrame(raf);
      wrap.removeEventListener("mousemove", onMove);
      wrap.removeEventListener("mouseleave", onLeave);
      host.removeEventListener("mousemove", onMove);
      host.removeEventListener("mouseleave", onLeave);
    };
  }, [cols, rows]);

  const cells = [];
  for (let i = 0; i < cols * rows; i++) {
    cells.push(
      <div key={i} ref={(el) => (tilesRef.current[i] = el)} className="tg-hero-tile" />
    );
  }
  return (
    <div
      ref={wrapRef}
      className="tg-hero-tiles"
      style={{ "--cols": cols, "--rows": rows }}
    >
      {cells}
    </div>
  );
}

function TgAbout({ setView, onOpenQuiz }) {
  const beliefs = [
    { n: "01", t: "Fandom is social", b: "Women's sport is more fun in a room. We build the room — not the app, not the algorithm." },
    { n: "02", t: "Girls first", b: "We use the word girls. We mean it. It signals: this room is yours, not the back-half of someone else's." },
    { n: "03", t: "Show up plural", b: "We came as a group. Yes you can bring her. There is always one more seat at our table." },
    { n: "04", t: "Quiet confidence", b: "No empowerment slogans. No locker-room cliché. Just the next event, well-run, well-attended, well-fed." },
  ];

  const hosts = [
    { id: "watch",  title: "Watch Parties",     d: "We take over back rooms and rooftops for the games worth watching. Big screens, frozen drinks, and people who will cheer when you do." },
    { id: "play",   title: "Play Dates",         d: "Beginner-only padel mornings. Tuesday tennis. Drop-in football on Saturday. Coaches, rackets, balls, all on us." },
    { id: "dinner", title: "Athlete Dinners",    d: "Twenty-two seats at a long table. An athlete, off the record. No press, no panel, no phones." },
    { id: "pop",    title: "Pop-Ups & Collabs",  d: "Brand collabs that aren't logos. Numbered jerseys you can only get in person. A photo booth, a polaroid, an afternoon." },
    { id: "circle", title: "Campus Circles",     d: "We come to your university for an afternoon. Picnic blankets, music, a panel, a tote for everyone who brings a friend." },
    { id: "shop",   title: "Shop & Drops",        d: "Small-run kits, made carefully. The Captain crewneck, the Bring-A-Friend tote, the Matchday scarf. New drop every six weeks." },
  ];

  const timeline = [
    { when: "2024", t: "Three girls, one watch party", d: "We started with the World Cup in our friend Anu's living room. Twenty-eight people came. We knew." },
    { when: "Spring '25", t: "Team Girl 01", d: "We took the back room of a Bandra restaurant for the Indian women's cricket semi-final. The host messaged us the next morning: 'When's the next one?'" },
    { when: "Autumn '25", t: "Six cities, one chat", d: "Mumbai, Delhi, Bangalore, London, Brooklyn, Lagos. Each city, its own group chat. Each chat, its own captain. Same vibe, same rules." },
    { when: "2026", t: "You", d: "You're early. We're glad you're here. Pull up to the next one." },
  ];

  return (
    <main>
      {/* --- ABOUT HERO --- */}
      <section className="tg-about-hero tg-about-hero--tiles">
        <TgHeroTiles cols={16} rows={8} />
        <span className="eyebrow"><span className="spark">✦</span> About Team Girl</span>
        <h1>
          A new kind of <span className="script">sports&nbsp;club</span>.<br/>
          Built around <br/>women&rsquo;s sport.
        </h1>
        <p>
          We&rsquo;re a city-by-city community for the girls who watch, the girls who play, the girls who used to play, the girls who want to start again, and the girls who are simply curious. We don&rsquo;t do panels. We don&rsquo;t do slogans. We do <em>nights you actually remember</em>.
        </p>
        <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <button className="btn btn--pri" onClick={onOpenQuiz}>Find your type <span className="arr">→</span></button>
          <button className="btn btn--ghost" onClick={() => setView("events")}>What's on this week</button>
        </div>

        <span style={{ position: "absolute", top: 32, right: 32, fontSize: 48, color: "var(--tg-magenta)", transform: "rotate(18deg)" }}>✦</span>
        <span style={{ position: "absolute", bottom: 40, right: 80, fontSize: 28, color: "var(--tg-orange)", transform: "rotate(-12deg)" }}>✦</span>
      </section>

      {/* --- MANIFESTO --- */}
      <div className="tg-manifesto">
        <TgReveal as="span" className="eyebrow"><span className="spark">✦</span> The manifesto</TgReveal>
        <TgReveal as="p" delay={80} style={{ marginTop: 24 }}>
          We came up watching women&rsquo;s football in someone&rsquo;s living room because <strong>no pub had it on</strong>. We came up playing tennis on the public courts at six in the morning because <strong>that&rsquo;s when girls could get on</strong>.
        </TgReveal>
        <TgReveal as="p" delay={60}>
          We&rsquo;re not waiting any longer. <strong>We showed up. And we&rsquo;re not leaving.</strong>
        </TgReveal>
        <TgReveal as="p" delay={80}>
          So we built a room. Then we built a calendar. Then we built six cities, and a group chat in each one. The kit, the dinners, the watch parties, the play dates &mdash; all of it because <strong>we wanted to go somewhere</strong>, and the somewhere didn&rsquo;t exist yet.
        </TgReveal>
        <TgReveal as="p" delay={80}>
          We use the word <em>girls</em>. It's specific. It's plural. It signals: <strong>this is yours, not the back-half of someone else's</strong>. You don't need to play to be here. You don't need to know the offside rule. You need to want to be in the room.
        </TgReveal>
        <TgReveal as="p" delay={120} style={{ fontStyle: "italic", color: "var(--tg-magenta)", marginTop: 32 }}>
          Pull up. Bring a friend. See you there.
        </TgReveal>
      </div>

      {/* --- WHAT WE HOST --- */}
      <section className="section section--paper2">
        <div className="container">
          <div className="section-head" style={{ textAlign: "left", marginBottom: 36 }}>
            <span className="eyebrow"><span className="spark">✦</span> What we host</span>
            <h2>Six kinds of <span className="script">night</span>.</h2>
            <p>The calendar rotates. Different city, different host, different vibe — but always one of these six.</p>
          </div>

          <div className="tg-beliefs tg-beliefs--3col">
            {hosts.map((h, i) => (
              <div key={h.id} className="tg-belief tg-belief--play" style={{
                background: ["var(--tg-cream)", "var(--tg-magenta)", "var(--tg-lilac)", "var(--tg-cream)", "var(--tg-peach)", "var(--tg-cream)"][i],
                color: i === 1 ? "var(--tg-cream)" : "var(--tg-ink)",
                animationDelay: (i * 60) + "ms",
              }}>
                <div className="tg-belief__n" style={{ color: i === 1 ? "var(--tg-cream)" : "var(--tg-magenta)" }}>{String(i + 1).padStart(2, "0")}</div>
                <div className="tg-belief__t">{h.title}</div>
                <div className="tg-belief__b" style={{ color: i === 1 ? "rgba(255,249,215,0.9)" : "var(--tg-ink-soft)" }}>{h.d}</div>
                <span className="tg-belief__spark" aria-hidden>✦</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- BELIEFS --- */}
      <section className="section">
        <div className="container">
          <div className="section-head" style={{ textAlign: "left", marginBottom: 36 }}>
            <span className="eyebrow"><span className="spark">✦</span> What we believe</span>
            <h2>Four <span className="script">rules</span> of the room.</h2>
          </div>
          <div className="tg-beliefs">
            {beliefs.map((b, i) => (
              <div key={b.n} className="tg-belief tg-belief--play" style={{ animationDelay: (i * 60) + "ms" }}>
                <div className="tg-belief__n">{b.n}</div>
                <div className="tg-belief__t">{b.t}</div>
                <div className="tg-belief__b">{b.b}</div>
                <span className="tg-belief__spark" aria-hidden>✦</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- TIMELINE (on ink) --- */}
      <section className="section section--ink">
        <div className="container">
          <div className="section-head" style={{ textAlign: "left", marginBottom: 36 }}>
            <span className="eyebrow eyebrow--light"><span className="spark" style={{ color: "var(--tg-peach)" }}>✦</span> How we got here</span>
            <h2 style={{ color: "var(--tg-cream)" }}>Two years.<br/><span className="script script--peach">A few thousand</span> girls.</h2>
          </div>

          <div className="tg-timeline">
            {timeline.map((t, i) => (
              <div key={i} className="tg-timeline__row">
                <div className="tg-timeline__when">{t.when}</div>
                <div className="tg-timeline__what">
                  <h4>{t.t}</h4>
                  <p>{t.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* --- FINAL CTA --- */}
      <section className="section--tight" style={{ padding: "60px 0 100px" }}>
        <div className="tg-quizteaser" style={{ backgroundImage: "url(assets/gradients/gradient-04.jpg)" }}>
          <div>
            <span className="eyebrow eyebrow--light"><span className="spark">✦</span> First night</span>
            <h2>Start with the <span className="script">quiz</span>.</h2>
            <p>The cleanest way in: take the personality test, get your badge, and we'll show you the events that fit. No long form. No spam. Just your kind of night.</p>
            <button className="btn btn--cream" style={{ background: "var(--tg-cream)", color: "var(--tg-ink)" }} onClick={onOpenQuiz}>
              Take the quiz <span className="arr">→</span>
            </button>
          </div>
          <div className="tg-quizteaser__cards">
            <div className="tg-quizteaser__card tg-quizteaser__card--1">
              <div className="l">Result</div>
              <div className="t">Captain</div>
              <div className="s">Plans the night.</div>
            </div>
            <div className="tg-quizteaser__card tg-quizteaser__card--2">
              <div className="l">Result</div>
              <div className="t">Loyal One</div>
              <div className="s">First in, last out.</div>
            </div>
            <div className="tg-quizteaser__card tg-quizteaser__card--3">
              <div className="l">Result</div>
              <div className="t">Chaos</div>
              <div className="s">Late. Loud. Magic.</div>
            </div>
            <div className="tg-quizteaser__card tg-quizteaser__card--4">
              <div className="l">Result</div>
              <div className="t">Romantic</div>
              <div className="s">All feels.</div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.TgAbout = TgAbout;