// VEXEL — News, Article, Store, Partners

// ─── NEWS / JOURNAL ──────────────────────────────────────────────────────────
function NewsPage({ go }) {
  const [cat, setCat] = useState("All");
  const cats = ["All", "Esports", "Tournaments", "Industry", "Game Updates", "Behind the Scenes"];
  const featured = NEWS.find(n => n.featured) || NEWS[0];
  const filtered = cat === "All" ? NEWS : NEWS.filter(n => n.category === cat);

  return (
    <main>
      <section className="shell" style={{ paddingTop: 48 }}>
        <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>The Drop · Vexel Journal</div>
        <h1 className="t-display" style={{ fontSize: 96, marginTop: 8 }}>News.</h1>
      </section>

      {/* Featured article hero */}
      <section className="shell" style={{ marginTop: 32 }}>
        <article onClick={() => go("article", { id: featured.id })} className="lift" style={{ cursor: "pointer", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 0, border: "1px solid var(--line)", borderRadius: 8, overflow: "hidden", background: "var(--surface)" }}>
          <div style={{ position: "relative", minHeight: 460, background: "var(--surface-2)" }}>
            <img src={featured.image} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(10,10,15,0.7) 100%)" }} />
            <div style={{ position: "absolute", top: 20, left: 20 }}>
              <span className="pill pill-up">FEATURED · {featured.category.toUpperCase()}</span>
            </div>
          </div>
          <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>{featured.read} read · {featured.date}</div>
            <h2 className="t-display" style={{ fontSize: 48, marginTop: 12, textWrap: "balance", lineHeight: 0.95 }}>{featured.title}</h2>
            <p style={{ fontSize: 17, color: "var(--text-dim)", marginTop: 16 }}>{featured.excerpt}</p>
            <div className="row" style={{ marginTop: 24 }}>
              <div style={{ width: 36, height: 36, borderRadius: "50%", background: `linear-gradient(135deg, var(--cyan), var(--magenta))` }} />
              <div>
                <div style={{ fontWeight: 600 }}>{featured.author}</div>
                <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>SENIOR EDITOR</div>
              </div>
              <button className="btn btn-primary btn-sm" style={{ marginLeft: "auto" }}>Read story →</button>
            </div>
          </div>
        </article>
      </section>

      {/* Category chips */}
      <section className="shell" style={{ marginTop: 48 }}>
        <div className="row" style={{ gap: 8, flexWrap: "wrap" }}>
          {cats.map(c => (
            <button key={c} onClick={() => setCat(c)} className={"pill " + (c === cat ? "pill-up" : "pill-past")} style={{ padding: "8px 16px", fontSize: 12 }}>{c}</button>
          ))}
          <span className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", marginLeft: "auto" }}>{filtered.length} STORIES</span>
        </div>
      </section>

      {/* Article grid */}
      <section className="shell" style={{ marginTop: 32 }}>
        <div className="grid-3">
          {filtered.map((n, i) => {
            const big = i === 0; // first card spans more
            return (
              <article key={n.id} onClick={() => go("article", { id: n.id })} className="card lift" style={{ cursor: "pointer", overflow: "hidden", gridColumn: big ? "span 2" : "span 1" }}>
                <div style={{ position: "relative", aspectRatio: big ? "16/8" : "16/10", overflow: "hidden", background: "var(--surface-2)" }}>
                  <img src={n.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  <div style={{ position: "absolute", top: 12, left: 12 }}>
                    <span className="pill pill-up">{n.category}</span>
                  </div>
                </div>
                <div style={{ padding: big ? 24 : 18 }}>
                  <div className="t-eyebrow">{n.date} · {n.read} read</div>
                  <h3 style={{ marginTop: 8, fontSize: big ? 24 : 16, fontWeight: 700, textWrap: "balance", lineHeight: 1.2 }}>{n.title}</h3>
                  {big && <p style={{ marginTop: 8, color: "var(--text-dim)", fontSize: 14 }}>{n.excerpt}</p>}
                  <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 12 }}>BY {n.author.toUpperCase()}</div>
                </div>
              </article>
            );
          })}
        </div>
        {/* Pagination */}
        <div style={{ marginTop: 32, display: "flex", justifyContent: "center", gap: 4 }}>
          {[1, 2, 3, "…", 6].map((p, i) => (
            <button key={i} className="btn btn-dark btn-sm" style={{ minWidth: 36, justifyContent: "center", ...(p === 1 ? { background: "var(--cyan)", color: "var(--ink)" } : {}) }}>{p}</button>
          ))}
        </div>
      </section>
    </main>
  );
}

// ─── ARTICLE DETAIL ──────────────────────────────────────────────────────────
function ArticleDetailPage({ params, go }) {
  const n = NEWS.find(x => x.id === params.id) || NEWS[0];
  const related = NEWS.filter(x => x.id !== n.id).slice(0, 3);

  return (
    <main>
      {/* Cinematic cover */}
      <section style={{ position: "relative", height: 540, overflow: "hidden" }}>
        <img src={n.image} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.7 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 0%, rgba(10,10,15,0.85) 60%, var(--ink) 100%)" }} />
        <div className="shell" style={{ position: "relative", height: "100%", display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 48 }}>
          <div className="row" style={{ marginBottom: 12 }}>
            <span className="pill pill-up">{n.category.toUpperCase()}</span>
            <span className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.12em" }}>{n.date.toUpperCase()} · {n.read.toUpperCase()} READ</span>
          </div>
          <h1 className="t-display" style={{ fontSize: "clamp(48px, 7vw, 96px)", lineHeight: 0.95, textWrap: "balance", maxWidth: 1200 }}>{n.title}</h1>
          <p style={{ fontSize: 22, color: "var(--text-dim)", marginTop: 16, maxWidth: 800 }}>{n.excerpt}</p>
          <div className="row" style={{ marginTop: 24 }}>
            <div style={{ width: 44, height: 44, borderRadius: "50%", background: `linear-gradient(135deg, var(--cyan), var(--magenta))` }} />
            <div>
              <div style={{ fontWeight: 600 }}>{n.author}</div>
              <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>SENIOR EDITOR · DUBAI</div>
            </div>
          </div>
        </div>
      </section>

      {/* Long-form body */}
      <section className="shell" style={{ display: "grid", gridTemplateColumns: "1fr 720px 1fr", marginTop: 64, gap: 32 }}>
        {/* Left rail: socials */}
        <aside style={{ position: "sticky", top: 120, height: "fit-content", display: "flex", flexDirection: "column", gap: 8 }}>
          {["X", "in", "▶", "♡"].map(s => (
            <button key={s} style={{ width: 40, height: 40, border: "1px solid var(--line)", borderRadius: 4, color: "var(--text-dim)" }}>{s}</button>
          ))}
          <div className="t-mono" style={{ fontSize: 11, color: "var(--text-mute)", marginTop: 12 }}>2,140<br/>SHARES</div>
        </aside>

        {/* Body */}
        <article>
          <p style={{ fontSize: 22, lineHeight: 1.55, color: "var(--white)", marginBottom: 24, fontWeight: 500 }}>{NEWS_BODY[0]}</p>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text)", marginBottom: 24 }}>{NEWS_BODY[1]}</p>

          {/* Pull quote */}
          <blockquote style={{ margin: "40px 0", padding: "32px 32px 32px 40px", borderLeft: "4px solid var(--cyan)", background: "rgba(0,229,255,0.04)" }}>
            <p className="t-display" style={{ fontSize: 32, lineHeight: 1.1, textWrap: "balance" }}>{NEWS_BODY[2]}</p>
            <div className="t-mono" style={{ marginTop: 16, fontSize: 12, color: "var(--text-dim)", letterSpacing: "0.1em" }}>— IBRAHIM HUSSAIN AHLI, FOUNDER</div>
          </blockquote>

          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text)", marginBottom: 24 }}>{NEWS_BODY[3]}</p>

          {/* Embedded match clip */}
          <figure style={{ margin: "32px 0", position: "relative" }}>
            <div style={{ position: "relative", aspectRatio: "16/9", overflow: "hidden", borderRadius: 4 }}>
              <img src={PHOTOS.crowd1} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "rgba(10,10,15,0.4)" }} />
              <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--cyan)", color: "var(--ink)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22 }}>▶</div>
              </div>
            </div>
            <figcaption style={{ marginTop: 12, fontSize: 13, color: "var(--text-mute)", fontStyle: "italic" }}>Match point on Map 5 — Apex's k1rito clutches a 1v3 to seal Vexel Open #1. Watch the full play. (2:14)</figcaption>
          </figure>

          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text)", marginBottom: 24 }}>{NEWS_BODY[4]}</p>

          {/* Player photo block */}
          <figure style={{ margin: "32px 0" }}>
            <img src={PHOTOS.gamer1} alt="" style={{ width: "100%", borderRadius: 4, aspectRatio: "16/9", objectFit: "cover" }} />
            <figcaption style={{ marginTop: 12, fontSize: 13, color: "var(--text-mute)", fontStyle: "italic" }}>Apex Esports' starting five at the Coca-Cola Arena. Photo: Vexel.</figcaption>
          </figure>

          <h3 className="t-display" style={{ fontSize: 28, marginTop: 48, marginBottom: 16 }}>What comes next.</h3>
          <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text)" }}>The next twelve months will tell us whether the Gulf scene can sustain prize pools at this scale across multiple titles, and whether the Spring Open's broadcast numbers translate into long-term sponsor commitments. Vexel's Summer Invitational — already targeting AED 1.2M — is the next major test.</p>

          {/* Tags */}
          <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--line)", display: "flex", gap: 8, flexWrap: "wrap" }}>
            <span className="t-eyebrow">Tags</span>
            {["Vexel Spring Open", "Valorant", "GCC", "Prize pool", "Apex Esports"].map(t => (
              <span key={t} className="pill pill-past" style={{ fontSize: 11 }}>{t}</span>
            ))}
          </div>
        </article>

        <aside />
      </section>

      {/* Related */}
      <section className="shell" style={{ marginTop: 96 }}>
        <h2 className="t-display" style={{ fontSize: 32, marginBottom: 24 }}>More from the journal</h2>
        <div className="grid-3">
          {related.map(r => (
            <article key={r.id} onClick={() => go("article", { id: r.id })} className="card lift" style={{ cursor: "pointer" }}>
              <div style={{ aspectRatio: "16/10", overflow: "hidden" }}><img src={r.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /></div>
              <div style={{ padding: 18 }}>
                <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>{r.category}</div>
                <h3 style={{ marginTop: 6, fontSize: 16, fontWeight: 700 }}>{r.title}</h3>
              </div>
            </article>
          ))}
        </div>
      </section>
    </main>
  );
}

// ─── STORE ───────────────────────────────────────────────────────────────────
function StorePage({ go, currency }) {
  const [cat, setCat] = useState("All");
  const [team, setTeam] = useState("All");
  const [cartOpen, setCartOpen] = useState(false);
  const [cart, setCart] = useState([]);
  const cats = ["All", "Apparel", "Peripherals", "Merch"];

  let list = PRODUCTS;
  if (cat !== "All") list = list.filter(p => p.category === cat);
  if (team !== "All") list = list.filter(p => p.team === team);

  const addToCart = (p) => setCart(c => [...c, p]);
  const total = cart.reduce((s, p) => s + p.price, 0);
  const price = (n) => currency === "AED" ? fmtAED(n) : fmtUSD(n);

  return (
    <main>
      {/* Hero */}
      <section style={{ position: "relative", minHeight: 360, overflow: "hidden", background: "var(--ink-2)" }}>
        <img src={PHOTOS.product1} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.35 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--ink) 30%, rgba(10,10,15,0.5) 80%, transparent 100%)" }} />
        <div className="shell" style={{ position: "relative", padding: "72px 32px" }}>
          <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Vexel Shop · 2026 Collection</div>
          <h1 className="t-display" style={{ fontSize: 96, marginTop: 8, lineHeight: 0.9 }}>Dress<br/><span className="italic-accent">like a pro.</span></h1>
          <p style={{ color: "var(--text-dim)", fontSize: 18, marginTop: 16, maxWidth: 540 }}>Official VEXEL apparel, team jerseys, peripherals and limited-edition tournament drops. Ships across the GCC and worldwide.</p>
        </div>
      </section>

      <div className="shell" style={{ marginTop: 32, display: "grid", gridTemplateColumns: "240px 1fr", gap: 32 }}>
        <aside style={{ position: "sticky", top: 120, height: "fit-content" }}>
          <FilterGroup label="Category" options={cats.map(c => [c, c])} value={cat} onChange={setCat} />
          <FilterGroup label="Team" options={[["All", "All teams"], ["Vexel", "Vexel"], ...TEAMS.slice(0, 4).map(t => [t.name, t.name])]} value={team} onChange={setTeam} />

          <div style={{ marginTop: 24, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
            <div className="t-eyebrow" style={{ marginBottom: 10 }}>Price</div>
            <input type="range" min="0" max="1500" defaultValue="500" style={{ width: "100%", accentColor: "var(--cyan)" }} />
            <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", display: "flex", justifyContent: "space-between", marginTop: 6 }}>
              <span>AED 0</span><span>AED 1.5k</span>
            </div>
          </div>

          {/* Mini cart */}
          <div className="card-flat" style={{ marginTop: 24, padding: 16 }}>
            <div className="spread"><div className="t-eyebrow" style={{ color: "var(--white)" }}>Your Cart</div><span className="t-mono" style={{ fontSize: 11 }}>{cart.length} ITEMS</span></div>
            {cart.length === 0 ? (
              <p style={{ fontSize: 12, color: "var(--text-mute)", marginTop: 8 }}>Empty. Add something.</p>
            ) : (
              <>
                <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 6 }}>
                  {cart.map((p, i) => <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 12 }}><span style={{ color: "var(--text-dim)", maxWidth: 130, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.name}</span><span className="t-mono">{price(p.price)}</span></div>)}
                </div>
                <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", fontWeight: 700 }}>
                  <span>Total</span><span className="t-mono" style={{ color: "var(--cyan)" }}>{price(total)}</span>
                </div>
                <button onClick={() => setCartOpen(true)} className="btn btn-primary btn-sm" style={{ marginTop: 12, width: "100%", justifyContent: "center" }}>Checkout →</button>
              </>
            )}
          </div>
        </aside>

        <div>
          <div className="spread" style={{ marginBottom: 20 }}>
            <div className="t-mono" style={{ fontSize: 11, color: "var(--text-dim)", letterSpacing: "0.1em" }}>SHOWING {list.length} OF {PRODUCTS.length} PRODUCTS</div>
            <select className="input" style={{ width: "auto", padding: "8px 12px" }}>
              <option>Best selling</option>
              <option>Newest</option>
              <option>Price (low → high)</option>
            </select>
          </div>

          <div className="grid-4">
            {list.map(p => (
              <div key={p.id} className="card lift" style={{ position: "relative", overflow: "hidden" }}>
                <div style={{ position: "relative", aspectRatio: "1", background: "var(--surface-2)", overflow: "hidden" }}>
                  <img src={p.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform 0.4s" }} onMouseEnter={e => e.target.style.transform = "scale(1.05)"} onMouseLeave={e => e.target.style.transform = "scale(1)"} />
                  {p.tag && <div style={{ position: "absolute", top: 12, left: 12, padding: "4px 10px", background: p.tag === "LIMITED" ? "var(--magenta)" : "var(--cyan)", color: "var(--ink)", fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700, letterSpacing: "0.1em" }}>{p.tag}</div>}
                  <button onClick={(e) => { e.stopPropagation(); addToCart(p); }} className="btn btn-primary btn-sm sweep" style={{ position: "absolute", bottom: 12, right: 12, opacity: 0.95 }}>+ Cart</button>
                </div>
                <div style={{ padding: 16 }}>
                  {p.team && <div className="t-mono" style={{ fontSize: 10, color: "var(--magenta)", letterSpacing: "0.1em" }}>{p.team.toUpperCase()}</div>}
                  <div style={{ fontWeight: 600, fontSize: 14, marginTop: 4 }}>{p.name}</div>
                  <div className="row" style={{ marginTop: 8 }}>
                    <span className="t-mono" style={{ fontSize: 16, fontWeight: 700, color: "var(--cyan)" }}>{price(p.price)}</span>
                    {p.was && <span className="t-mono" style={{ fontSize: 12, color: "var(--text-mute)", textDecoration: "line-through" }}>{price(p.was)}</span>}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Checkout modal */}
      {cartOpen && (
        <div onClick={() => setCartOpen(false)} style={{ position: "fixed", inset: 0, background: "rgba(10,10,15,0.85)", backdropFilter: "blur(8px)", zIndex: 80, display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
          <div onClick={e => e.stopPropagation()} className="card-flat" style={{ maxWidth: 760, width: "100%", padding: 0 }}>
            <div style={{ padding: "20px 28px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between" }}>
              <div>
                <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Checkout · Step 1 of 2</div>
                <h2 className="t-display" style={{ fontSize: 24, marginTop: 4 }}>Confirm your order</h2>
              </div>
              <button onClick={() => setCartOpen(false)} style={{ fontSize: 20, color: "var(--text-dim)" }}>✕</button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 0 }}>
              <div style={{ padding: 28, borderRight: "1px solid var(--line)" }}>
                <div className="t-eyebrow" style={{ marginBottom: 12 }}>Shipping address</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  <div><label className="label">Full name</label><input className="input" defaultValue="Sandstorm Test" /></div>
                  <div><label className="label">Phone</label><input className="input" defaultValue="+971 50 ..." /></div>
                  <div style={{ gridColumn: "span 2" }}><label className="label">Address</label><input className="input" defaultValue="Marina Promenade, Tower 4, 1408" /></div>
                  <div><label className="label">City</label><input className="input" defaultValue="Dubai" /></div>
                  <div><label className="label">Country</label><input className="input" defaultValue="UAE" /></div>
                </div>
                <div className="t-eyebrow" style={{ marginTop: 24, marginBottom: 12 }}>Payment</div>
                <div className="row" style={{ gap: 8 }}>
                  {["Card", "Apple Pay", "Tabby", "Tamara"].map(m => <span key={m} className="pill pill-up" style={{ fontSize: 11 }}>{m}</span>)}
                </div>
              </div>
              <div style={{ padding: 28, background: "var(--surface-2)" }}>
                <div className="t-eyebrow" style={{ marginBottom: 12 }}>Summary</div>
                {cart.map((p, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 13, padding: "8px 0" }}>
                    <span style={{ color: "var(--text-dim)" }}>{p.name}</span>
                    <span className="t-mono">{price(p.price)}</span>
                  </div>
                ))}
                <div style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--line)", display: "grid", gap: 4 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--text-dim)" }}><span>Shipping</span><span className="t-mono">Free</span></div>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--text-dim)" }}><span>VAT (5%)</span><span className="t-mono">{price(total * 0.05)}</span></div>
                  <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, paddingTop: 8, marginTop: 4, borderTop: "1px solid var(--line)" }}><span>Total</span><span className="t-mono" style={{ color: "var(--cyan)", fontSize: 18 }}>{price(total * 1.05)}</span></div>
                </div>
                <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 16 }}>Confirm & Pay →</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </main>
  );
}

// ─── PARTNERS ────────────────────────────────────────────────────────────────
function PartnersPage({ go }) {
  const tiers = [
    { name: "Bronze", color: "#C9764A", price: "From AED 75k / year", perks: ["Tournament logo placement", "1 broadcast mention per event", "5 social posts / year", "Email newsletter footer"] },
    { name: "Silver", color: "#B7BBC4", price: "From AED 180k / year", perks: ["All Bronze tier benefits", "Branded segment in broadcast", "2 hospitality boxes / major event", "Quarterly performance report", "On-arena LED rotation"] },
    { name: "Gold", color: "#FFC93C", price: "From AED 450k / year", perks: ["All Silver tier benefits", "Named tournament sponsorship slot", "Exclusive category lock (12 months)", "Co-branded merch capsule", "Dedicated brand manager"] },
    { name: "Diamond", color: "#00E5FF", price: "Bespoke · AED 1M+", perks: ["All Gold tier benefits", "Title sponsorship (\"presented by\")", "Year-round on-stage signage", "Co-produced content series", "First refusal on 2027 league rights", "Dedicated VIP suite at Coca-Cola Arena"] },
  ];

  return (
    <main>
      {/* Hero */}
      <section style={{ position: "relative", minHeight: 520, overflow: "hidden" }}>
        <img src={PHOTOS.crowd1} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.45 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 0%, rgba(10,10,15,0.85) 70%, var(--ink) 100%)" }} />
        <div className="bg-scan" style={{ position: "absolute", inset: 0 }} />
        <div className="shell" style={{ position: "relative", padding: "96px 32px 64px" }}>
          <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Partner with Vexel</div>
          <h1 className="t-display" style={{ fontSize: "clamp(64px, 9vw, 144px)", marginTop: 12, lineHeight: 0.9, textWrap: "balance" }}>Partner with the<br/><span className="italic-accent">Gulf's</span> competitive scene.</h1>
          <p style={{ fontSize: 20, color: "var(--text-dim)", marginTop: 24, maxWidth: 720 }}>The fastest-growing esports audience on Earth — half a billion people, 65% under 30, average broadcast watch time 47 minutes. We have the inventory. Pick the tier.</p>
          <div style={{ display: "flex", gap: 48, marginTop: 40 }}>
            {[["520M", "MENA audience"], ["47min", "Avg watch time"], ["32", "Markets reached"], ["AED 4.2M", "Activated '26"]].map(([v, l]) => (
              <div key={l}>
                <div className="t-display" style={{ fontSize: 44, color: "var(--cyan)" }}>{v}</div>
                <div className="t-eyebrow">{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tiers */}
      <section className="shell" style={{ marginTop: 64 }}>
        <div className="sec-head"><h2>Partnership tiers.</h2><div className="t-eyebrow">All amounts in AED · Renewable annually</div></div>
        <div className="grid-4">
          {tiers.map(t => (
            <div key={t.name} className="card lift" style={{ padding: 28, position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 4, background: t.color }} />
              <div className="t-eyebrow" style={{ color: t.color }}>{t.name}</div>
              <h3 className="t-display" style={{ fontSize: 40, marginTop: 8, color: t.color }}>{t.name}</h3>
              <div className="t-mono" style={{ fontSize: 13, color: "var(--text-dim)", marginTop: 4 }}>{t.price}</div>
              <ul style={{ listStyle: "none", margin: "20px 0", display: "flex", flexDirection: "column", gap: 10 }}>
                {t.perks.map((p, i) => (
                  <li key={i} className="row" style={{ alignItems: "flex-start", gap: 8, fontSize: 13, color: "var(--text)" }}>
                    <span style={{ color: t.color, marginTop: 2 }}>▸</span>{p}
                  </li>
                ))}
              </ul>
              <button className="btn btn-ghost btn-sm" style={{ width: "100%", justifyContent: "center", marginTop: 16 }}>Request deck →</button>
            </div>
          ))}
        </div>
      </section>

      {/* Current partners wall */}
      <section className="shell" style={{ marginTop: 96 }}>
        <h2 className="t-display" style={{ fontSize: 40, marginBottom: 24 }}>Current partners</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0, border: "1px solid var(--line)", borderRadius: 4, overflow: "hidden" }}>
          {PARTNERS.slice(0, 20).map((p, i) => (
            <div key={p} style={{ padding: "32px 16px", textAlign: "center", borderRight: (i % 5 !== 4) ? "1px solid var(--line)" : "none", borderBottom: i < 15 ? "1px solid var(--line)" : "none", fontFamily: "var(--font-display-tight)", color: "var(--text-mute)", fontSize: 18, letterSpacing: "-0.02em", transition: "all 0.15s", cursor: "pointer" }} onMouseEnter={e => { e.currentTarget.style.color = "var(--cyan)"; e.currentTarget.style.background = "var(--surface)"; }} onMouseLeave={e => { e.currentTarget.style.color = "var(--text-mute)"; e.currentTarget.style.background = "transparent"; }}>{p.toUpperCase()}</div>
          ))}
        </div>
      </section>

      {/* Lead form */}
      <section className="shell" style={{ marginTop: 96, marginBottom: 80, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <div>
          <div className="t-eyebrow" style={{ color: "var(--cyan)" }}>Get in touch</div>
          <h2 className="t-display" style={{ fontSize: 56, marginTop: 8 }}>Let's talk numbers.</h2>
          <p style={{ color: "var(--text-dim)", fontSize: 17, marginTop: 16, maxWidth: 480 }}>Tell us what your brand wants out of 2026 and we'll come back with a custom deck within 72 hours.</p>
          <div style={{ marginTop: 32, fontFamily: "var(--font-mono)", fontSize: 13 }}>
            <div style={{ color: "var(--text-dim)" }}>DIRECT</div>
            <div style={{ marginTop: 4 }}><a style={{ color: "var(--cyan)" }}>shirley@clutchscan.online</a></div>
            <div style={{ marginTop: 16, color: "var(--text-dim)" }}>WHATSAPP CONCIERGE</div>
            <div style={{ marginTop: 4, color: "var(--white)" }}>+971 50 200 1167</div>
          </div>
        </div>
        <PartnershipForm tiers={tiers} />
      </section>
    </main>
  );
}

// ─── PartnershipForm (used inside PartnersPage) ──────────────────────────
function PartnershipForm({ tiers }) {
  const [data, setData] = useState({ firstName: "", lastName: "", company: "", email: "", tier: tiers[0]?.name || "", message: "" });
  const [status, setStatus] = useState("idle");
  const [error, setError] = useState("");
  const onSubmit = async (e) => {
    e.preventDefault(); setStatus("sending"); setError("");
    const r = await window.VexelAPI.partnership(data);
    if (r.ok) setStatus("ok"); else { setStatus("err"); setError(r.error || "Please try again."); }
  };
  if (status === "ok") return (
    <div className="card-flat" style={{ padding: 48, textAlign: "center" }}>
      <div className="t-eyebrow" style={{ color: "var(--lime)" }}>Request received</div>
      <h3 className="t-display" style={{ fontSize: 32, marginTop: 12, color: "var(--white)" }}>We'll be in touch.</h3>
      <p style={{ color: "var(--text-dim)", marginTop: 10, fontSize: 14 }}>Our partnerships lead replies within 72 hours.</p>
    </div>
  );
  return (
    <form onSubmit={onSubmit} className="card-flat" style={{ padding: 28 }}>
      <div className="grid-2" style={{ gap: 12 }}>
        <div><label className="label">First name</label><input className="input" required value={data.firstName} onChange={e => setData({ ...data, firstName: e.target.value })} /></div>
        <div><label className="label">Last name</label><input className="input" required value={data.lastName} onChange={e => setData({ ...data, lastName: e.target.value })} /></div>
      </div>
      <div style={{ marginTop: 12 }}><label className="label">Company</label><input className="input" required value={data.company} onChange={e => setData({ ...data, company: e.target.value })} /></div>
      <div style={{ marginTop: 12 }}><label className="label">Email</label><input className="input" type="email" required value={data.email} onChange={e => setData({ ...data, email: e.target.value })} /></div>
      <div style={{ marginTop: 12 }}><label className="label">Tier of interest</label>
        <select className="input" value={data.tier} onChange={e => setData({ ...data, tier: e.target.value })}>
          {tiers.map(t => <option key={t.name}>{t.name}</option>)}<option>Other / Custom</option>
        </select>
      </div>
      <div style={{ marginTop: 12 }}><label className="label">What are you trying to achieve?</label><textarea className="input" rows="4" value={data.message} onChange={e => setData({ ...data, message: e.target.value })} /></div>
      {error && <div style={{ marginTop: 12, padding: "8px 12px", color: "var(--red)", fontSize: 13, border: "1px solid var(--red)", borderRadius: 4 }}>{error}</div>}
      <button type="submit" disabled={status === "sending"} className="btn btn-primary" style={{ marginTop: 16, width: "100%", justifyContent: "center" }}>
        {status === "sending" ? "Sending..." : "Send request →"}
      </button>
    </form>
  );
}

Object.assign(window, { NewsPage, ArticleDetailPage, StorePage, PartnersPage, PartnershipForm });
