// Home.jsx — Editorial homepage with hero, pillars, schedule, quiz teaser, social, merch teaser.

function TgHome({ setView, onOpenQuiz, city, setCity, setOpenCityPicker, openEvent, heroBg, showTicker }) {
  const cityObj = window.TG_CITIES.find(c => c.id === city) || window.TG_CITIES[0];
  const cityEvents = window.TG_EVENTS.filter(e => e.city === city).slice(0, 3);
  const featured = (cityEvents.length >= 3 ? cityEvents : window.TG_EVENTS).slice(0, 3);

  // Scroll-stack layout pass — runs after fonts load + on resize.
  //   1. Position folder-tabs 01/02/03 so each sits directly to the right of
  //      the previous tab's right edge (same "slant gap" rhythm). The hard-
  //      coded 46% offset on tab 03 leaves a visible cream gap otherwise.
  //   2. Equalise every sticky panel's height to the tallest one. Sticky
  //      siblings inside the same parent unstick when their bottom hits the
  //      parent's bottom — so the TALLEST panel releases first. Equal heights
  //      means they release in lockstep, so once all three tabs are stacked,
  //      scrolling further moves all three off-screen together.
  React.useLayoutEffect(() => {
    const layout = () => {
      const panels = document.querySelectorAll('.tg-stack__panel');
      const tabs = document.querySelectorAll('.tg-stack__panel .tg-stack__tab');
      if (panels.length < 2) return;

      // --- Tabs ---
      if (window.innerWidth <= 720) {
        tabs.forEach(t => t.style.removeProperty('margin-left'));
      } else {
        tabs.forEach(t => { t.style.marginLeft = '0px'; });
        const widths = Array.from(tabs).map(t => t.getBoundingClientRect().width);
        let cum = 0;
        tabs.forEach((t, i) => {
          t.style.marginLeft = cum + 'px';
          cum += widths[i];
        });
      }

      // --- Panel heights ---
      if (window.innerWidth <= 720) {
        // Mobile: panels are no longer sticky, let them flow naturally.
        panels.forEach(p => p.style.removeProperty('min-height'));
        return;
      }
      // Reset so we measure each panel's natural height.
      panels.forEach(p => p.style.removeProperty('min-height'));
      const heights = Array.from(panels).map(p => p.offsetHeight);
      const maxH = Math.max(...heights);
      panels.forEach(p => { p.style.minHeight = maxH + 'px'; });
    };
    layout();
    window.addEventListener('resize', layout);
    // Re-layout once webfonts settle so width/height measurements reflect the
    // licensed Blauer Nue, not the fallback.
    if (document.fonts && document.fonts.ready) {
      document.fonts.ready.then(layout);
    }
    return () => window.removeEventListener('resize', layout);
  }, []);

  return (
    <main>
      {/* --- HERO --- */}
      <section className="tg-hero tg-hero--interactive">
        <TgInteractiveGradient
          className="tg-hero__bg"
          colors={["#EA21A2", "#EF512C", "#FFA161"]}
          baseColor="#7A0E55"
          loopDuration={18}
          orbitRadius={30}
          followStrength={0.45}
          blur={64}
          brightness={1.05}
        />
        <div className="tg-hero__inner">
          <div className="tg-hero__eyebrow">
            <span className="dot"></span>
            A social sports club · {cityObj.name} · {cityObj.count} sessions this month
          </div>
          <h1 className="tg-hero__title">
            The Match Is On.<br/>
            <span className="script">The girls are coming.</span>
          </h1>
          <p className="tg-hero__lede">
            Team Girl is a city-by-city community built around women&rsquo;s sport —
            watch parties, play dates, athlete dinners, and everything that happens
            around the game. The first night feels like the tenth.
          </p>
          <div className="tg-hero__ctas">
            <button className="btn btn--cream" style={{ background: "var(--tg-cream)", color: "var(--tg-ink)" }} onClick={onOpenQuiz}>
              Find your Team Girl <span className="arr">→</span>
            </button>
            <button className="btn btn--invert" onClick={() => setView("events")}>See what&rsquo;s on</button>
          </div>
        </div>

        <div className="tg-hero__corner">
          <div className="l">★ Next session</div>
          <div className="t">{featured[0].title}</div>
          <div className="s">{featured[0].day} {featured[0].month} · {featured[0].cityLabel} · {featured[0].time}</div>
        </div>

        <div className="tg-hero__sparkles">
          <span style={{ top: 60,  right: 80,  transform: "rotate(15deg)",  fontSize: 36 }}>✦</span>
          <span style={{ top: 220, right: 220, transform: "rotate(-12deg)", fontSize: 22 }}>✦</span>
          <span style={{ bottom: 110, left: 60, transform: "rotate(20deg)", fontSize: 28 }}>✦</span>
          <span style={{ top: 380, right: 40,  transform: "rotate(-5deg)",  fontSize: 18 }}>✦</span>
        </div>

        <div className="tg-hero__ticker" style={{ display: showTicker === false ? "none" : "block" }}>
          <div className="tg-hero__ticker-track">
            {Array.from({ length: 2 }).map((_, k) => (
              <React.Fragment key={k}>
                <span>WATCH PARTY <em className="sep">✦</em></span>
                <span>PLAY DATE <em className="sep">✦</em></span>
                <span>ATHLETE DINNER <em className="sep">✦</em></span>
                <span>CAMPUS CIRCLE <em className="sep">✦</em></span>
                <span>CREATOR MEET-UP <em className="sep">✦</em></span>
                <span>POP-UP <em className="sep">✦</em></span>
                <span>MATCHDAY <em className="sep">✦</em></span>
                <span>BRING A FRIEND <em className="sep">✦</em></span>
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* --- SCROLL STACK (the whole thing → what happens here → upcoming) --- */}
      <div className="tg-stack">

      {/* PANEL 1 — THE WHOLE THING */}
      <section className="tg-stack__panel tg-stack__panel--1">
        <div className="tg-stack__tab">
          <span className="tg-stack__tab-num">01</span>
          <span className="tg-stack__tab-label">The Whole Thing</span>
        </div>
        <div className="tg-stack__body">
      <div className="tg-story">
        <div className="tg-story__copy">
          <span className="eyebrow"><span className="spark">✦</span> The whole thing</span>
          <h2>Sport is the<br/>starting point.<br/>
            <span className="script">Connection</span> is the point.
          </h2>
          <p>
            Team Girl is 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 meet in restaurants and cafés, on courts and pitches,
            on campuses and in living rooms.
          </p>
          <p>
            Every gathering is part of a larger movement to make women&rsquo;s sport
            more visible, valuable, and lived-in. Pull up solo or bring a friend —
            both work here. There is always a seat saved.
          </p>
          <button className="btn btn--ink" onClick={() => setView("about")}>
            Our manifesto <span className="arr">→</span>
          </button>
        </div>

        <div className="tg-story__collage">
          <div className="tg-story__tile tg-story__tile--a" style={{ backgroundImage: "url(assets/gradients/gradient-03.jpg)" }}>
            <div className="tg-story__stat">
              <span className="n">4,200+</span>
              <span className="l">girls in the chat<br/>across 6 cities</span>
            </div>
          </div>
          <div className="tg-story__tile tg-story__tile--b">
            <div className="tg-story__pull">
              &ldquo;Best thing I&rsquo;ve done since I moved here. Came alone, left with three new friends and a Tuesday tennis date.&rdquo;
              <div className="who">— Mia · joined March</div>
            </div>
          </div>
          <div className="tg-story__tile tg-story__tile--c" style={{ background: "var(--tg-magenta)" }}>
            <img src="assets/logos/monogram-white.png" alt="" className="tg-story__g" />
            <div className="tg-story__overlay">
              <span className="t">Watch parties</span>
              <span className="t">Play dates</span>
              <span className="t">Athlete dinners</span>
              <span className="t">Pop-ups</span>
            </div>
          </div>
        </div>
      </div>
        </div>
      </section>

      {/* PANEL 2 — WHAT HAPPENS HERE */}
      <section className="tg-stack__panel tg-stack__panel--2">
        <div className="tg-stack__tab">
          <span className="tg-stack__tab-num">02</span>
          <span className="tg-stack__tab-label">What Happens Here</span>
        </div>
        <div className="tg-stack__body">
      {/* --- PILLARS — What happens here --- */}
      <section className="section">
        <div className="container">
          <div className="section-head" style={{ textAlign: "left", marginBottom: 40 }}>
            <span className="eyebrow"><span className="spark">✦</span> What happens here</span>
            <h2>Four things, <span className="script">on rotation</span>.</h2>
            <p>A simple system. Watch the game. Play a sport. Meet the people who make it. And shop the kit you'll wear to all three.</p>
          </div>

          <div className="tg-pillars">
            <button className="tg-pillar tg-pillar--a" onClick={() => setView("events")}>
              <div>
                <div className="tg-pillar__num">01</div>
                <h3 className="tg-pillar__title">Events &amp; sessions</h3>
              </div>
              <div>
                <div className="tg-pillar__body" style={{ color: "var(--tg-cream)" }}>
                  Watch parties for every fixture worth watching. Beginner play dates with rackets, balls and a coach. Athlete dinners with 22 seats and a long table.
                </div>
                <div className="tg-pillar__cta" style={{ color: "var(--tg-peach)" }}>See the calendar →</div>
              </div>
              <span style={{ position: "absolute", top: 24, right: 24, fontSize: 28, color: "var(--tg-magenta)" }}>✦</span>
            </button>

            <button className="tg-pillar tg-pillar--b" onClick={onOpenQuiz}>
              <div>
                <div className="tg-pillar__num">02</div>
                <h3 className="tg-pillar__title">Find your <span style={{ fontFamily: "var(--font-script)", textTransform: "none", fontWeight: 400 }}>type</span></h3>
              </div>
              <div>
                <div className="tg-pillar__body">
                  Take the highly scientific Team Girl personality quiz. Eight questions, one result, a badge to keep. Captain? Hype girl? Matchday romantic? Find out.
                </div>
                <div className="tg-pillar__cta">Take the quiz →</div>
              </div>
            </button>

            <button className="tg-pillar tg-pillar--c" onClick={() => setView("community")}>
              <div>
                <div className="tg-pillar__num">03</div>
                <h3 className="tg-pillar__title">Community</h3>
              </div>
              <div>
                <div className="tg-pillar__body">
                  WhatsApp circles in every city. A Sunday newsletter called <em>The Locker Room</em>. Real friendships, made over real fixtures.
                </div>
                <div className="tg-pillar__cta">Follow the girls →</div>
              </div>
            </button>

            <button className="tg-pillar tg-pillar--d" onClick={() => setView("merch")}>
              <div>
                <div className="tg-pillar__num">04</div>
                <h3 className="tg-pillar__title">Merch &amp; drops</h3>
              </div>
              <div>
                <div className="tg-pillar__body">
                  Tees, caps, jerseys, totes. Made in small numbers. Designed for the watch party, the airport, the away day. <em>The Matchday Romantic edit, picked for you.</em>
                </div>
                <div className="tg-pillar__cta">Shop the drop →</div>
              </div>
            </button>
          </div>
        </div>
      </section>
        </div>
      </section>

      {/* PANEL 3 — UPCOMING */}
      <section className="tg-stack__panel tg-stack__panel--3">
        <div className="tg-stack__tab">
          <span className="tg-stack__tab-num">03</span>
          <span className="tg-stack__tab-label">Upcoming</span>
        </div>
        <div className="tg-stack__body">
      {/* --- UPCOMING --- */}
      <section className="section section--upcoming">
        <div className="section-head--row">
          <div>
            <span className="eyebrow"><span className="spark">✦</span> Upcoming · {cityObj.name}</span>
            <h2>May <span className="script">Schedule</span></h2>
          </div>
          <button onClick={() => setView("events")} className="link-underline">See all {cityObj.count} sessions →</button>
        </div>

        <div className="container">
          <div className="tg-events__grid">
            {featured.map(e => (
              <button key={e.id} className="tg-event--poster" style={{ backgroundImage: `url(${e.bg})` }} onClick={() => openEvent(e)}>
                {e.soldOut && <span className="tg-event__badge">SOLD OUT</span>}
                <span className="tg-event__spark">✦</span>
                <div>
                  <div className="tg-event__cat">{e.typeLabel}</div>
                  <h3 className="tg-event__title">{e.title}</h3>
                </div>
                <div className="tg-event__when">
                  <span className="d">{e.day}</span>
                  <div>
                    <span className="m">{e.month} · {e.time}</span>
                    <span className="where">{e.venue}</span>
                  </div>
                </div>
              </button>
            ))}
          </div>

          <div style={{ marginTop: 36, display: "grid", gap: 12 }}>
            {window.TG_EVENTS.filter(e => e.city === city).slice(3, 6).map(e => (
              <button key={e.id} className="tg-event--list" onClick={() => openEvent(e)}>
                <div className="tg-event__date" style={{ background: e.dateColor }}>
                  <span className="m">{e.month}</span>
                  <span className="d">{e.day}</span>
                </div>
                <div className="tg-event__body">
                  <div className="tg-event__cat">{e.typeLabel}</div>
                  <h3>{e.title}</h3>
                  <p>{e.subtitle}</p>
                  <div className="tg-event__meta">
                    <span>{e.time}</span><span>·</span>
                    <span>{e.venue}</span><span>·</span>
                    <span className={"pill " + (e.status === "Sold out" ? "pill--mag" : e.status === "Few spots left" ? "pill--peach" : "")}>{e.status}</span>
                  </div>
                </div>
                <span className="tg-event__cta">Pull up →</span>
              </button>
            ))}
          </div>
        </div>
      </section>
        </div>
      </section>

      </div>
      {/* --- /SCROLL STACK --- */}

      {/* --- QUIZ TEASER --- */}
      <section className="section--tight" style={{ padding: "60px 0 100px" }}>
        <div className="tg-quizteaser" style={{ backgroundImage: "url(assets/gradients/gradient-07.jpg)" }}>
          <div>
            <span className="eyebrow eyebrow--light"><span className="spark">✦</span> A highly scientific test</span>
            <h2>Find out which <span className="script">Team Girl</span> you are.</h2>
            <p>Eight questions. One result. A badge for your story. Are you a Captain organising the night, a Hype Girl leading the chant, a Matchday Romantic in your team's kit at the airport, or something else entirely? One way to find out.</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn btn--cream" style={{ background: "var(--tg-cream)", color: "var(--tg-ink)" }} onClick={onOpenQuiz}>
                Take the quiz <span className="arr">→</span>
              </button>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--tg-cream)", fontWeight: 700, fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase" }}>
                Takes 90 seconds
              </span>
            </div>
          </div>
          <div className="tg-quizteaser__cards">
            <div className="tg-quizteaser__card tg-quizteaser__card--1">
              <div className="l">Result 01</div>
              <div className="t">The Captain</div>
              <div className="s">Plans the night. Builds the team.</div>
            </div>
            <div className="tg-quizteaser__card tg-quizteaser__card--2">
              <div className="l">Result 02</div>
              <div className="t">The Hype Girl</div>
              <div className="s">Loudest in the room.</div>
            </div>
            <div className="tg-quizteaser__card tg-quizteaser__card--3">
              <div className="l">Result 03</div>
              <div className="t">The Playmaker</div>
              <div className="s">All technique.</div>
            </div>
            <div className="tg-quizteaser__card tg-quizteaser__card--4">
              <div className="l">Result 04</div>
              <div className="t">The Romantic</div>
              <div className="s">In love with the sport.</div>
            </div>
          </div>
        </div>
      </section>

      {/* --- SOCIAL --- */}
      <section className="section">
        <div className="section-head--row">
          <div>
            <span className="eyebrow"><span className="spark">✦</span> Seen on the timeline</span>
            <h2>Follow the <span className="script">girls</span></h2>
          </div>
          <button onClick={() => setView("community")} className="link-underline">Open community →</button>
        </div>

        <div className="container">
          <div className="tg-social-grid">
            {window.TG_SOCIAL_POSTS.slice(0, 4).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>

      {/* --- MERCH TEASER --- */}
      <section className="section--tight section--cream" style={{ padding: "80px 0" }}>
        <div className="section-head--row">
          <div>
            <span className="eyebrow"><span className="spark">✦</span> Drop 002 · Out now</span>
            <h2>For the <span className="script">watch party</span></h2>
          </div>
          <button onClick={() => setView("merch")} className="link-underline">Shop all →</button>
        </div>

        <div className="container">
          <div className="tg-merch-grid">
            {window.TG_PRODUCTS.slice(0, 4).map(p => (
              <button key={p.id} className="tg-merch-card" onClick={() => setView("merch")}>
                <div className="tg-merch-card__img" style={{ backgroundImage: `url(${p.bg})` }}>
                  {p.badge && (
                    <span className={"tg-merch-card__badge " + (p.status === "soldout" ? "" : "tg-merch-card__badge--mag")}>{p.badge}</span>
                  )}
                </div>
                <div className="tg-merch-card__meta">
                  <div>
                    <div className="tg-merch-card__cat">{p.cat}</div>
                    <div className="tg-merch-card__title">{p.title}</div>
                  </div>
                  <div className={"tg-merch-card__price " + (p.status === "soldout" ? "sold" : "")}>{p.price}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* --- NEWSLETTER --- */}
      <div className="tg-news">
        <div className="tg-news__sticker">
          <span className="tg-news__spark">✦</span>
          <div className="tg-news__copy">
            <span className="eyebrow eyebrow--light">✦ The Locker Room</span>
            <h2>Sundays.<br/>In your inbox.</h2>
            <p>Every Sunday, a one-screen letter — what we&rsquo;re watching, who we&rsquo;re hosting, what dropped, who's joined. No threads. No takes.</p>
          </div>
          <form className="tg-news__form" onSubmit={(e) => { e.preventDefault(); alert("On the list — see you Sunday."); }}>
            <input placeholder="Your name" required />
            <input type="email" placeholder="your@email.com" required />
            <div className="check">
              <input type="checkbox" id="ws" />
              <label htmlFor="ws">Also add me to the WhatsApp circle for my city</label>
            </div>
            <button className="btn btn--ink" type="submit">Sign me up <span className="arr">→</span></button>
          </form>
        </div>
      </div>
    </main>
  );
}

window.TgHome = TgHome;