/* fungames — Catalogue, Game Detail */

function CataloguePage() {
  const [filter, setFilter] = React.useState('all');
  const [view, setView] = React.useState('grid'); // grid | table
  const filters = [
    { id: 'all', label: 'All Titles', count: GAMES.length },
    { id: 'crash', label: 'Crash', count: GAMES.filter(g => g.kind.toLowerCase().includes('crash')).length },
    { id: 'grid', label: 'Grid / Logic', count: GAMES.filter(g => g.kind.toLowerCase().includes('grid')).length },
    { id: 'card', label: 'Card / Reveal', count: GAMES.filter(g => g.kind.toLowerCase().includes('card') || g.kind.toLowerCase().includes('reveal')).length },
    { id: 'classic', label: 'Classic', count: GAMES.filter(g => g.kind.toLowerCase().includes('classic')).length },
  ];
  const visible = GAMES.filter(g => {
    if (filter === 'all') return true;
    if (filter === 'classic') return g.kind.toLowerCase().includes('classic');
    return g.kind.toLowerCase().includes(filter);
  });

  return (
    <div>
      <section style={{ paddingTop: 56, paddingBottom: 32, position: 'relative', overflow: 'hidden' }}>
        <Aurora intensity={0.5} tone="warm" />
        <div className="container" style={{ position: 'relative' }}>
          <div className="crumbs mb-md">
            <a href="#home" onClick={(e)=>{e.preventDefault(); window.fgNavigate('home');}}>Home</a>
            <span className="sep">/</span>
            <span className="here">Catalogue</span>
          </div>
          <div className="row items-end justify-between gap-lg">
            <div>
              <h1 className="t-h1">Catalogue · 2026</h1>
              <span className="t-mono" style={{ color: 'var(--ink-3)' }}>// {GAMES.length} LIVE TITLES · UPDATED Q2 2026 · ALL GLI-19</span>
            </div>
            <div className="row gap-sm">
              <a className="btn btn-ghost" href="#" onClick={(e)=>e.preventDefault()}>Download deck (PDF)</a>
              <a className="btn btn-secondary btn-arrow" href="#contact" onClick={(e)=>{e.preventDefault(); window.fgNavigate('contact');}}>Onboard catalogue</a>
            </div>
          </div>
        </div>
      </section>

      <section className="hl-t hl-b" style={{ background: 'var(--chalk)' }}>
        <div className="container">
          <div className="row items-center justify-between" style={{ padding: '14px 0' }}>
            <div className="row items-center gap-md">
              {filters.map(f => (
                <button key={f.id} onClick={() => setFilter(f.id)}
                  style={{
                    border: 'none', background: 'transparent', cursor: 'pointer',
                    fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 11.5,
                    letterSpacing: '0.14em', textTransform: 'uppercase',
                    color: filter === f.id ? 'var(--rust)' : 'var(--ink-2)',
                    padding: '6px 0',
                    whiteSpace: 'nowrap',
                    borderBottom: filter === f.id ? '2px solid var(--rust)' : '2px solid transparent'
                  }}>
                  {f.label} <span style={{ color: 'var(--ink-4)', fontWeight: 400 }}>({f.count})</span>
                </button>
              ))}
            </div>
            <div className="row gap-sm">
              <button onClick={()=>setView('grid')} style={{ background: view==='grid' ? 'var(--ink)' : 'transparent', color: view==='grid' ? 'var(--chalk)' : 'var(--ink-2)', border: '1px solid '+(view==='grid' ? 'var(--ink)' : 'var(--hairline)'), padding: '7px 16px', borderRadius: 'var(--r-pill)', cursor: 'pointer', fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Grid</button>
              <button onClick={()=>setView('table')} style={{ background: view==='table' ? 'var(--ink)' : 'transparent', color: view==='table' ? 'var(--chalk)' : 'var(--ink-2)', border: '1px solid '+(view==='table' ? 'var(--ink)' : 'var(--hairline)'), padding: '7px 16px', borderRadius: 'var(--r-pill)', cursor: 'pointer', fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Table</button>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '40px 0 80px' }}>
        <div className="container">
          {view === 'grid' ? (
            <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
              {visible.map(g => <GameCard key={g.id} game={g} />)}
            </div>
          ) : (
            <CatalogueTable games={visible} />
          )}
        </div>
      </section>

      <section className="section" style={{ background: 'var(--sandstone)' }}>
        <div className="container row justify-between items-center gap-lg">
          <div>
            <span className="t-label">Stay updated</span>
            <h3 className="t-h2" style={{ marginTop: 8 }}>Quarterly engineering logs.</h3>
            <p className="t-body" style={{ marginTop: 8, maxWidth: 480 }}>One email per quarter. New titles, math notes, regulatory shifts, no marketing fluff.</p>
          </div>
          <div className="row gap-sm" style={{ minWidth: 420 }}>
            <input className="input" placeholder="enter work email" />
            <a className="btn btn-primary" href="#" onClick={(e)=>e.preventDefault()}>Subscribe</a>
          </div>
        </div>
      </section>
    </div>
  );
}

function CatalogueTable({ games }) {
  return (
    <div className="card" style={{ overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '60px 1fr 160px 120px 100px 120px 60px', padding: '14px 20px', borderBottom: '1px solid var(--hairline)', background: 'var(--sandstone)' }}>
        {['#','Title','Mechanic','Volatility','RTP','Max Win',''].map((h, i) => (
          <span key={i} className="t-label" style={{ color: 'var(--ink-3)' }}>{h}</span>
        ))}
      </div>
      {games.map((g, i) => (
        <div key={g.id} onClick={()=>window.fgNavigateGame(g.id)}
          style={{ display: 'grid', gridTemplateColumns: '60px 1fr 160px 120px 100px 120px 60px', padding: '16px 20px', borderBottom: i < games.length-1 ? '1px solid var(--hairline)' : 'none', alignItems: 'center', cursor: 'pointer', transition: 'background 140ms', }}
          onMouseEnter={e => e.currentTarget.style.background = 'var(--sandstone)'}
          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          <span className="t-mono" style={{ color: 'var(--ink-3)' }}>{g.code}</span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600 }}>{g.title}</span>
          <span className="t-mono" style={{ color: 'var(--ink-2)' }}>{g.kind}</span>
          <span className="t-mono">{g.volatility}</span>
          <span className="t-mono" style={{ color: 'var(--rust)', fontWeight: 600 }}>{g.rtp}</span>
          <span className="t-mono">{g.maxWin}</span>
          <span style={{ color: 'var(--ink-3)', fontFamily: 'var(--font-mono)', fontSize: 16, textAlign: 'right' }}>↗</span>
        </div>
      ))}
    </div>
  );
}

/* ================= GAME DETAIL ================= */

function InteractiveDiffuser() {
  const [selected, setSelected] = React.useState(2);
  const [running, setRunning] = React.useState(false);
  const [phase, setPhase] = React.useState('idle'); // idle | playing | settled
  const [outcome, setOutcome] = React.useState(null);
  const [t, setT] = React.useState(0);

  const tiers = [
    { mult: 1.2, risk: 'Conservative' },
    { mult: 2.5, risk: 'Balanced' },
    { mult: 1.5, risk: 'Default' },
    { mult: 1.1, risk: 'Anchor' },
    { mult: 1.8, risk: 'Aggressive' },
  ];

  React.useEffect(() => {
    if (phase !== 'playing') return;
    let raf, start = performance.now();
    const tick = () => {
      const elapsed = (performance.now() - start) / 1000;
      setT(elapsed);
      if (elapsed > 2.4) {
        setPhase('settled');
        const tier = tiers[selected];
        const success = Math.random() < (0.92 - selected * 0.08);
        setOutcome({ mult: success ? tier.mult : 0, success });
      } else {
        raf = requestAnimationFrame(tick);
      }
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [phase, selected]);

  const start = () => { setOutcome(null); setT(0); setPhase('playing'); };
  const reset = () => { setOutcome(null); setT(0); setPhase('idle'); };

  return (
    <div style={{ background: 'linear-gradient(160deg, #1a1208 0%, #0d0805 100%)', border: '1px solid var(--hairline)', position: 'relative', overflow: 'hidden', aspectRatio: '16 / 9' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.16,
        backgroundImage: 'linear-gradient(to right, rgba(255,180,140,0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,180,140,0.3) 1px, transparent 1px)',
        backgroundSize: '40px 40px' }} />

      {/* HUD */}
      <div style={{ position: 'absolute', top: 16, left: 20, right: 20, display: 'flex', justifyContent: 'space-between', zIndex: 2 }}>
        <span className="t-mono" style={{ fontSize: 10.5, letterSpacing: '0.2em', color: 'rgba(255,180,140,0.6)' }}>DIFFUSER · DEMO MODE · SEED #4A82F1</span>
        <span className="t-mono" style={{ fontSize: 10.5, letterSpacing: '0.2em', color: 'rgba(255,180,140,0.6)' }}>BALANCE 1,000.00 ⓒ</span>
      </div>

      {/* Tiers */}
      <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -55%)', display: 'flex', gap: 10, zIndex: 2 }}>
        {tiers.map((tier, i) => {
          const active = i === selected;
          const isResult = phase === 'settled' && i === selected;
          const fill = isResult ? (outcome?.success ? '#4F6B4A' : '#7F2A00') : (active ? '#B8450C' : 'rgba(20,15,10,0.5)');
          return (
            <button key={i} onClick={() => phase === 'idle' && setSelected(i)}
              disabled={phase !== 'idle'}
              style={{
                width: 96, height: 96, background: fill,
                border: '1px solid '+(active ? '#ff7a3c' : 'rgba(255,180,140,0.25)'),
                color: active ? '#fff1e5' : 'rgba(255,237,231,0.45)',
                fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em',
                cursor: phase === 'idle' ? 'pointer' : 'default',
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                transition: 'all 200ms ease',
                transform: phase === 'playing' && active ? `scale(${1 + Math.sin(t*4)*0.04})` : 'scale(1)'
              }}>
              <span>{tier.mult}×</span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 4, opacity: 0.8 }}>{tier.risk}</span>
            </button>
          );
        })}
      </div>

      {/* Bottom controls */}
      <div style={{ position: 'absolute', bottom: 18, left: 20, right: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 2 }}>
        <button onClick={reset} style={{ background: 'rgba(20,15,10,0.7)', color: 'rgba(255,237,231,0.7)', border: '1px solid rgba(255,180,140,0.3)', padding: '10px 16px', fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer' }}>
          Cash Out
        </button>
        <span className="t-mono" style={{ fontSize: 11, color: 'rgba(255,180,140,0.5)' }}>
          {phase === 'idle' && 'SELECT A TIER · CLICK NEXT'}
          {phase === 'playing' && `RESOLVING · ${t.toFixed(2)}s`}
          {phase === 'settled' && (outcome.success ? `WON ${outcome.mult}× · +${(outcome.mult * 100).toFixed(0)}.00` : 'COLLAPSED · -100.00')}
        </span>
        <button onClick={phase === 'idle' ? start : reset} style={{ background: 'var(--rust)', color: '#fff', border: 'none', padding: '10px 18px', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer' }}>
          {phase === 'idle' ? 'Next' : phase === 'playing' ? '...' : 'Replay'}
        </button>
      </div>
    </div>
  );
}

function GameDetailPage({ id }) {
  const game = GAMES.find(g => g.id === id) || GAMES[0];
  const others = GAMES.filter(g => g.id !== game.id).slice(0, 4);

  return (
    <div>
      <section style={{ paddingTop: 56, position: 'relative', overflow: 'hidden' }}>
        <Aurora intensity={0.45} tone="cool" />
        <div className="container" style={{ position: 'relative' }}>
          <div className="crumbs mb-md">
            <a href="#home" onClick={(e)=>{e.preventDefault(); window.fgNavigate('home');}}>Home</a>
            <span className="sep">/</span>
            <a href="#catalogue" onClick={(e)=>{e.preventDefault(); window.fgNavigate('catalogue');}}>Catalogue</a>
            <span className="sep">/</span>
            <span className="here">{game.title}</span>
          </div>
          <div className="row items-end justify-between mb-xl gap-lg" style={{ flexWrap: 'wrap' }}>
            <div style={{ flex: '1 1 480px', minWidth: 0 }}>
              <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 12, letterSpacing: '0.18em' }}>{game.code} · {game.kind.toUpperCase()}</span>
              <h1 className="t-h1" style={{ marginTop: 8 }}>{game.title}</h1>
              <p className="t-lede" style={{ marginTop: 14, maxWidth: 600 }}>{game.desc}</p>
            </div>
            <div className="col items-end gap-sm" style={{ flex: '0 0 auto' }}>
              <div className="row gap-sm" style={{ flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                <span className={`chip chip-${game.accent}`}>{game.kind.split('·')[0].trim()}</span>
                <span className="chip">VOL · {game.volatility}</span>
                <span className="chip">RTP · {game.rtp}</span>
              </div>
              {game.demoUrl && (
                <a className="btn btn-primary btn-arrow" href={game.demoUrl} target="_blank" rel="noopener noreferrer"
                  style={{ background: 'var(--moss, #4F6B4A)' }}>▶ Play demo</a>
              )}
              <a className="btn btn-primary btn-arrow" href="#contact" onClick={(e)=>{e.preventDefault(); window.fgNavigate('contact');}}>Request build</a>
            </div>
          </div>

          {/* Interactive preview */}
          {game.demoUrl ? (
            <div style={{ position: 'relative' }}>
              <div style={{ aspectRatio: '16 / 9', overflow: 'hidden', borderRadius: 'var(--r-card)', border: '1px solid var(--hairline)', boxShadow: 'var(--shadow-card)' }}>
                <iframe src={game.demoUrl} style={{ width: '100%', height: '100%', border: 'none' }} title={game.title + ' Demo'} allow="autoplay" />
              </div>
              <div className="row gap-sm" style={{ marginTop: 12, justifyContent: 'center', alignItems: 'center' }}>
                <span className="dot dot-live"></span>
                <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11 }}>↑ Live playable demo · interact directly above</span>
                <span style={{ margin: '0 8px', color: 'var(--hairline)' }}>|</span>
                <a href={game.demoUrl} target="_blank" rel="noopener noreferrer"
                  style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--rust)', textDecoration: 'none', letterSpacing: '0.08em' }}>
                  Open fullscreen ↗
                </a>
              </div>
            </div>
          ) : (
            <div style={{ aspectRatio: '16 / 9', overflow: 'hidden', borderRadius: 'var(--r-card)', border: '1px solid var(--hairline)', boxShadow: 'var(--shadow-card)' }}>
              <GameTile game={game} />
            </div>
          )}

          {id === 'diffuser' && (
            <div className="row gap-sm" style={{ marginTop: 12, justifyContent: 'center' }}>
              <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11 }}>↑ Live demo · click tiers to play a round.</span>
            </div>
          )}
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 56 }}>
            <div>
              <span className="t-label">// 01 · Mechanic</span>
              <h2 className="t-h2" style={{ marginTop: 10 }}>Precision risk management meets volatile payout structures.</h2>
              <p className="t-body" style={{ marginTop: 16, maxWidth: 600 }}>
                {game.title} introduces a multi-tiered risk algorithm where players actively manage their exposure grid. Built on our proprietary RNG architecture, it offers verifiable fairness while maintaining an intensely engaging progression curve. The interface strips away unnecessary visual noise, focusing entirely on the core mechanics of calculation and probability.
              </p>
              <p className="t-body" style={{ marginTop: 14, maxWidth: 600 }}>
                Every round publishes its seed pair before resolution; outcomes are reproducible by both operator and player. No black box, no proprietary obscurity. The math is the product.
              </p>

              <div className="grid mt-xl" style={{ gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid var(--hairline)' }}>
                {[
                  { k: 'Round duration', v: '4–12s', sub: 'player-paced' },
                  { k: 'Theoretical hold', v: '3.2%', sub: 'long-run expected' },
                  { k: 'Hit frequency', v: '38.4%', sub: 'win-any-tier' },
                  { k: 'Bonus frequency', v: '1 / 218', sub: 'feature trigger' },
                ].map((s, i) => (
                  <div key={i} style={{ padding: 20, borderRight: i % 2 === 0 ? '1px solid var(--hairline)' : 'none', borderBottom: i < 2 ? '1px solid var(--hairline)' : 'none' }}>
                    <span className="t-label">{s.k}</span>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, marginTop: 6, color: 'var(--ink)' }}>{s.v}</div>
                    <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11 }}>{s.sub}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="card" style={{ alignSelf: 'start', position: 'sticky', top: 88 }}>
              <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--hairline)' }}>
                <span className="t-label">Technical Specifications</span>
              </div>
              <div style={{ padding: 8 }}>
                {[
                  ['RTP', game.rtp],
                  ['Volatility', game.volatility],
                  ['Max Win', game.maxWin],
                  ['Devices', 'Desktop / Mobile / Tablet'],
                  ['Languages', '24'],
                  ['Currencies', 'Crypto + 38 fiat'],
                  ['Lobby Format', 'In-game iframe / Web SDK'],
                  ['Aspect Ratios', '16:9 · 9:16 · 4:3'],
                  ['Audio', 'WebAudio · Howler 2.2'],
                  ['Cert', 'GLI-19 · iTechLabs'],
                  ['Markets', 'MGA · UKGC · ONJN · SIGA · 10+'],
                ].map(([k, v], i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 12px', borderBottom: i < 10 ? '1px solid var(--hairline)' : 'none' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>{k}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--ink)', textAlign: 'right' }}>{v}</span>
                  </div>
                ))}
              </div>
              <div style={{ padding: 16, borderTop: '1px solid var(--hairline)', display: 'flex', flexDirection: 'column', gap: 10 }}>
                <a className="btn btn-secondary btn-arrow" href="#" onClick={(e)=>e.preventDefault()}>Math sheet (PDF)</a>
                <a className="btn btn-ghost" href="#" onClick={(e)=>e.preventDefault()}>Integration guide</a>
              </div>
            </div>
          </div>

          {/* Payout matrix */}
          <div className="mt-xxl">
            <div className="row items-end justify-between mb-lg" style={{ paddingBottom: 14, borderBottom: '1px solid var(--hairline)' }}>
              <div>
                <span className="t-label">// 02 · Payout matrix</span>
                <h3 className="t-h2" style={{ marginTop: 8 }}>Five tiers. Five risk profiles. One published curve.</h3>
              </div>
              <span className="t-mono" style={{ color: 'var(--ink-3)' }}>simulated · 10⁹ rounds</span>
            </div>
            <PayoutMatrix />
          </div>
        </div>
      </section>

      {/* Related */}
      <section className="section" style={{ background: 'var(--sandstone)' }}>
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="t-label">// 03 · Also from the studio</span>
              <h2 className="t-h2" style={{ marginTop: 6 }}>Adjacent titles.</h2>
            </div>
            <a className="btn btn-secondary btn-arrow" href="#catalogue" onClick={(e)=>{e.preventDefault(); window.fgNavigate('catalogue');}}>View all</a>
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {others.map(g => <GameCard key={g.id} game={g} />)}
          </div>
        </div>
      </section>
    </div>
  );
}

function PayoutMatrix() {
  // Render a hairline-styled bar chart of risk vs payout
  const tiers = [
    { name: 'T1 Anchor',       risk: 0.12, win: 1.10, hit: 0.86 },
    { name: 'T2 Conservative', risk: 0.28, win: 1.20, hit: 0.74 },
    { name: 'T3 Balanced',     risk: 0.42, win: 1.50, hit: 0.62 },
    { name: 'T4 Aggressive',   risk: 0.58, win: 1.80, hit: 0.48 },
    { name: 'T5 Volatile',     risk: 0.78, win: 2.50, hit: 0.32 },
  ];
  const max = 2.5;
  return (
    <div className="card" style={{ padding: '24px 28px' }}>
      <div className="grid" style={{ gridTemplateColumns: '160px 1fr 90px 70px', gap: 16, marginBottom: 12 }}>
        <span className="t-label">Tier</span>
        <span className="t-label">Win × · risk visualization</span>
        <span className="t-label" style={{ textAlign: 'right' }}>Hit %</span>
        <span className="t-label" style={{ textAlign: 'right' }}>Win ×</span>
      </div>
      {tiers.map((t, i) => (
        <div key={i} className="grid" style={{ gridTemplateColumns: '160px 1fr 90px 70px', gap: 16, padding: '14px 0', borderTop: '1px solid var(--hairline)', alignItems: 'center' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--ink)', letterSpacing: '0.06em' }}>{t.name}</span>
          <div style={{ height: 22, background: 'var(--sandstone)', position: 'relative', border: '1px solid var(--hairline)' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: `${(t.win / max) * 100}%`,
              background: i < 2 ? 'var(--moss)' : i < 4 ? 'var(--ochre)' : 'var(--rust)' }} />
            <div style={{ position: 'absolute', top: '50%', transform: 'translateY(-50%)', left: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink)', letterSpacing: '0.06em' }}>
              risk {(t.risk*100).toFixed(0)}%
            </div>
          </div>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, textAlign: 'right' }}>{(t.hit*100).toFixed(0)}%</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, textAlign: 'right', color: 'var(--rust)', fontWeight: 600 }}>{t.win.toFixed(2)}×</span>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { CataloguePage, GameDetailPage, InteractiveDiffuser });