// Merch.jsx — Drops, editorial grid, picks-for-your-type, waitlist.

function TgMerch({ setView, onOpenQuiz, archetype }) {
  const [tab, setTab] = React.useState("all"); // all | tees | caps | jerseys | accessories
  const [hero, setHero] = React.useState(window.TG_PRODUCTS[0]);

  const tabs = [
    { id: "all", label: "All" },
    { id: "Tee", label: "Tees" },
    { id: "Cap", label: "Caps" },
    { id: "Jersey", label: "Jerseys" },
    { id: "Crewneck", label: "Crewnecks" },
    { id: "Tote", label: "Totes" },
    { id: "Scarf", label: "Accessories" },
  ];

  const filtered = window.TG_PRODUCTS.filter(p => tab === "all" || p.cat === tab || (tab === "Scarf" && (p.cat === "Scarf" || p.cat === "Patch Set")));

  // Picked-for-you: from saved archetype (after quiz)
  const picks = archetype ? window.TG_PRODUCTS.filter(p => p.forType === archetype) : window.TG_PRODUCTS.slice(0, 3);
  const archetypeData = archetype ? window.TG_RESULTS[archetype] : null;

  return (
    <main>
      {/* HERO */}
      <section className="tg-merch-hero">
        <span style={{ position: "absolute", top: 32, right: 48, fontSize: 38, color: "var(--tg-magenta)", transform: "rotate(15deg)" }}>✦</span>
        <div className="tg-merch-hero__grid">
          <div>
            <span className="eyebrow"><span className="spark">✦</span> Drop 002 · May 2026</span>
            <h1>Worn to the <span className="script">watch&nbsp;party</span>.</h1>
            <p>Tees, caps, jerseys, totes. Small runs, made carefully. A drop every six weeks. The watch-party scarf, the bring-a-friend tote, the airport jersey — and a numbered something every month for the people closest to the room.</p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 24 }}>
              <button className="btn btn--ink" onClick={() => document.getElementById("merch-grid").scrollIntoView({ behavior: "smooth", block: "start" })}>Shop the drop <span className="arr">→</span></button>
              <button className="btn btn--ghost" onClick={onOpenQuiz}>Pick by personality</button>
            </div>
          </div>
          <div className="tg-merch-hero__product" style={{ backgroundImage: `url(${hero.bg})` }}>
            <span className="tg-merch-hero__tag">{hero.badge || "DROP 002"}</span>
            <div style={{ position: "absolute", left: 22, bottom: 22, color: "var(--tg-cream)" }}>
              <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.9 }}>{hero.cat}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 28, lineHeight: 1, textTransform: "uppercase", letterSpacing: "-0.02em", marginTop: 4 }}>{hero.title}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, marginTop: 6 }}>{hero.price}</div>
            </div>
          </div>
        </div>
      </section>

      {/* PICKED FOR YOU */}
      {archetypeData && (
        <section className="section--tight">
          <div className="container">
            <div className="tg-collection" style={{ background: archetypeData.badgeColor, marginTop: 32 }}>
              <div>
                <span className="eyebrow eyebrow--light">★ Picked for the {archetypeData.name}</span>
                <h3>The {archetypeData.name.replace("The ", "")} <span className="script">edit</span></h3>
                <p>Based on your quiz result. Three pieces we'd hand-deliver if we could. Sized by tribe, not the algorithm.</p>
                <button className="btn btn--cream" style={{ marginTop: 16 }}>See the edit <span className="arr">→</span></button>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
                {picks.slice(0, 3).map(p => (
                  <div key={p.id} style={{ aspectRatio: "3/4", borderRadius: 16, backgroundSize: "cover", backgroundPosition: "center", backgroundImage: `url(${p.bg})`, border: "2px solid var(--tg-ink)" }}></div>
                ))}
              </div>
            </div>
          </div>
        </section>
      )}

      {/* CATEGORY TABS */}
      <section className="section" id="merch-grid">
        <div className="section-head--row">
          <div>
            <span className="eyebrow"><span className="spark">✦</span> Shop the drop</span>
            <h2>All <span className="script">pieces</span></h2>
          </div>
          <div className="tg-view-toggle" style={{ background: "transparent" }}>
            {tabs.map(t => (
              <button key={t.id} className={tab === t.id ? "is-active" : ""} onClick={() => setTab(t.id)} style={{ background: tab === t.id ? "var(--tg-ink)" : "var(--tg-paper-2)", color: tab === t.id ? "var(--tg-cream)" : "var(--tg-ink)" }}>{t.label}</button>
            ))}
          </div>
        </div>

        <div className="container">
          <div className="tg-merch-grid">
            {filtered.map(p => (
              <button key={p.id} className="tg-merch-card" onClick={() => setHero(p)}>
                <div className="tg-merch-card__img" style={{ backgroundImage: `url(${p.bg})` }}>
                  {p.badge && (
                    <span className={"tg-merch-card__badge " + (p.status === "soldout" ? "" : p.status === "coming" ? "tg-merch-card__badge--cream" : "tg-merch-card__badge--mag")}>{p.badge}</span>
                  )}
                  {p.status === "coming" && (
                    <div style={{ position: "absolute", inset: 0, background: "rgba(17,17,17,0.45)", display: "flex", alignItems: "flex-end", padding: 16, color: "var(--tg-cream)", fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 22, textTransform: "uppercase", letterSpacing: "-0.01em" }}>Coming soon →</div>
                  )}
                  {p.status === "soldout" && (
                    <div style={{ position: "absolute", inset: 0, background: "rgba(17,17,17,0.5)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--tg-cream)", fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 18, textTransform: "uppercase", letterSpacing: "0.1em" }}>Sold out</div>
                  )}
                </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>

      {/* COLLECTION EDITORIAL */}
      <section className="section--tight">
        <div className="container">
          <div className="tg-collection">
            <div className="tg-collection__art" style={{ backgroundImage: "url(assets/gradients/gradient-04.jpg)" }}></div>
            <div>
              <span className="eyebrow eyebrow--light">★ The collection</span>
              <h3>Made for nights you<br/><span className="script">actually&nbsp;remember</span>.</h3>
              <p>Everything we make starts at a Team Girl event. The Captain Crewneck came from one too many group chats. The Bring-A-Friend Tote was prototyped on a watch-party night in Bandra. None of it is mass. All of it is built to be wearable to the airport, the brunch, the court.</p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <button className="btn btn--cream">Read the story <span className="arr">→</span></button>
                <button className="btn btn--invert">Size guide</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WAITLIST */}
      <section className="section--tight" style={{ padding: "40px 0 100px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div style={{ background: "var(--tg-cream)", border: "2px solid var(--tg-ink)", borderRadius: 24, padding: 32 }}>
              <span className="eyebrow"><span className="spark">✦</span> Next drop · June 11</span>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 36, textTransform: "uppercase", letterSpacing: "-0.025em", margin: "12px 0 12px", lineHeight: 0.95 }}>The Bombay 001 jersey.</h3>
              <p style={{ fontFamily: "var(--font-serif)", fontSize: 15, lineHeight: 1.55, color: "var(--tg-ink-soft)" }}>50 numbered editions. Members of the WhatsApp circle get a 24-hour head start. Drop your email and we'll holler.</p>
              <form onSubmit={(e) => { e.preventDefault(); alert("On the waitlist."); }} style={{ display: "flex", gap: 8, marginTop: 18 }}>
                <input type="email" placeholder="you@somewhere.com" required style={{ flex: 1, padding: "14px 18px", borderRadius: 999, border: "1.5px solid var(--tg-ink)", background: "transparent", fontFamily: "var(--font-sans)", fontSize: 14, outline: "none" }} />
                <button className="btn btn--ink" type="submit">Notify me</button>
              </form>
            </div>
            <div style={{ background: "var(--tg-ink)", color: "var(--tg-cream)", border: "2px solid var(--tg-ink)", borderRadius: 24, padding: 32 }}>
              <span className="eyebrow eyebrow--light" style={{ color: "var(--tg-peach)" }}>★ Get on WhatsApp</span>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 36, textTransform: "uppercase", letterSpacing: "-0.025em", margin: "12px 0 12px", lineHeight: 0.95 }}>First in line for every drop.</h3>
              <p style={{ fontFamily: "var(--font-serif)", fontSize: 15, lineHeight: 1.55, opacity: 0.85 }}>Members of your city's WhatsApp circle see new drops 24 hours before everyone else. And we send a polaroid the day they ship.</p>
              <button onClick={() => setView("community")} className="btn btn--cream" style={{ marginTop: 18 }}>Request to join <span className="arr">→</span></button>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.TgMerch = TgMerch;