/* eslint-disable */
// SlotSimba — Pages

const { useState, useEffect, useMemo } = React;

/* =====================  HOME  ===================== */
function HomePage({ navigate }) {
  const { SlotCard } = window.SS_Components;
  const popular  = window.slotsByStatus("popular").slice(0, 8);
  const fresh    = window.slotsByStatus("new");
  const upcoming = window.slotsByStatus("upcoming");

  return (
    <div className="page">
      {/* LANDING — hero + live widget + scroll cue, fit to one screen */}
      <div className="landing">
        <div className="landing-main">
        <section className="hero">
          <div className="container">
            <div className="hero-grid">
              <div>
                <span className="eyebrow"><span className="dot" /> The Pragmatic Pride · Non-GamStop · UK</span>
                <h1>
                  Pragmatic slots <span className="accent">not on GamStop</span>.
                </h1>
                <p className="lede">
                  The Pragmatic Play catalogue, indexed for the non-GamStop market — every Sweet Bonanza, every Gates of Olympus, every fresh and upcoming title, with full mechanics, RTP, volatility and an embedded demo for every live game.
                </p>
                <div className="hero-cta-row">
                  <button className="btn btn-primary btn-lg" onClick={() => navigate("/slots")}>
                    Browse all slots <window.SS_Components.Icon.Arrow />
                  </button>
                  <button className="btn btn-ghost btn-lg" onClick={() => navigate("/slots?cat=new")}>
                    New releases
                  </button>
                </div>

                <div className="hero-stats">
                  <div className="stat"><div className="num">{window.SLOTS.length}</div><div className="label">Pragmatic titles</div></div>
                  <div className="stat"><div className="num">{fresh.length}</div><div className="label">New in 2024</div></div>
                  <div className="stat"><div className="num">{upcoming.length}</div><div className="label">Upcoming</div></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* LIVE INDEX STRIP — horizontal scrolling ticker of every title */}
        <HeroVisual navigate={navigate} />
        </div>

        {/* SCROLL CUE */}
        <div className="container landing-cue">
          <button
            className="scroll-cue"
            onClick={() => {
              const t = document.getElementById("popular");
              if (t) window.scrollTo({ top: t.getBoundingClientRect().top + window.scrollY - 24, behavior: "smooth" });
            }}
            aria-label="Scroll to most-played slots"
          >
            <span>Scroll into the pride</span>
            <span className="scroll-cue-chev" />
          </button>
        </div>
      </div>

      {/* MOST-PLAYED */}
      <section className="section" id="popular">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow"><span className="dot" /> Pride · 01 · Popular</span>
              <h2 style={{marginTop:14}}>Most-played Pragmatic slots</h2>
              <p className="sub">Sweet Bonanza, Gates of Olympus, Sugar Rush — the tumble-engine grids that defined the modern Pragmatic catalogue. Click any card for the embedded demo.</p>
            </div>
            <div className="actions">
              <button className="btn btn-ghost btn-sm" onClick={() => navigate("/slots?cat=popular")}>
                View all <window.SS_Components.Icon.Arrow />
              </button>
            </div>
          </div>
          <div className="grid-slots">
            {popular.map(s => <SlotCard key={s.id} slot={s} navigate={navigate} />)}
          </div>
        </div>
      </section>

      {/* NEW RELEASES */}
      <section className="section" style={{paddingTop: 24}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow"><span className="dot" /> Pride · 02 · Fresh out</span>
              <h2 style={{marginTop:14}}>New Pragmatic releases</h2>
              <p className="sub">The 1000-volatility re-pulls — Sweet Bonanza 1000, Gates 1000, Sugar Rush 1000, Starlight Princess 1000 — plus the latest mythology and Día de Muertos titles. All playable as embedded demos.</p>
            </div>
            <div className="actions">
              <button className="btn btn-ghost btn-sm" onClick={() => navigate("/slots?cat=new")}>
                View all <window.SS_Components.Icon.Arrow />
              </button>
            </div>
          </div>
          <div className="grid-slots">
            {fresh.map(s => <SlotCard key={s.id} slot={s} navigate={navigate} />)}
          </div>
        </div>
      </section>

      {/* UPCOMING */}
      <section className="section" style={{paddingTop: 24}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow"><span className="dot" /> Pride · 03 · Roadmap</span>
              <h2 style={{marginTop:14}}>Upcoming Pragmatic games</h2>
              <p className="sub">Announced titles with mechanics confirmed but no public demo yet — the Super Scatter family, Big Bass Mission Fishin', Wolf Gold Rising. Demos go live here the moment Pragmatic's gateway exposes the gameSymbol.</p>
            </div>
            <div className="actions">
              <button className="btn btn-ghost btn-sm" onClick={() => navigate("/slots?cat=upcoming")}>
                View roadmap <window.SS_Components.Icon.Arrow />
              </button>
            </div>
          </div>
          <div className="grid-slots">
            {upcoming.map(s => <SlotCard key={s.id} slot={s} navigate={navigate} />)}
          </div>
        </div>
      </section>

      {/* CATEGORIES — browse by feature engine */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow"><span className="dot" /> Pride · 04 · Mechanics</span>
              <h2 style={{marginTop:14}}>Browse by engine</h2>
              <p className="sub">Shortcuts into Pragmatic's signature mechanics — tumble grids, Megaways adaptations, sticky-multiplier clusters and feature-buy entries.</p>
            </div>
          </div>
          <CategoriesGrid navigate={navigate} />
        </div>
      </section>

      {/* COMPARISON — UKGC vs Non-GamStop */}
      <section className="section" style={{paddingTop: 24}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow"><span className="dot" /> Reference</span>
              <h2 style={{marginTop:14}}>Why Pragmatic slots play differently outside the UK</h2>
              <p className="sub">The mechanical and regulatory differences between Pragmatic's UKGC-licensed releases and the same titles distributed under offshore licenses.</p>
            </div>
          </div>
          <ComparisonTable />
        </div>
      </section>

      {/* VOLATILITY SHORTCUTS */}
      <section className="section" style={{paddingTop: 24}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow"><span className="dot" /> Filter · Volatility</span>
              <h2 style={{marginTop:14}}>By volatility profile</h2>
              <p className="sub">Volatility describes the distribution of payouts — how often a slot pays, and how large each payout tends to be. Pragmatic's catalogue leans high, with the 1000 re-pulls pushing into very-high territory.</p>
            </div>
          </div>
          <VolatilityGrid navigate={navigate} />
        </div>
      </section>

      {/* FAQ */}
      <section className="section" style={{paddingTop: 24}}>
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow"><span className="dot" /> Reference</span>
              <h2 style={{marginTop:14}}>Frequently asked</h2>
              <p className="sub">Common questions about Pragmatic Play slots operating outside the UK Gambling Commission.</p>
            </div>
          </div>
          <FaqAccordion />
        </div>
      </section>

      {/* INFO STRIP */}
      <section className="section">
        <div className="container">
          <div style={{
            display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:0,
            border:"1px solid var(--border)", borderRadius:18, overflow:"hidden", background:"var(--bg-card)",
          }} className="info-strip">
            {[
              {k:"01", t:"Pragmatic, focused", b:"This index covers Pragmatic Play exclusively — every release, every gameSymbol, every demo. One studio, deep coverage."},
              {k:"02", t:"Non-GamStop, defined", b:"GamStop is a UK-only self-exclusion scheme. Pragmatic distributes the same math models to non-UKGC markets where it does not apply."},
              {k:"03", t:"What we cover", b:"Mechanics, RTP, volatility, paylines, feature engines, release dates. We do not list operators, bonuses or promotions."},
            ].map((x,i) => (
              <div key={x.k} style={{
                padding:"28px 26px",
                borderRight: i<2 ? "1px solid var(--border)" : "none",
              }}>
                <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:".14em", color:"var(--accent-2)", marginBottom:10}}>
                  {x.k}
                </div>
                <h3 style={{fontSize:18, marginBottom:8}}>{x.t}</h3>
                <p style={{color:"var(--text-3)", fontSize:13.5, margin:0, lineHeight:1.6}}>{x.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function HeroVisual({ navigate }) {
  const glyphs = ["◆", "▲", "✦", "⬢", "◇", "✺", "◈", "✧", "▣", "✹", "⬡", "◉"];
  const colorTone = (i) => (i % 3 === 0 ? "cyan" : i % 3 === 1 ? "pink" : "green");
  const feed = window.SLOTS.map((s, i) => ({
    slot: s,
    name: s.name,
    slug: s.slug,
    thumb: window.getSlotThumb ? window.getSlotThumb(s) : null,
    art: s.art,
    glyph: glyphs[i % glyphs.length],
    rtp: s.rtp,
    vol: s.volatility.toUpperCase(),
    vendor: "PRAGMATIC PLAY",
    tone: colorTone(i),
  }));
  // Duplicate the list once so the CSS translateX loop is seamless
  const loop = [...feed, ...feed];

  // Live clock for the top ticker
  const [now, setNow] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const pad = (n) => String(n).padStart(2, "0");
  const stamp = `${pad(now.getMonth()+1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;

  // Bottom ticker — cycle through providers
  const tickers = window.PROVIDERS.map(p => `// ${p.name.toUpperCase()} ▸ LIVE`);
  const [tIdx, setTIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTIdx(i => (i + 1) % tickers.length), 2400);
    return () => clearInterval(id);
  }, [tickers.length]);

  return (
    <section className="live-index">
      <div className="container">
        <div className="live-index-shell">
          {/* Top header bar */}
          <div className="feed-header">
            <span className="feed-lion"><window.SS_Components.LionMark size={18} /></span>
            <span>SIMBA_PRIDE</span>
            <span className="sep">/</span>
            <span>LIVE</span>
            <span style={{flex:1}} />
            <span className="feed-dot" />
            <span>{stamp}</span>
          </div>

          {/* Horizontally-scrolling cards */}
          <div className="feed-window">
            <div className="feed-mask">
              <div className="feed-track">
                {loop.map((c, i) => (
                  <article
                    key={i}
                    className={`feed-card tone-${c.tone}`}
                    onClick={() => navigate && navigate(`/slots/${c.slug}`)}
                  >
                    <div className="feed-poster">
                      {c.thumb
                        ? <img src={c.thumb} alt={c.name} loading="lazy" />
                        : <span className="feed-thumb-ph">{c.glyph}</span>}
                      <span className="feed-rank">{String((i % feed.length) + 1).padStart(2, "0")}</span>
                      <span className="feed-poster-shade" />
                    </div>
                    <div className="feed-body">
                      <div className="feed-name">{c.name}</div>
                      <div className="feed-stats">
                        <span className="feed-rtp">{c.rtp}% RTP</span>
                        <span className={`feed-vol vol-${c.vol.toLowerCase()}`}>{c.vol}</span>
                      </div>
                    </div>
                  </article>
                ))}
              </div>
            </div>
          </div>

          {/* Bottom ticker */}
          <div className="feed-footer">
            <span className="feed-pulse" />
            <span key={tIdx} className="feed-ticker">{tickers[tIdx]}</span>
            <span style={{flex:1}} />
            <span>{feed.length} TITLES</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =====================  CATEGORIES (SEO: bonus buy / megaways / etc)  ===================== */
function CatIcon({ kind, color }) {
  const c = color;
  // small geometric glyphs — kept simple, neon-stroke
  const common = { width: 28, height: 28, viewBox: "0 0 32 32", fill: "none", stroke: c, strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "bonus-buy":
      return <svg {...common}><rect x="4" y="8" width="24" height="18" rx="3" /><path d="M4 14 H28" /><circle cx="22" cy="20" r="2" fill={c} stroke="none" /></svg>;
    case "megaways":
      return <svg {...common}><path d="M6 24 L12 14 L16 20 L22 8 L26 24" /><circle cx="6" cy="24" r="1.4" fill={c} stroke="none" /><circle cx="26" cy="24" r="1.4" fill={c} stroke="none" /></svg>;
    case "instant":
      return <svg {...common}><polygon points="17 4 7 18 14 18 13 28 25 12 17 12" /></svg>;
    case "mult":
      return <svg {...common}><circle cx="11" cy="11" r="5" /><circle cx="21" cy="21" r="5" /><path d="M11 6 L21 26" /></svg>;
    case "xways":
      return <svg {...common}><path d="M6 6 L26 26 M26 6 L6 26" /><rect x="13" y="13" width="6" height="6" /></svg>;
    case "tumble":
      return <svg {...common}><rect x="6" y="4" width="6" height="6" /><rect x="13" y="11" width="6" height="6" /><rect x="20" y="18" width="6" height="6" /><path d="M9 10 V13 M16 17 V20" /></svg>;
    default: return null;
  }
}

function CategoriesGrid({ navigate }) {
  const featureCount = (needle) =>
    window.SLOTS.filter(s => s.features.some(f => f.toLowerCase().includes(needle.toLowerCase()))).length;

  const cats = [
    { kind: "tumble",    title: "Tumble grids",      blurb: "Pragmatic's pays-anywhere engine. Wins remove and refill — Sweet Bonanza, Gates of Olympus, Starlight Princess.", filter: "Tumble", tone: "var(--accent-3)", count: featureCount("tumble") },
    { kind: "megaways",  title: "Megaways slots",    blurb: "Pragmatic's licensed Megaways adaptations. Variable ways up to 117,649 per spin.", filter: "Megaways", tone: "var(--accent-2)", count: featureCount("megaways") },
    { kind: "mult",      title: "Multiplier orbs",   blurb: "Persistent multiplier orbs that accumulate across tumble rounds — Gates, Starlight, and their 1000-volatility re-pulls.", filter: "Multipliers", tone: "var(--accent-1)", count: featureCount("multipliers") },
    { kind: "bonus-buy", title: "Bonus Buy entries", blurb: "Direct entry into the feature round at a fixed multiple of stake — separately certified RTP.", filter: "Bonus Buy", tone: "var(--accent-1)", count: featureCount("bonus buy") },
    { kind: "xways",     title: "Cluster pays",      blurb: "7×7 cluster grids with sticky multipliers — Sugar Rush, Fruit Party, Sugar Rush 1000.", filter: "Cluster", tone: "var(--accent-2)", count: featureCount("cluster") },
    { kind: "instant",   title: "No 2.5s rule",      blurb: "Outside the UKGC the 2.5-second minimum spin time does not apply. Every Pragmatic release in the index plays instantly.", filter: null, tone: "var(--accent-3)", count: window.SLOTS.length },
  ];

  const go = (c) => {
    if (c.filter) navigate(`/slots?feat=${encodeURIComponent(c.filter)}`);
    else navigate("/slots");
  };

  return (
    <div className="cat-grid">
      {cats.map(c => (
        <article key={c.kind} className="cat-card" onClick={() => go(c)} style={{"--cat-tone": c.tone}}>
          <div className="cat-icon-wrap"><CatIcon kind={c.kind} color={c.tone} /></div>
          <div className="cat-body">
            <h3>{c.title}</h3>
            <p>{c.blurb}</p>
          </div>
          <div className="cat-foot">
            <span className="chip">{c.count} {c.count === 1 ? "title" : "titles"}</span>
            <span className="cat-cta">View <window.SS_Components.Icon.Arrow /></span>
          </div>
        </article>
      ))}
    </div>
  );
}

/* =====================  COMPARISON (UKGC vs Non-GamStop)  ===================== */
function ComparisonTable() {
  const rows = [
    {
      topic: "Minimum spin time",
      ukgc: "2.5 seconds per spin (Oct 2021 rule)",
      offshore: "No mandated delay — spin executes on click",
    },
    {
      topic: "Autoplay",
      ukgc: "Banned — slot reels must spin on each input",
      offshore: "Available where the studio's engine supports it",
    },
    {
      topic: "Bonus-buy / feature-buy",
      ukgc: "Prohibited since 2021",
      offshore: "Available where local regulation permits",
    },
    {
      topic: "Reverse withdrawal",
      ukgc: "Banned across UKGC operators",
      offshore: "Operator-dependent",
    },
    {
      topic: "GamStop self-exclusion",
      ukgc: "Connected — cross-operator block",
      offshore: "Not connected to the scheme",
    },
    {
      topic: "Affordability checks",
      ukgc: "Required at trigger thresholds",
      offshore: "Light-touch KYC at withdrawal",
    },
  ];
  return (
    <div className="cmp-wrap">
      <header className="cmp-head">
        <div className="cmp-col-label">Mechanic</div>
        <div className="cmp-col-label" style={{color:"var(--text-3)"}}>UKGC-licensed</div>
        <div className="cmp-col-label" style={{color:"var(--accent-2)"}}>Non-GamStop</div>
      </header>
      {rows.map(r => (
        <div className="cmp-row" key={r.topic}>
          <div className="cmp-topic">{r.topic}</div>
          <div className="cmp-cell cmp-ukgc">
            <span className="cmp-x">—</span>
            <span>{r.ukgc}</span>
          </div>
          <div className="cmp-cell cmp-off">
            <span className="cmp-tick">▸</span>
            <span>{r.offshore}</span>
          </div>
        </div>
      ))}
      <footer className="cmp-foot">
        Source: UKGC LCCP §3.5.5 / Gambling Commission Game Design Guidelines · updated 2024.
      </footer>
    </div>
  );
}

/* =====================  VOLATILITY  ===================== */
function VolatilityGrid({ navigate }) {
  const ex = (vol) => window.SLOTS.filter(s => s.volatility.toLowerCase().includes(vol.toLowerCase())).slice(0, 3);
  const tiers = [
    { key: "Low",    label: "Low volatility",    bar: 1, blurb: "Frequent, modest payouts. Variance is mild — sessions tend to feel even.", filter: "Low",  tone: "var(--accent-1)" },
    { key: "High",   label: "High volatility",   bar: 3, blurb: "Spaced payouts with sizable peaks. Most modern feature engines sit here.", filter: "High", tone: "var(--accent-2)" },
    { key: "Very",   label: "Very high",         bar: 5, blurb: "Long droughts, occasional large peaks. Bonus-buy is often used to skip to features.", filter: "Very", tone: "var(--accent-3)" },
  ];
  return (
    <div className="vol-grid">
      {tiers.map(t => (
        <article key={t.key} className="vol-card" style={{"--vol-tone": t.tone}}
                 onClick={() => navigate(`/slots?vol=${encodeURIComponent(t.filter)}`)}>
          <header>
            <div className="vol-bars" aria-hidden>
              {[1,2,3,4,5].map(i => (
                <span key={i} className={`vol-bar ${i <= t.bar ? "on" : ""}`} style={i <= t.bar ? {background: t.tone, boxShadow:`0 0 8px ${t.tone}`} : {}} />
              ))}
            </div>
            <h3>{t.label}</h3>
          </header>
          <p>{t.blurb}</p>
          <ul className="vol-examples">
            {ex(t.filter).map(s => (
              <li key={s.id}>
                <span className="vol-dot" style={{background: t.tone, boxShadow:`0 0 6px ${t.tone}`}} />
                {s.name}
                <span className="vol-rtp">{s.rtp}%</span>
              </li>
            ))}
          </ul>
          <button className="vol-cta">View all <window.SS_Components.Icon.Arrow /></button>
        </article>
      ))}
    </div>
  );
}

/* =====================  FAQ  ===================== */
function FaqAccordion() {
  const items = [
    {
      q: "What does 'Pragmatic slots not on GamStop' mean?",
      a: "GamStop is a free UK-only self-exclusion programme that blocks players from every UKGC-licensed operator at once. Pragmatic Play distributes their full catalogue across multiple licensing jurisdictions — UKGC, Malta (MGA), Romania, the Bahamas. Releases shipped to non-UKGC operators are not connected to the GamStop block list. The underlying math models are the same; only the regulatory layer differs.",
    },
    {
      q: "Why does this site only cover Pragmatic Play?",
      a: "Pragmatic is the only major slot studio with a fully public demo gateway — meaning we can embed real, playable demos for every live release directly on the page, no aggregator account, no operator session, no redirect to a third-party site. We picked one studio, gave it deep coverage, and got working demos in. Other studios (NetEnt, Play'n GO, Nolimit, Hacksaw, etc.) don't publish public iframes for their demos, so we don't index them here.",
    },
    {
      q: "What's the 2.5-second slot rule and does it apply to Pragmatic slots?",
      a: "In October 2021 the UK Gambling Commission introduced a minimum 2.5-second spin duration for online slots, alongside an autoplay ban and several reverse-withdrawal restrictions. The rule applies only to UKGC-licensed releases — including Pragmatic's UK distribution. Non-GamStop versions of the same Pragmatic titles play at full speed with autoplay available.",
    },
    {
      q: "Can you bonus-buy on Pragmatic slots outside GamStop?",
      a: "Yes — most modern Pragmatic releases ship a feature-buy entry at a fixed multiple of stake (typically 70× to 200×), with separately certified RTP. The UKGC banned feature-buy on UK-licensed slots in 2021, so the option is removed from Pragmatic's UK distribution. On non-GamStop markets the buy entry remains available — Sweet Bonanza, Gates of Olympus, Sugar Rush and the Big Bass series all ship with it.",
    },
    {
      q: "What's the difference between the Pragmatic 1000 versions and the originals?",
      a: "Sweet Bonanza 1000, Gates of Olympus 1000, Sugar Rush 1000 and Starlight Princess 1000 are higher-volatility re-pulls of the originals — same engine, same theme, but with the top single multiplier ceiling raised to 1,000× and the round-cap published higher (typically 15,000× to 25,000× the stake). The base RTP is held constant; the change is in the math distribution, with a fatter right-tail and longer dry stretches between meaningful payouts.",
    },
    {
      q: "Do all Pragmatic slots have the same RTP?",
      a: "No. Published RTP varies by release — typically between 94% and 97%. Pragmatic publishes multiple certified RTP variants of the same title (e.g. 96.51%, 95.51%, 94.51%) and operators select which they distribute. We list Pragmatic's headline figure; the lower variants are typically not flagged in the in-game paytable unless you check the info screen.",
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <details key={i} open={open === i} onClick={(e) => { e.preventDefault(); setOpen(open === i ? -1 : i); }}>
          <summary>
            <span className="faq-q">{it.q}</span>
            <span className="faq-mark">{open === i ? "−" : "+"}</span>
          </summary>
          <div className="faq-a">{it.a}</div>
        </details>
      ))}
    </div>
  );
}

/* =====================  SLOTS GRID  ===================== */
function SlotsPage({ navigate, query }) {
  const { SlotCard } = window.SS_Components;
  const [cat, setCat]   = useState(query.cat  || "all");
  const [vol, setVol]   = useState(query.vol  || "all");
  const [feat, setFeat] = useState(query.feat || "all");
  const [q, setQ]       = useState("");

  // Sync state back to URL bar's query when query prop changes (deep links)
  useEffect(() => { if (query.cat)  setCat(query.cat);   }, [query.cat]);
  useEffect(() => { if (query.vol)  setVol(query.vol);   }, [query.vol]);
  useEffect(() => { if (query.feat) setFeat(query.feat); }, [query.feat]);

  const filtered = useMemo(() => window.SLOTS.filter(s => {
    if (cat !== "all" && s.status !== cat) return false;
    if (vol !== "all" && !s.volatility.toLowerCase().includes(vol.toLowerCase())) return false;
    if (feat !== "all" && !s.features.some(f => f.toLowerCase().includes(feat.toLowerCase()))) return false;
    if (q && !s.name.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  }), [cat, vol, feat, q]);

  const catCount = (c) => c === "all" ? window.SLOTS.length : window.slotsByStatus(c).length;
  const catCopy = {
    all:      { title: "Pragmatic Slots Not on GamStop", sub: "Every Pragmatic release we index — popular flagships, fresh 2024 drops, and the announced upcoming roadmap. Filter to narrow." },
    popular:  { title: "Popular Pragmatic slots", sub: "The evergreen hits — Sweet Bonanza, Gates of Olympus, Sugar Rush and the rest of the tumble-engine catalogue." },
    new:      { title: "New Pragmatic releases", sub: "Recent drops: the 1000-volatility re-pulls (Sweet Bonanza 1000, Gates 1000, Sugar Rush 1000) plus the latest mythology and feature-buy titles." },
    upcoming: { title: "Upcoming Pragmatic games", sub: "Announced but not yet live. Mechanics confirmed from studio communications; demos go live the moment Pragmatic's gateway exposes the gameSymbol." },
  };
  const copy = catCopy[cat] || catCopy.all;

  return (
    <div className="page">
      <div className="container">
        <div className="breadcrumb">
          <a href="/" onClick={(e)=>{e.preventDefault();navigate("/")}}>Home</a>
          <span className="sep">▸</span>
          <span className="here">Slots</span>
        </div>

        <div className="section-head" style={{marginBottom: 24}}>
          <div>
            <span className="eyebrow"><span className="dot" /> Library · Pragmatic Play</span>
            <h2 style={{marginTop:14, fontSize: 44}}>{copy.title} <span style={{color:"var(--text-3)", fontWeight:500}}>not on GamStop</span></h2>
            <p className="sub" style={{maxWidth:640, marginTop: 12}}>{copy.sub}</p>
          </div>
          <div className="row" style={{gap: 8}}>
            <span className="chip">{filtered.length} of {window.SLOTS.length}</span>
          </div>
        </div>

        <div className="filter-bar">
          <div className="row" style={{gap:8, flex: "1 1 240px", minWidth: 200}}>
            <window.SS_Components.Icon.Search style={{color:"var(--text-3)"}} />
            <input className="search-input" placeholder="Search slot name…" value={q} onChange={e=>setQ(e.target.value)} />
          </div>

          <div className="filter-group">
            <span className="filter-label">Status</span>
            <FilterPill active={cat==="all"} onClick={()=>setCat("all")}>All · {catCount("all")}</FilterPill>
            <FilterPill active={cat==="popular"} onClick={()=>setCat("popular")}>Popular · {catCount("popular")}</FilterPill>
            <FilterPill active={cat==="new"} onClick={()=>setCat("new")}>New · {catCount("new")}</FilterPill>
            <FilterPill active={cat==="upcoming"} onClick={()=>setCat("upcoming")}>Upcoming · {catCount("upcoming")}</FilterPill>
          </div>

          <div className="filter-group">
            <span className="filter-label">Vol</span>
            {["all","Low","Medium","High","Very"].map(v => (
              <FilterPill key={v} active={vol===v} onClick={()=>setVol(v)}>{v==="all"?"All":v==="Very"?"V-High":v}</FilterPill>
            ))}
          </div>

          <div className="filter-group">
            <span className="filter-label">Feature</span>
            {["all","Megaways","Tumble","Free Spins","Bonus Buy","Multipliers"].map(f => (
              <FilterPill key={f} active={feat===f} onClick={()=>setFeat(f)}>{f==="all"?"All":f}</FilterPill>
            ))}
          </div>
        </div>

        {filtered.length === 0 ? (
          <div style={{
            padding:60, textAlign:"center", border:"1px dashed var(--border-strong)", borderRadius:18,
            color:"var(--text-3)",
          }}>
            No slots match these filters. <a href="#" style={{color:"var(--accent-2)"}} onClick={(e)=>{e.preventDefault();setCat("all");setVol("all");setFeat("all");setQ("")}}>Reset</a>
          </div>
        ) : (
          <div className="grid-slots">
            {filtered.map(s => <SlotCard key={s.id} slot={s} navigate={navigate} />)}
          </div>
        )}
      </div>
    </div>
  );
}

function FilterPill({ active, onClick, children }) {
  return (
    <button className={`filter-pill ${active?"active":""}`} onClick={onClick}>{children}</button>
  );
}

/* =====================  SLOT DEEP SECTIONS  ===================== */
function SlotDeepSections({ slot, provider }) {
  // Pay-structure, strategy and FAQ all come from the shared content module so
  // the live page and the prerendered HTML render identical content.
  const { payStructure, strategy, faqs } = window.SS_Content.buildSlotSections(slot, provider);

  const [openFaq, setOpenFaq] = useState(0);

  return (
    <section className="slot-deep">
      {/* TWO COLUMN: pay structure + strategy */}
      <div className="slot-deep-grid">
        <div className="slot-deep-card">
          <header>
            <span className="eyebrow"><span className="dot" /> Pay structure</span>
            <h3>How {slot.name} pays</h3>
          </header>
          <div className="paystruct">
            {payStructure.map((r,i) => (
              <div className={`paystruct-row ${r.on ? "on" : "off"}`} key={i}>
                <div className="paystruct-k">
                  <span className={`paystruct-pill ${r.on ? "on" : "off"}`}>{r.on ? "▸" : "—"}</span>
                  <span>{r.k}</span>
                </div>
                <div className="paystruct-v">{r.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="slot-deep-card">
          <header>
            <span className="eyebrow"><span className="dot" /> Strategy</span>
            <h3>Considerations</h3>
          </header>
          <div className="strategy">
            <div className="strategy-row">
              <span className="strategy-k">Bet sizing</span>
              <p>{strategy.bet}</p>
            </div>
            <div className="strategy-row">
              <span className="strategy-k">Session structure</span>
              <p>{strategy.session}</p>
            </div>
            <div className="strategy-row">
              <span className="strategy-k">Bonus access</span>
              <p>{strategy.bonus}</p>
            </div>
          </div>
        </div>
      </div>

      {/* PER-SLOT FAQ */}
      <div className="slot-deep-card slot-faq-card">
        <header>
          <span className="eyebrow"><span className="dot" /> FAQ · {slot.name}</span>
          <h3>Common questions about {slot.name}</h3>
        </header>
        <div className="faq" style={{marginTop: 18}}>
          {faqs.map((it, i) => (
            <details key={i} open={openFaq === i} onClick={(e) => { e.preventDefault(); setOpenFaq(openFaq === i ? -1 : i); }}>
              <summary>
                <span className="faq-q">{it.q}</span>
                <span className="faq-mark">{openFaq === i ? "−" : "+"}</span>
              </summary>
              <div className="faq-a">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =====================  SLOT DETAIL  ===================== */
function SlotDetailPage({ slug, navigate }) {
  const slot = window.getSlot(slug);
  if (!slot) return <NotFound navigate={navigate} />;
  const provider = window.PROVIDERS[0]; // single-provider site: always Pragmatic
  const sibling = window.SLOTS.filter(s => s.id !== slot.id && s.status === slot.status).slice(0, 4);
  const allSlotsCount = window.SLOTS.length;
  const { SlotArt, SlotCard, DemoModal } = window.SS_Components;
  const [demoOpen, setDemoOpen] = useState(false);
  const isUpcoming = slot.status === "upcoming";
  const hasDemo = !!slot.gameSymbol;

  return (
    <div className="page">
      <div className="container">
        <div className="breadcrumb">
          <a href="/" onClick={(e)=>{e.preventDefault();navigate("/")}}>Home</a>
          <span className="sep">▸</span>
          <a href="/slots" onClick={(e)=>{e.preventDefault();navigate("/slots")}}>Slots</a>
          <span className="sep">▸</span>
          <span className="here">{slot.name}</span>
        </div>

        <div className="detail-grid">
          <div>
            <div className="detail-hero-art">
              <div style={{position:"absolute", inset:24}}>
                <SlotArt label={slot.art} accent={slot.accent} slot={slot} />
              </div>
              {/* Demo launcher overlay */}
              <button
                className="demo-launch-btn"
                onClick={() => setDemoOpen(true)}
                aria-label={hasDemo ? `Play ${slot.name} demo` : `Preview ${slot.name}`}
              >
                <span className="demo-launch-icon">▶</span>
                <span className="demo-launch-text">
                  <span className="demo-launch-line1">{hasDemo ? "Play demo" : "Preview"}</span>
                  <span className="demo-launch-line2">{isUpcoming ? `Releases ${slot.releaseDate || "TBA"}` : hasDemo ? "No real money · 18+" : "Demo coming soon"}</span>
                </span>
              </button>
              <div style={{
                position:"absolute", bottom:18, left:20, right:20,
                display:"flex", justifyContent:"space-between",
                fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:".12em",
                textTransform:"uppercase", color:"var(--text-3)",
              }}>
                <span>{provider.name}</span>
                <span>· THE PRIDE</span>
              </div>
            </div>

            <div style={{marginTop:24, display:"flex", gap:10, flexWrap:"wrap"}}>
              {slot.features.map(f => <span key={f} className="chip cyan">{f}</span>)}
            </div>

            <div className="spec-table" style={{marginTop:24}}>
              <div className="spec-cell"><span className="k">RTP</span><span className="v green">{slot.rtp}%</span></div>
              <div className="spec-cell"><span className="k">Volatility</span><span className="v cyan">{slot.volatility}</span></div>
              <div className="spec-cell"><span className="k">Max win</span><span className="v pink">{slot.maxWin}</span></div>
              <div className="spec-cell"><span className="k">Reels</span><span className="v">{slot.reels}</span></div>
              <div className="spec-cell"><span className="k">Paylines</span><span className="v" style={{fontSize:16}}>{slot.paylines}</span></div>
              <div className="spec-cell"><span className="k">Theme</span><span className="v" style={{fontSize:16}}>{slot.theme}</span></div>
            </div>
          </div>

          <div>
            <span className="chip green">Slot · {provider.name}</span>
            <h1 style={{fontSize: "clamp(32px, 4vw, 48px)", margin:"14px 0 16px", lineHeight: 1.02}}>
              {slot.name} — Not on GamStop
            </h1>
            <p style={{color:"var(--text-2)", fontSize:16, lineHeight:1.6}}>
              {slot.blurb}
            </p>

            <div className="row" style={{gap:10, marginTop:18}}>
              <button className="btn btn-primary" onClick={() => setDemoOpen(true)}>
                <window.SS_Components.Icon.Play /> {hasDemo ? "Play demo" : "View preview"}
              </button>
              <button className="btn btn-ghost" onClick={() => navigate(`/slots`)}>
                Browse {provider.name} library
              </button>
            </div>

            <div className="prose">
              <h3>Mechanics & strategy</h3>
              {slot.paragraphs.map((p,i) => <p key={i}>{p}</p>)}

              <h3>Feature set</h3>
              <div className="feature-list">
                {slot.features.map(f => (
                  <div className="feat" key={f}>
                    <span className="tick"><window.SS_Components.Icon.Check /></span>
                    {f}
                  </div>
                ))}
              </div>

              <h3>License & availability</h3>
              <p>
                {slot.name} is distributed by {provider.name} (licensed: {provider.license}). The studio's catalogue is accessible across markets outside the UKGC, including jurisdictions where GamStop self-exclusion does not apply.
              </p>
            </div>

            <div style={{
              marginTop:28, padding:20,
              border:"1px solid var(--border-strong)", borderRadius:14,
              background:"linear-gradient(180deg, var(--accent-2-soft), transparent)",
            }}>
              <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:".14em", color:"var(--accent-2)", marginBottom:6}}>
                ▸ DISCOVER MORE
              </div>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", gap:14, flexWrap:"wrap"}}>
                <div>
                  <div style={{fontSize:18, fontWeight:600, color:"var(--text-0)"}}>
                    More {provider.name} slots
                  </div>
                  <div style={{fontSize:13, color:"var(--text-3)"}}>
                    {allSlotsCount} titles in the Pragmatic index
                  </div>
                </div>
                <button className="btn btn-cyan" onClick={()=>navigate(`/slots`)}>
                  Open library <window.SS_Components.Icon.Arrow />
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* DEEP SECTIONS — Pay structure / Strategy / FAQ */}
        <SlotDeepSections slot={slot} provider={provider} />

        {sibling.length > 0 && (
          <section style={{marginTop: 72}}>
            <div className="section-head">
              <div>
                <span className="eyebrow"><span className="dot" /> Related · {slot.status === "upcoming" ? "Upcoming" : slot.status === "new" ? "New releases" : "Popular"}</span>
                <h2 style={{marginTop:14}}>More {slot.status === "upcoming" ? "upcoming" : slot.status === "new" ? "new" : "popular"} Pragmatic slots</h2>
              </div>
              <button className="btn btn-ghost btn-sm" onClick={()=>navigate(`/slots?cat=${slot.status}`)}>
                See all <window.SS_Components.Icon.Arrow />
              </button>
            </div>
            <div className="grid-slots">
              {sibling.map(s => <SlotCard key={s.id} slot={s} navigate={navigate} />)}
            </div>
          </section>
        )}

        {demoOpen && <DemoModal slot={slot} onClose={() => setDemoOpen(false)} />}
      </div>
    </div>
  );
}

/* =====================  PROVIDERS  ===================== */
function ProvidersPage({ navigate }) {
  const { ProviderCard } = window.SS_Components;
  return (
    <div className="page">
      <div className="container">
        <div className="breadcrumb">
          <a href="/" onClick={(e)=>{e.preventDefault();navigate("/")}}>Home</a>
          <span className="sep">▸</span>
          <span className="here">Providers</span>
        </div>

        <div className="section-head" style={{marginBottom:32}}>
          <div>
            <span className="eyebrow"><span className="dot" /> Library</span>
            <h2 style={{marginTop:14, fontSize:44}}>All providers <span style={{color:"var(--text-3)", fontWeight:500}}>not on GamStop</span></h2>
            <p className="sub" style={{maxWidth:600, marginTop:12}}>
              Software providers licensed outside the UKGC. Studios listed here ship to markets where GamStop self-exclusion does not apply.
            </p>
          </div>
          <span className="chip">{window.PROVIDERS.length} studios</span>
        </div>

        <div className="grid-providers">
          {window.PROVIDERS.map(p => <ProviderCard key={p.id} provider={p} navigate={navigate} />)}
        </div>
      </div>
    </div>
  );
}

/* =====================  PROVIDER DETAIL  ===================== */
function ProviderDetailPage({ slug, navigate }) {
  const provider = window.getProvider(slug);
  if (!provider) return <NotFound navigate={navigate} />;
  const slots = window.slotsByProvider(provider.id);
  const { SlotCard } = window.SS_Components;

  return (
    <div className="page">
      <div className="container">
        <div className="breadcrumb">
          <a href="/" onClick={(e)=>{e.preventDefault();navigate("/")}}>Home</a>
          <span className="sep">▸</span>
          <span className="here">About {provider.name}</span>
        </div>

        <div className="detail-grid" style={{alignItems:"start", marginBottom:48}}>
          <div>
            <div className="row" style={{gap:18}}>
              <div className="provider-mark" style={{width:88, height:88, fontSize:32, borderRadius:20}}>
                {provider.initials}
              </div>
              <div>
                <span className="chip cyan">Software provider</span>
                <h1 style={{fontSize:"clamp(34px, 4.6vw, 56px)", margin:"10px 0 0", lineHeight:1}}>
                  {provider.name}
                </h1>
              </div>
            </div>

            <p style={{color:"var(--text-2)", fontSize:17, lineHeight:1.6, marginTop:24, maxWidth:540}}>
              {provider.blurb}
            </p>

            <div className="spec-table" style={{marginTop:28}}>
              <div className="spec-cell"><span className="k">Founded</span><span className="v">{provider.founded}</span></div>
              <div className="spec-cell"><span className="k">Catalogue</span><span className="v green">{provider.catalogueSize}</span></div>
              <div className="spec-cell" style={{gridColumn:"1 / -1"}}><span className="k">License</span><span className="v" style={{fontSize:16}}>{provider.license}</span></div>
            </div>
          </div>

          <div className="prose" style={{paddingTop:8}}>
            <h3>About {provider.name}</h3>
            <p>
              {provider.name} operates as an independent software studio with distribution across markets outside of the UK Gambling Commission's jurisdiction. Their catalogue ships to non-GamStop platforms and is not affected by UK self-exclusion schemes.
            </p>
            <p>
              The studio's releases are evaluated on mathematical fairness (verified RTP), feature engine stability, and consistency of art direction across new titles. Game certifications are typically issued by independent testing houses such as eCOGRA or GLI.
            </p>

            <h3>Catalogue characteristics</h3>
            <ul>
              <li>Approximately {provider.catalogueSize} live titles distributed across non-GamStop markets.</li>
              <li>Mix of low, medium and high volatility math models — with a notable lean toward feature-rich releases.</li>
              <li>Adoption of modern engines including Megaways, tumble grids, xWays, xNudge and cluster-pays where applicable.</li>
              <li>Bonus-buy options are published with separately certified RTP figures where local regulation permits.</li>
            </ul>
          </div>
        </div>

        <ProviderDeepSections provider={provider} slots={slots} navigate={navigate} />

        <section style={{marginTop:48}}>
          <div className="section-head">
            <div>
              <span className="eyebrow"><span className="dot" /> Library</span>
              <h2 style={{marginTop:14}}>{provider.name} slots in our index</h2>
              <p className="sub">{slots.length} titles available outside GamStop. Click any card for the full mechanics breakdown.</p>
            </div>
          </div>
          {slots.length === 0 ? (
            <div style={{padding:40, textAlign:"center", border:"1px dashed var(--border-strong)", borderRadius:14, color:"var(--text-3)"}}>
              No titles indexed for this provider yet.
            </div>
          ) : (
            <div className="grid-slots">
              {slots.map(s => <SlotCard key={s.id} slot={s} navigate={navigate} />)}
            </div>
          )}
        </section>
      </div>
    </div>
  );
}

/* =====================  PROVIDER DEEP SECTIONS  ===================== */
const PROVIDER_DEEP = {
  pragmatic: {
    engines: [
      { name: "Pays-anywhere tumble grid", desc: "6×5 grid with cascading symbol removal. Pays on eight-or-more matches regardless of position." },
      { name: "Money Respin engine", desc: "Trigger respins where only money symbols and blanks remain in view — values collect at round end." },
      { name: "Megaways adaptations", desc: "Licensed implementations of the Big Time Gaming engine across the fishing series, Dog House series and others." },
      { name: "Bonus Buy variants", desc: "Most modern Pragmatic releases ship with a published feature-buy entry at a fixed multiple of stake." },
    ],
    milestones: [
      { y: "2015", t: "Studio founded", b: "Established in Sliema, Malta." },
      { y: "2017", t: "MGA license", b: "Granted Malta Gaming Authority Class 4 license for B2B distribution." },
      { y: "2019", t: "Tumble grid hits", b: "Sweet Bonanza and follow-ups establish the pays-anywhere tumble engine as a category." },
      { y: "2022", t: "Gates of Olympus", b: "Becomes one of the most-played slot releases globally across non-UK markets." },
      { y: "2024", t: "320+ titles", b: "Catalogue passes 320 live releases across slot, live-casino, bingo and virtual sports." },
    ],
  },
};

function ProviderDeepSections({ provider, slots, navigate }) {
  const deep = PROVIDER_DEEP[provider.id];
  if (!deep) return null;

  // Compute aggregate stats from the studio's titles in our index
  const rtps = slots.map(s => s.rtp);
  const avgRtp = rtps.length ? (rtps.reduce((a,b)=>a+b,0)/rtps.length).toFixed(2) : "—";
  const maxRtp = rtps.length ? Math.max(...rtps).toFixed(2) : "—";
  const minRtp = rtps.length ? Math.min(...rtps).toFixed(2) : "—";
  const volTiers = [...new Set(slots.map(s=>s.volatility))];
  const featurePool = [...new Set(slots.flatMap(s => s.features))];
  const hasBonusBuy = featurePool.some(f => f.toLowerCase().includes("bonus buy"));
  const hasMegaways = featurePool.some(f => f.toLowerCase().includes("megaways"));

  // Studio FAQ
  const faqs = [
    {
      q: `Are ${provider.name} slots on GamStop?`,
      a: `${provider.name}'s catalogue is licensed under ${provider.license} and distributed in markets outside the UKGC. Releases shipped to non-GamStop operators are not connected to the GamStop self-exclusion programme. ${provider.license.includes("UKGC") ? "Where the studio also holds UKGC certification, separate UK-compliant variants of releases are distributed to UKGC-licensed operators." : ""}`,
    },
    {
      q: `Can you bonus-buy ${provider.name} slots?`,
      a: hasBonusBuy
        ? `Yes — modern ${provider.name} releases ship a feature-buy entry where local regulation permits. The buy variant is certified separately with its own RTP figure. UKGC-licensed operators do not offer the buy entry due to the 2021 ban.`
        : `${provider.name}'s current catalogue does not feature dedicated bonus-buy entries on most releases. Bonus access is via in-game scatter triggers.`,
    },
    {
      q: `What is the RTP range across ${provider.name} slots in your index?`,
      a: `Across the ${slots.length} ${provider.name} releases we currently index, published RTP ranges from ${minRtp}% to ${maxRtp}% (average ${avgRtp}%). Where multiple math variants exist for the same title, this reflects the highest standard configuration.`,
    },
    {
      q: `Does ${provider.name} offer ${hasMegaways ? "Megaways" : "high-volatility"} releases?`,
      a: hasMegaways
        ? `Yes — ${provider.name} ships releases under the licensed Megaways engine, with ways counts variable per spin up to 117,649. The engine is licensed from Big Time Gaming.`
        : `${provider.name} concentrates on ${volTiers.includes("Very High") ? "very-high-volatility" : volTiers.includes("High") ? "high-volatility" : "mid-volatility"} math models, with feature engines specific to the studio rather than industry-licensed mechanics like Megaways.`,
    },
  ];
  const [openFaq, setOpenFaq] = useState(0);

  return (
    <>
      {/* AGGREGATE STAT BAR */}
      <section className="prov-stats">
        <div className="prov-stat"><div className="k">Studio titles indexed</div><div className="v">{slots.length}</div></div>
        <div className="prov-stat"><div className="k">Average RTP</div><div className="v green">{avgRtp}%</div></div>
        <div className="prov-stat"><div className="k">Top RTP</div><div className="v cyan">{maxRtp}%</div></div>
        <div className="prov-stat"><div className="k">Volatility profiles</div><div className="v">{volTiers.length}</div></div>
        <div className="prov-stat"><div className="k">Bonus buy available</div><div className="v">{hasBonusBuy ? "Yes" : "No"}</div></div>
      </section>

      {/* SIGNATURE ENGINES */}
      <section style={{marginTop:56}}>
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot" /> Engineering</span>
            <h2 style={{marginTop:14}}>Signature engines & mechanics</h2>
            <p className="sub">The feature systems {provider.name} is known for across its catalogue.</p>
          </div>
        </div>
        <div className="engines-grid">
          {deep.engines.map((e, i) => (
            <article key={i} className="engine-card">
              <div className="engine-num">0{i+1}</div>
              <h3>{e.name}</h3>
              <p>{e.desc}</p>
            </article>
          ))}
        </div>
      </section>

      {/* MILESTONES TIMELINE */}
      <section style={{marginTop:56}}>
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot" /> History</span>
            <h2 style={{marginTop:14}}>Studio milestones</h2>
            <p className="sub">From founding to the current catalogue. Compiled from public studio communications.</p>
          </div>
        </div>
        <ol className="timeline">
          {deep.milestones.map((m, i) => (
            <li key={i} className="timeline-item">
              <div className="timeline-mark">
                <span className="timeline-year">{m.y}</span>
              </div>
              <div className="timeline-body">
                <h4>{m.t}</h4>
                <p>{m.b}</p>
              </div>
            </li>
          ))}
        </ol>
      </section>

      {/* STUDIO FAQ */}
      <section style={{marginTop:56}}>
        <div className="section-head">
          <div>
            <span className="eyebrow"><span className="dot" /> FAQ</span>
            <h2 style={{marginTop:14}}>Common questions about {provider.name}</h2>
          </div>
        </div>
        <div className="faq" style={{maxWidth: 920}}>
          {faqs.map((it, i) => (
            <details key={i} open={openFaq === i} onClick={(e) => { e.preventDefault(); setOpenFaq(openFaq === i ? -1 : i); }}>
              <summary>
                <span className="faq-q">{it.q}</span>
                <span className="faq-mark">{openFaq === i ? "−" : "+"}</span>
              </summary>
              <div className="faq-a">{it.a}</div>
            </details>
          ))}
        </div>
      </section>
    </>
  );
}

/* =====================  ABOUT  ===================== */
function AboutPage({ navigate }) {
  return (
    <div className="page">
      <div className="container">
        <div className="breadcrumb">
          <a href="/" onClick={(e)=>{e.preventDefault();navigate("/")}}>Home</a>
          <span className="sep">▸</span>
          <span className="here">About</span>
        </div>

        <div className="about-grid" style={{marginTop:32}}>
          <div>
            <span className="eyebrow"><span className="dot" /> About</span>
            <h1 style={{fontSize:"clamp(36px, 5vw, 60px)", marginTop:14, lineHeight:1.02}}>
              One studio, <span style={{background:"linear-gradient(90deg, var(--accent-2), var(--accent-3))", WebkitBackgroundClip:"text", backgroundClip:"text", color:"transparent"}}>deep focus</span>.
            </h1>
            <p style={{fontSize:17, color:"var(--text-2)", marginTop:20, lineHeight:1.6}}>
              SlotSimba indexes Pragmatic Play's catalogue for the non-GamStop market — every Sweet Bonanza, every Gates of Olympus, every fresh release and every announced upcoming title. We picked one studio, gave it deep coverage, and built playable demos in for every live game.
            </p>

            <div style={{marginTop: 22, display:"flex", gap: 10, flexWrap:"wrap"}}>
              <button className="btn btn-cyan" onClick={()=>navigate("/pragmatic")}>
                Studio profile <window.SS_Components.Icon.Arrow />
              </button>
              <button className="btn btn-ghost" onClick={()=>navigate("/slots")}>
                Browse the catalogue
              </button>
            </div>

            {/* Why "Simba"? callout */}
            <div style={{
              marginTop:32,
              display:"flex", alignItems:"flex-start", gap:18,
              padding:"20px 22px",
              border:"1px solid var(--border-strong)",
              borderRadius:16,
              background:"linear-gradient(140deg, color-mix(in oklab, var(--accent-3) 8%, transparent), transparent 70%), var(--bg-card)",
            }}>
              <window.SS_Components.LionMark size={56} />
              <div>
                <div style={{
                  fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:".16em",
                  textTransform:"uppercase", color:"var(--accent-2)",
                }}>
                  ▸ Why Simba?
                </div>
                <p style={{margin:"6px 0 0", color:"var(--text-2)", fontSize:14.5, lineHeight:1.6}}>
                  Simba is Swahili for <span style={{color:"var(--text-0)", fontWeight:600}}>lion</span> — a creature that doesn't ask permission, doesn't follow a pre-set boundary, and reads the terrain before it moves. That's the disposition this index is written from: <span style={{color:"var(--text-0)"}}>informed, sovereign, unhurried</span>.
                </p>
              </div>
            </div>
          </div>

          <div className="prose">
            <h3>Why Pragmatic Play only</h3>
            <p>
              Pragmatic ships roughly one new slot a week and operates the only widely-public demo gateway in the slot industry. That means we can embed a real, playable demo for every live release directly on the page — no aggregator, no operator account, no third-party redirect. One studio, full demos, zero affiliate fluff.
            </p>

            <h3>What we publish</h3>
            <ul>
              <li>Slot mechanics: RTP, volatility, paylines, reel layouts and feature engines.</li>
              <li>Release timeline: popular flagships, new drops, announced upcoming titles.</li>
              <li>Embedded free-play demos for every live Pragmatic release in the index.</li>
              <li>Neutral classifications based on the studio's own paytables.</li>
            </ul>

            <h3>What we don't publish</h3>
            <ul>
              <li>Casino operator names, rankings or referral links.</li>
              <li>Welcome bonuses, deposit-match offers or promotion codes.</li>
              <li>Subjective "best-of" rankings without measurable criteria.</li>
              <li>Other software providers — this index is single-studio by design.</li>
            </ul>

            <h3>Responsible play</h3>
            <p>
              GamStop is a free UK self-exclusion programme. Choosing to play outside of it is a personal decision with real consequences — financial, behavioural and emotional. If gambling is no longer fun, please contact GamCare (0808 8020 133) or BeGambleAware. This site is intended for visitors aged 18 or over.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

/* =====================  CONTACT  ===================== */
function ContactPage({ navigate }) {
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name:"", email:"", topic:"general", message:"" });

  return (
    <div className="page">
      <div className="container">
        <div className="breadcrumb">
          <a href="/" onClick={(e)=>{e.preventDefault();navigate("/")}}>Home</a>
          <span className="sep">▸</span>
          <span className="here">Contact</span>
        </div>

        <div className="about-grid" style={{marginTop:32}}>
          <div>
            <span className="eyebrow"><span className="dot" /> Contact</span>
            <h1 style={{fontSize:"clamp(36px, 5vw, 56px)", marginTop:14, lineHeight:1.02}}>
              Get in touch.
            </h1>
            <p style={{color:"var(--text-2)", fontSize:16, marginTop:20, lineHeight:1.6}}>
              Spot an outdated RTP? Need to flag a missing release or a math-model change? Drop a note — we update the index continuously.
            </p>

            <div style={{marginTop:32, display:"flex", flexDirection:"column", gap:18}}>
              {[
                {k:"EDITORIAL", v:"editorial@slotsimba.co.uk"},
                {k:"DATA & ACCURACY", v:"data@slotsimba.co.uk"},
                {k:"PRESS", v:"press@slotsimba.co.uk"},
              ].map(x => (
                <div key={x.k} style={{
                  padding:"14px 18px", border:"1px solid var(--border)", borderRadius:12,
                  background:"var(--bg-card)",
                }}>
                  <div style={{fontFamily:"var(--font-mono)", fontSize:10.5, letterSpacing:".14em", color:"var(--accent-2)"}}>{x.k}</div>
                  <div style={{fontSize:15, color:"var(--text-0)", marginTop:4}}>{x.v}</div>
                </div>
              ))}
            </div>
          </div>

          <form onSubmit={(e)=>{e.preventDefault(); setSent(true);}} style={{
            padding:28, border:"1px solid var(--border-strong)", borderRadius:18,
            background:"var(--bg-card)",
          }}>
            {sent ? (
              <div style={{textAlign:"center", padding:"32px 0"}}>
                <div style={{
                  width:56, height:56, borderRadius:"50%",
                  background:"var(--accent-1-soft)", border:"1px solid var(--accent-1)",
                  display:"grid", placeItems:"center", color:"var(--accent-1)",
                  margin:"0 auto 16px", boxShadow:"0 0 24px var(--accent-1-glow)",
                }}>
                  <window.SS_Components.Icon.Check style={{width:20, height:20}} />
                </div>
                <h3 style={{fontSize:22, marginBottom:8}}>Message received.</h3>
                <p style={{color:"var(--text-3)", margin:0}}>We typically respond within 2 working days.</p>
                <button className="btn btn-ghost" style={{marginTop:24}} onClick={()=>{setSent(false); setForm({name:"",email:"",topic:"general",message:""})}}>
                  Send another
                </button>
              </div>
            ) : (
              <>
                <h3 style={{fontSize:20, marginBottom:18}}>Send a message</h3>
                <div className="field">
                  <label>Name</label>
                  <input value={form.name} onChange={e=>setForm({...form, name:e.target.value})} required />
                </div>
                <div className="field">
                  <label>Email</label>
                  <input type="email" value={form.email} onChange={e=>setForm({...form, email:e.target.value})} required />
                </div>
                <div className="field">
                  <label>Topic</label>
                  <div className="row" style={{gap:8}}>
                    {[
                      {v:"general", l:"General"},
                      {v:"data", l:"Data correction"},
                      {v:"editorial", l:"Editorial"},
                      {v:"press", l:"Press"},
                    ].map(t => (
                      <button type="button" key={t.v}
                        className={`filter-pill ${form.topic===t.v?"active":""}`}
                        onClick={()=>setForm({...form, topic:t.v})}>{t.l}</button>
                    ))}
                  </div>
                </div>
                <div className="field">
                  <label>Message</label>
                  <textarea value={form.message} onChange={e=>setForm({...form, message:e.target.value})} required />
                </div>
                <button className="btn btn-primary" style={{width:"100%", marginTop:8}}>
                  Send message <window.SS_Components.Icon.Arrow />
                </button>
              </>
            )}
          </form>
        </div>
      </div>
    </div>
  );
}

function NotFound({ navigate }) {
  return (
    <div className="page container" style={{padding:"80px 28px", display:"flex", flexDirection:"column", alignItems:"flex-start", gap:18}}>
      <window.SS_Components.LionMark size={88} tone="gold" />
      <h1 style={{fontSize:48}}>The pride's gone hunting.</h1>
      <p style={{color:"var(--text-3)", marginTop:0, maxWidth:540}}>
        That slot or provider isn't in the Simba Pride yet. Try the library — or drop us a line if a release should be on file.
      </p>
      <div className="row" style={{gap:10}}>
        <button className="btn btn-cyan" onClick={()=>navigate("/")}>Back home</button>
        <button className="btn btn-ghost" onClick={()=>navigate("/slots")}>Open the library</button>
      </div>
    </div>
  );
}

window.SS_Pages = {
  HomePage, SlotsPage, SlotDetailPage, ProvidersPage, ProviderDetailPage, AboutPage, ContactPage, NotFound,
};