/* fungames — News, News Article, About, Engagement, Contact */

function NewsPage() {
  const [cat, setCat] = React.useState('all');
  const cats = ['all', ...Array.from(new Set(NEWS.map(n => n.cat)))];
  const visible = cat === 'all' ? NEWS : NEWS.filter(n => n.cat === cat);
  const lead = visible[0];
  const secondary = visible.slice(1, 3);
  const rest = visible.slice(3);
  const fmtDate = (d) => d; // assume "MAR 14 · 2024" formatting already
  return (
    <div>
      <section style={{ paddingTop: 64, paddingBottom: 28, position: 'relative', overflow: 'hidden' }}>
        <Aurora intensity={0.5} 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><span className="here">News</span>
          </div>
          <div className="row items-end justify-between gap-lg">
            <div style={{ maxWidth: 760 }}>
              <span className="t-label">// Dispatches</span>
              <h1 className="t-h1" style={{ marginTop: 12 }}>News, releases, and field notes from the studio.</h1>
              <p className="t-lede" style={{ marginTop: 14, maxWidth: 600 }}>Engineering rationale, certification milestones, and operator-facing releases — written by the people who build the games.</p>
            </div>
            <span className="t-mono" style={{ color: 'var(--ink-3)' }}>// {NEWS.length} ARTICLES</span>
          </div>
        </div>
      </section>

      {/* Filter strip */}
      <section style={{ paddingBottom: 24 }}>
        <div className="container">
          <div className="news-filters">
            <span className="t-label" style={{ color: 'var(--ink-3)' }}>Filter</span>
            <div className="news-filter-tabs">
              {cats.map(c => (
                <button key={c} onClick={()=>setCat(c)}
                  className={`news-filter-tab ${cat===c ? 'is-active' : ''}`}>
                  {c}
                  <span className="news-filter-count">
                    {c === 'all' ? NEWS.length : NEWS.filter(n => n.cat === c).length}
                  </span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Featured + secondary editorial pair */}
      <section style={{ paddingBottom: 56 }}>
        <div className="container">
          <div className="news-feature-grid">
            {lead && (
              <article className="news-feature" onClick={()=>window.fgNavigateNews(lead.id)} role="button" tabIndex={0}>
                <div className="news-feature-cover">
                  <NewsHero id={lead.id} />
                  <span className="news-feature-tag">FEATURED</span>
                </div>
                <div className="news-feature-body">
                  <div className="row gap-sm" style={{ alignItems: 'center' }}>
                    <span className="chip chip-rust">{lead.cat}</span>
                    <span className="t-mono" style={{ color: 'var(--ink-3)' }}>{fmtDate(lead.date)}</span>
                    <span className="t-mono" style={{ color: 'var(--ink-3)' }}>· 4 min read</span>
                  </div>
                  <h2 className="news-feature-title">{lead.title}</h2>
                  <p className="t-lede news-feature-excerpt">{lead.excerpt}</p>
                  <div className="news-feature-foot">
                    <div className="row items-center gap-sm">
                      <span className="news-author-avatar">SE</span>
                      <span className="t-mono" style={{ color: 'var(--ink-2)' }}>Studio Editorial</span>
                    </div>
                    <span className="news-cta">Read article <span aria-hidden>→</span></span>
                  </div>
                </div>
              </article>
            )}
            <div className="news-secondary-col">
              {secondary.map(n => (
                <article key={n.id} className="news-secondary" onClick={()=>window.fgNavigateNews(n.id)} role="button" tabIndex={0}>
                  <div className="news-secondary-cover">
                    <NewsHero id={n.id} small />
                  </div>
                  <div className="news-secondary-body">
                    <div className="row gap-sm" style={{ alignItems: 'center' }}>
                      <span className="chip">{n.cat}</span>
                      <span className="t-mono" style={{ color: 'var(--ink-3)' }}>{fmtDate(n.date)}</span>
                    </div>
                    <h3 className="news-secondary-title">{n.title}</h3>
                    <p className="news-secondary-excerpt">{n.excerpt}</p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Latest archive grid */}
      {rest.length > 0 && (
        <section style={{ paddingBottom: 96 }}>
          <div className="container">
            <div className="row items-end justify-between mb-lg" style={{ paddingBottom: 16, borderBottom: '1px solid var(--hairline)' }}>
              <div>
                <span className="t-label">// Archive</span>
                <h2 className="t-h2" style={{ marginTop: 6 }}>More from the studio</h2>
              </div>
              <span className="t-mono" style={{ color: 'var(--ink-3)' }}>{rest.length} ARTICLES</span>
            </div>
            <div className="news-archive-grid">
              {rest.map(n => (
                <article key={n.id} className="news-archive-card" onClick={()=>window.fgNavigateNews(n.id)} role="button" tabIndex={0}>
                  <div className="news-archive-cover">
                    <NewsHero id={n.id} small />
                  </div>
                  <div className="news-archive-body">
                    <div className="row gap-sm" style={{ alignItems: 'center', marginBottom: 10 }}>
                      <span className="chip">{n.cat}</span>
                      <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11 }}>{fmtDate(n.date)}</span>
                    </div>
                    <h4 className="news-archive-title">{n.title}</h4>
                    <p className="news-archive-excerpt">{n.excerpt}</p>
                    <span className="news-archive-link">Read article <span aria-hidden>→</span></span>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

function NewsHero({ id, small }) {
  // generative SVG cover per article
  const variants = {
    'mga-license':       { bg: 'linear-gradient(140deg, #1E3A5F 0%, #0F1F35 100%)', glyph: 'cert' },
    'tier-1-aggregator': { bg: 'linear-gradient(140deg, #4F6B4A 0%, #2D3F2A 100%)', glyph: 'network' },
    'diffuser-launch':   { bg: 'linear-gradient(140deg, #C8501C 0%, #7F2A00 100%)', glyph: 'rings' },
    'rng-cert':          { bg: 'linear-gradient(140deg, #6B3A52 0%, #3A1F2C 100%)', glyph: 'check' },
    'sigma-talk':        { bg: 'linear-gradient(140deg, #B8853C 0%, #6E4A1C 100%)', glyph: 'mic' },
    'engagement':        { bg: 'linear-gradient(140deg, #2C2A28 0%, #0F0E0C 100%)', glyph: 'tools' },
  };
  const v = variants[id] || variants['mga-license'];
  return (
    <div style={{ width: '100%', height: '100%', background: v.bg, position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.12,
        backgroundImage: 'linear-gradient(to right, rgba(255,255,255,0.4) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.4) 1px, transparent 1px)',
        backgroundSize: '32px 32px' }} />
      <NewsGlyph kind={v.glyph} />
    </div>
  );
}
function NewsGlyph({ kind }) {
  const common = { width: '100%', height: '100%', display: 'block', position: 'relative', zIndex: 1 };
  if (kind === 'rings') return (
    <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice" style={common}>
      <g transform="translate(200 130)" stroke="rgba(255,237,231,0.5)" fill="none">
        {[...Array(8)].map((_, i) => <circle key={i} r={20 + i * 18} strokeWidth={i===3 ? 2 : 0.8} strokeOpacity={0.2 + (i%3)*0.18} />)}
        <circle r="14" fill="#fff1e5" />
      </g>
    </svg>
  );
  if (kind === 'cert') return (
    <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice" style={common}>
      <g transform="translate(200 120)" stroke="rgba(219,228,237,0.6)" fill="none">
        <rect x="-90" y="-60" width="180" height="120" strokeWidth="1.5" />
        <rect x="-60" y="-30" width="120" height="60" strokeWidth="0.8" strokeDasharray="4 4" />
        <text textAnchor="middle" y="6" fill="rgba(219,228,237,0.85)" fontFamily="Space Grotesk" fontSize="22" letterSpacing="0.18em" fontWeight="600">MGA · 2031</text>
      </g>
    </svg>
  );
  if (kind === 'network') return (
    <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice" style={common}>
      <g stroke="rgba(216,224,210,0.5)" strokeWidth="0.8" fill="rgba(216,224,210,0.85)">
        {[[200,120],[80,60],[320,60],[80,180],[320,180],[60,120],[340,120]].map(([x,y],i)=>(
          <g key={i}>
            <line x1={200} y1={120} x2={x} y2={y} />
            <circle cx={x} cy={y} r={i===0 ? 8 : 4} />
          </g>
        ))}
      </g>
    </svg>
  );
  if (kind === 'check') return (
    <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice" style={common}>
      <g transform="translate(200 120)" fill="none" stroke="rgba(236,221,230,0.7)" strokeWidth="1.5">
        <path d="M 0 -70 L 60 -50 V 30 C 60 60 30 75 0 80 C -30 75 -60 60 -60 30 V -50 Z" />
        <path d="M -22 5 L -5 22 L 30 -15" strokeWidth="3" />
      </g>
    </svg>
  );
  if (kind === 'mic') return (
    <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice" style={common}>
      <g transform="translate(200 120)" fill="none" stroke="rgba(240,226,199,0.7)" strokeWidth="1.4">
        <rect x="-12" y="-50" width="24" height="60" rx="12" fill="rgba(240,226,199,0.85)" />
        <path d="M -28 0 C -28 22 -14 32 0 32 C 14 32 28 22 28 0" />
        <line x1="0" y1="32" x2="0" y2="50" />
        <line x1="-12" y1="50" x2="12" y2="50" />
        <circle r="80" strokeOpacity="0.18" />
      </g>
    </svg>
  );
  // tools
  return (
    <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice" style={common}>
      <g stroke="rgba(255,237,231,0.55)" strokeWidth="1" fill="none">
        {[...Array(6)].map((_, c) => [...Array(4)].map((_, r) => (
          <rect key={`${c}-${r}`} x={40 + c * 56} y={30 + r * 50} width="44" height="38"
            fill={(c+r)%5===0 ? 'rgba(184,69,12,0.85)' : (c+r)%3===0 ? 'rgba(255,237,231,0.1)' : 'transparent'} />
        )))}
      </g>
    </svg>
  );
}

function NewsArticlePage({ id }) {
  const article = NEWS.find(a => a.id === id) || NEWS[0];
  const idx = NEWS.findIndex(a => a.id === article.id);
  const next = NEWS[(idx + 1) % NEWS.length];
  return (
    <div>
      <section style={{ paddingTop: 56 }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <div className="crumbs mb-md">
            <a href="#home" onClick={(e)=>{e.preventDefault(); window.fgNavigate('home');}}>Home</a>
            <span className="sep">/</span>
            <a href="#news" onClick={(e)=>{e.preventDefault(); window.fgNavigate('news');}}>News</a>
            <span className="sep">/</span>
            <span className="here">{article.cat}</span>
          </div>
          <div className="row gap-sm mb-md">
            <span className="chip chip-rust">{article.cat}</span>
            <span className="chip">{article.date}</span>
            <span className="chip">~ 4 min read</span>
          </div>
          <h1 className="t-h1" style={{ maxWidth: 760 }}>{article.title}</h1>
          <p className="t-lede" style={{ marginTop: 18, maxWidth: 720 }}>{article.excerpt}</p>
          <div className="row items-center gap-md mt-lg" style={{ paddingTop: 14, borderTop: '1px solid var(--hairline)' }}>
            <div style={{ width: 36, height: 36, background: 'var(--indigo)', color: 'var(--chalk)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontWeight: 600, letterSpacing: '0.1em', fontSize: 13 }}>SE</div>
            <div className="col">
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600 }}>Studio Editorial</span>
              <span className="t-mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>simplegames.fun newsroom</span>
            </div>
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="container" style={{ maxWidth: 1080 }}>
          <div style={{ aspectRatio: '21 / 9', overflow: 'hidden', border: '1px solid var(--hairline)' }}>
            <NewsHero id={article.id} />
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="container" style={{ maxWidth: 720 }}>
          <p className="t-body" style={{ fontSize: 16.5 }}>
            <span style={{ float: 'left', fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 600, lineHeight: 0.9, marginRight: 14, marginTop: 6, color: 'var(--rust)' }}>{(article.excerpt[0] || 'A')}</span>
            {article.excerpt} The renewal extends our Class 4 supplier permissions through 2031, granting our full catalogue continuity with operators across the European Economic Area. The license consolidates our regulatory footing, and reflects what we built our studio around from day one — a discipline of compliance-first engineering.
          </p>
          <p className="t-body" style={{ fontSize: 16.5, marginTop: 18 }}>
            Our compliance team submitted twelve months of operational telemetry alongside math models for thirteen titles, three of which shipped under the renewal window. The MGA's evaluation included an independent review of our hashed seed-pair RNG architecture and an on-site inspection of our Bucharest engineering office.
          </p>

          <h3 className="t-h3" style={{ marginTop: 34 }}>What it means for operators</h3>
          <p className="t-body" style={{ fontSize: 16.5, marginTop: 12 }}>
            Operators currently distributing simplegames.fun titles inside the MGA jurisdiction need take no action. The license carries forward without operational interruption, and our integration endpoints are unchanged. New operators can request integration documentation on the contact page; sandboxes provision in 48 hours.
          </p>

          <blockquote style={{ margin: '34px 0', padding: '22px 28px', borderLeft: '3px solid var(--rust)', background: 'var(--chalk)', border: '1px solid var(--hairline)', borderLeftWidth: 3 }}>
            <p style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500, lineHeight: 1.35, letterSpacing: '-0.01em', color: 'var(--ink)' }}>
              "Compliance is not a department here — it's a property of every commit we ship. The MGA renewal is the regulatory side of that being noticed."
            </p>
            <span className="t-mono" style={{ display: 'inline-block', marginTop: 14, color: 'var(--ink-3)' }}>— Maya Halberg, Lead Engineer</span>
          </blockquote>

          <h3 className="t-h3" style={{ marginTop: 12 }}>By the numbers</h3>
          <div className="grid mt-md" style={{ gridTemplateColumns: 'repeat(3, 1fr)', border: '1px solid var(--hairline)' }}>
            {[
              { k: 'License through', v: '2031' },
              { k: 'Markets covered', v: '14' },
              { k: 'Titles included', v: '13 / 13' },
            ].map((s,i)=>(
              <div key={i} style={{ padding: 22, borderRight: i<2 ? '1px solid var(--hairline)' : 'none' }}>
                <span className="t-label">{s.k}</span>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 600, marginTop: 6, color: 'var(--ink)' }}>{s.v}</div>
              </div>
            ))}
          </div>

          <p className="t-body" style={{ fontSize: 16.5, marginTop: 28 }}>
            The renewal also includes our engagement layer — tournaments, missions, jackpots and bonus mechanics — bringing those operator-side modules under the same supervisory umbrella as the games themselves. We expect this to streamline operator-side certification cycles for clients building bespoke retention experiences on top of our titles.
          </p>
        </div>
      </section>

      <section className="section hl-t" style={{ background: 'var(--sandstone)' }}>
        <div className="container row items-center justify-between gap-lg">
          <div>
            <span className="t-label">Up next</span>
            <h3 className="t-h2" style={{ marginTop: 8, maxWidth: 600 }}>{next.title}</h3>
          </div>
          <a className="btn btn-primary btn-arrow" href="#" onClick={(e)=>{e.preventDefault(); window.fgNavigateNews(next.id);}}>Read next</a>
        </div>
      </section>
    </div>
  );
}

/* ================= ABOUT ================= */

function AboutPage() {
  return (
    <div>
      <section style={{ paddingTop: 64, paddingBottom: 24, position: 'relative', overflow: 'hidden' }}>
        <Aurora intensity={0.55} 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">About</span>
          </div>
          <div className="grid" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 56 }}>
            <div>
              <span className="t-label">// Studio</span>
              <h1 className="t-h1" style={{ marginTop: 12 }}>An engineering studio for the iGaming industry. Architectural in posture; mathematical in method.</h1>
              <p className="t-lede" style={{ marginTop: 18 }}>simplegames.fun was founded in 2019 by three engineers who were tired of the industry's ornament. We build games for licensed operators — verifiably fair, mechanically lean, and structurally honest. We are 32 people across Bucharest, Tallinn, and Buenos Aires.</p>
            </div>
            <div className="card hl card-pad" style={{ padding: 28 }}>
              <span className="t-label">At a glance</span>
              <div className="grid mt-md" style={{ gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                {[
                  ['Founded','2019'],['Headcount','32'],['Studios','3'],
                  ['Markets','14'],['Live titles','13'],['Operators','480+']
                ].map(([k,v],i)=>(
                  <div key={i} style={{ borderTop: '1px solid var(--hairline)', paddingTop: 12 }}>
                    <span className="t-label">{k}</span>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, marginTop: 4 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="t-label">// 01 · Methodology</span>
              <h2 className="t-h2" style={{ marginTop: 6 }}>How we build, in five operations.</h2>
            </div>
            <p className="t-body" style={{ maxWidth: 360, marginBottom: 12 }}>Specification, simulation, engineering, certification, operation. Each step has a deliverable; none is skipped.</p>
          </div>

          {/* Methodology blog7-style cards */}
          <div className="method-grid">
            {[
              { n: '01', k: 'Specify', d: 'Mathematical specification first. Payout curves, hit frequencies, edge cases — modelled before a single sprite is drawn.', meta: 'Mathematics · Spec', accent: 'rust' },
              { n: '02', k: 'Simulate', d: '10⁹-round Monte Carlo. We stress-test boundaries — variance, run-length, RTP convergence — before shipping anything.', meta: 'Simulation · Variance', accent: 'indigo' },
              { n: '03', k: 'Engineer', d: 'Hashed seed-pair RNG, deterministic state, reproducible outcomes. Two engineers, paired, every commit reviewed.', meta: 'Engineering · Pair', accent: 'moss' },
              { n: '04', k: 'Certify', d: 'GLI-19 + iTechLabs. Independent labs see the code we have not styled for them. No certification theatre.', meta: 'Compliance · Labs', accent: 'ochre' },
              { n: '05', k: 'Operate', d: 'Telemetry, audits, dashboards. Ship is not done; ship is when measurement starts. Daily reconciliation, monthly review.', meta: 'Operate · Telemetry', accent: 'rust' },
            ].map((s, i) => (
              <article key={i} className={`method-card method-card-${i+1}`}>
                <div className="method-card-cover" data-accent={s.accent}>
                  <MethodCover step={i+1} accent={s.accent}/>
                  <span className="method-card-num">{s.n}</span>
                </div>
                <div className="method-card-body">
                  <span className={`chip chip-${s.accent}`}>{s.meta}</span>
                  <h3 className="method-card-title">{s.k}</h3>
                  <p className="method-card-desc">{s.d}</p>
                  <span className="method-card-link">Read more <span aria-hidden>→</span></span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* STUDIOS — refined editorial */}
      <section className="section" style={{ background: 'var(--sandstone)' }}>
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="t-label">// 02 · Studios</span>
              <h2 className="t-h2" style={{ marginTop: 6 }}>Three rooms, one workshop.</h2>
            </div>
            <p className="t-body" style={{ maxWidth: 360, marginBottom: 12 }}>We deliberately keep our footprint architectural and small. Three studios with overlapping disciplines: engineering, math, design.</p>
          </div>
          <div className="studio-grid">
            {[
              { n: '01', city: 'Bucharest', country: 'Romania', tz: 'GMT+2', team: 'Engineering & RNG',
                desc: 'Our headquarters since 2019. Where the RNG, the integration layer, and the operator config plane are built.',
                size: '14', disciplines: ['Backend','RNG','SRE'], lat: '44.43° N', lng: '26.10° E' },
              { n: '02', city: 'Tallinn',   country: 'Estonia', tz: 'GMT+2', team: 'Math & Simulation',
                desc: 'Stochastic modelling team. Variance profiles, payout curves, 10⁹-round Monte Carlo. The numbers room.',
                size: '9',  disciplines: ['Math','Simulation','Research'], lat: '59.43° N', lng: '24.75° E' },
              { n: '03', city: 'Buenos Aires', country: 'Argentina', tz: 'GMT−3', team: 'Visual & Motion',
                desc: 'Lobby, audio, UX. Where the disciplined exterior of every title gets composed before review.',
                size: '9',  disciplines: ['Visual','Motion','Audio'], lat: '34.61° S', lng: '58.38° W' },
            ].map((s, i) => (
              <article key={i} className="studio-card">
                <div className="studio-card-head">
                  <span className="t-mono" style={{ color: 'var(--ink-3)' }}>{s.n} / {s.country.toUpperCase()}</span>
                  <span className="t-mono" style={{ color: 'var(--ink-3)' }}>{s.tz}</span>
                </div>
                <div className="studio-card-body">
                  <h3 className="studio-card-city">{s.city}</h3>
                  <span className="studio-card-team">{s.team}</span>
                  <p className="t-body" style={{ marginTop: 12 }}>{s.desc}</p>
                </div>
                <StudioMap lat={s.lat} lng={s.lng} index={i}/>
                <div className="studio-card-foot">
                  <div className="row gap-sm">
                    {s.disciplines.map((d,j)=>(<span key={j} className="chip">{d}</span>))}
                  </div>
                  <span className="t-mono" style={{ color: 'var(--ink-3)' }}>{s.size} people</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="sec-head">
            <div className="lhs">
              <span className="t-label">// 03 · The Workshop</span>
              <h2 className="t-h2" style={{ marginTop: 6 }}>Some of the people who make this.</h2>
            </div>
            <span className="t-mono" style={{ color: 'var(--ink-3)' }}>32 PEOPLE · 11 NATIONALITIES</span>
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { n: 'Maya Halberg', r: 'Lead Engineer · RNG', c: 'rust' },
              { n: 'Pieter Roest', r: 'Head of Math', c: 'indigo' },
              { n: 'Ines Marquez', r: 'Design Director', c: 'moss' },
              { n: 'Tomáš Krejčí', r: 'Compliance Lead', c: 'ochre' },
            ].map((p, i) => (
              <div key={i} className="card card-hover" style={{ padding: 0, overflow: 'hidden' }}>
                <div style={{ aspectRatio: '4 / 5', background: `var(--${p.c})`, position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', inset: 0, opacity: 0.16,
                    backgroundImage: 'linear-gradient(to right, rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.5) 1px, transparent 1px)',
                    backgroundSize: '20px 20px' }} />
                  <span style={{ position: 'absolute', bottom: 14, left: 16, color: 'rgba(255,255,255,0.9)', fontFamily: 'var(--font-display)', fontSize: 76, fontWeight: 600, lineHeight: 0.9, letterSpacing: '-0.04em' }}>
                    {p.n.split(' ').map(s=>s[0]).join('')}
                  </span>
                </div>
                <div style={{ padding: '14px 16px', borderTop: '1px solid var(--hairline)' }}>
                  <h5 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600 }}>{p.n}</h5>
                  <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11.5 }}>{p.r}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function MethodCover({ step, accent }) {
  const accentMap = { rust: '#B8450C', indigo: '#1E3A5F', moss: '#4F6B4A', ochre: '#B8853C' };
  const c = accentMap[accent] || '#B8450C';
  const w = 600, h = 280;
  if (step === 1) {
    // Specify — blueprint grid + payout curve
    return (
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
        <defs>
          <pattern id={`mg1-${accent}`} width="24" height="24" patternUnits="userSpaceOnUse">
            <path d="M24 0H0V24" fill="none" stroke={c} strokeOpacity="0.18" strokeWidth="0.6"/>
          </pattern>
        </defs>
        <rect width={w} height={h} fill={`url(#mg1-${accent})`}/>
        <path d={`M30 220 Q150 180 230 150 T420 80 T${w-30} 60`} fill="none" stroke={c} strokeWidth="2"/>
        <path d={`M30 220 Q150 180 230 150 T420 80 T${w-30} 60 L${w-30} ${h-30} L30 ${h-30} Z`} fill={c} fillOpacity="0.12"/>
        {[80,180,280,380,480].map((x,i)=>(<circle key={i} cx={x} cy={220 - i*30} r="3.5" fill={c}/>))}
        <text x="30" y={h-12} fontFamily="JetBrains Mono, monospace" fontSize="10" fill={c} fillOpacity="0.7">RTP_TARGET = 96.40%  ·  σ = 4.81  ·  HIT_FREQ = 0.284</text>
      </svg>
    );
  }
  if (step === 2) {
    // Simulate — Monte Carlo scatter + convergence
    const dots = Array.from({ length: 220 }, (_, i) => {
      const x = 30 + (i*2.6) % (w-60);
      const noise = Math.sin(i*1.7)*40 + Math.cos(i*0.9)*30;
      const y = h/2 + noise * (1 - i/220);
      return [x, y];
    });
    return (
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
        <line x1="30" y1={h/2} x2={w-30} y2={h/2} stroke={c} strokeOpacity="0.25" strokeDasharray="4 4"/>
        {dots.map(([x,y],i)=>(<circle key={i} cx={x} cy={y} r="1.6" fill={c} fillOpacity={0.25 + (i/dots.length)*0.55}/>))}
        <text x="30" y="28" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={c}>10⁹ ROUNDS · CONVERGING</text>
        <text x={w-30} y={h-14} textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={c} fillOpacity="0.7">δ → 0.0001</text>
      </svg>
    );
  }
  if (step === 3) {
    // Engineer — code-like blocks
    const lines = [
      [10,60,1.0],[10,28,0.6],[24,40,0.8],[24,52,0.7],
      [10,72,0.9],[24,30,0.6],[38,44,0.7],[10,80,0.8],
      [10,36,0.6],[24,60,0.7],[10,48,0.85]
    ];
    return (
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
        <rect width={w} height={h} fill="#1A1612"/>
        {lines.map(([x,len,o], i) => (
          <rect key={i} x={x+30} y={30 + i*20} width={len*5} height="6" fill={c} fillOpacity={o} rx="1"/>
        ))}
        <text x="30" y="20" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={c}>// rng.seed(h₁,h₂) — deterministic</text>
      </svg>
    );
  }
  if (step === 4) {
    // Certify — stamp + checks
    return (
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
        <rect width={w} height={h} fill="var(--sandstone)"/>
        <circle cx={w/2} cy={h/2} r="78" fill="none" stroke={c} strokeWidth="1.5"/>
        <circle cx={w/2} cy={h/2} r="64" fill="none" stroke={c} strokeWidth="0.6" strokeDasharray="3 3"/>
        <text x={w/2} y={h/2-6} textAnchor="middle" fontFamily="Fraunces, serif" fontSize="22" fontWeight="600" fill={c}>GLI-19</text>
        <text x={w/2} y={h/2+14} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={c}>CERTIFIED · 2024</text>
        {Array.from({length: 12}).map((_,i)=>{
          const a = i*30 * Math.PI/180;
          return <line key={i} x1={w/2 + Math.cos(a)*84} y1={h/2 + Math.sin(a)*84} x2={w/2 + Math.cos(a)*92} y2={h/2 + Math.sin(a)*92} stroke={c} strokeWidth="1.5"/>;
        })}
        <text x="30" y="28" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={c} fillOpacity="0.8">iTechLabs · MGA · UKGC</text>
      </svg>
    );
  }
  // step 5 — Operate — telemetry sparklines
  const bars = Array.from({length: 32}, (_,i)=> 30 + Math.abs(Math.sin(i*0.6))*100 + (i%3===0?20:0));
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
      <text x="30" y="28" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={c}>RECONCILIATION · LAST 32 DAYS</text>
      {bars.map((bh, i) => (
        <rect key={i} x={30 + i*16} y={h-40-bh} width="10" height={bh} fill={c} fillOpacity={0.55 + (i/bars.length)*0.4}/>
      ))}
      <line x1="30" y1={h-40} x2={w-30} y2={h-40} stroke={c} strokeWidth="1"/>
      <text x={w-30} y={h-14} textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="10" fill={c} fillOpacity="0.7">99.998% MATCH</text>
    </svg>
  );
}

function StudioMap({ lat, lng, index }) {
  // Stylized topographic squiggle map
  const seeds = [
    { paths: ['M0 60 Q60 30 120 50 T240 40 T360 70', 'M0 100 Q80 80 160 95 T320 85 T420 110', 'M0 140 Q60 120 130 135 T280 130 T420 150', 'M0 180 Q70 160 150 175 T320 165'] , pin: [220, 110] },
    { paths: ['M0 50 Q70 70 140 55 T280 60 T420 50', 'M0 90 Q60 110 140 95 T300 100 T420 90', 'M0 130 Q80 150 170 135 T340 145 T420 130', 'M0 170 Q60 190 150 175 T310 185'], pin: [180, 75] },
    { paths: ['M0 70 Q80 50 160 65 T320 55 T420 70', 'M0 110 Q70 90 150 105 T310 95 T420 110', 'M0 150 Q60 130 140 145 T300 135 T420 150', 'M0 190 Q80 170 170 185 T340 175'], pin: [260, 130] }
  ];
  const seed = seeds[index % seeds.length];
  return (
    <div className="studio-map">
      <svg viewBox="0 0 420 220" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
        <rect width="420" height="220" fill="var(--sandstone)"/>
        {seed.paths.map((p, i) => (
          <path key={i} d={p} fill="none" stroke="var(--rust)" strokeOpacity={0.2 + i*0.06} strokeWidth="1"/>
        ))}
        <circle cx={seed.pin[0]} cy={seed.pin[1]} r="14" fill="var(--rust)" fillOpacity="0.12"/>
        <circle cx={seed.pin[0]} cy={seed.pin[1]} r="6" fill="var(--rust)" fillOpacity="0.25"/>
        <circle cx={seed.pin[0]} cy={seed.pin[1]} r="2.5" fill="var(--rust)"/>
      </svg>
      <div className="studio-map-coords t-mono">{lat} · {lng}</div>
    </div>
  );
}

/* ================= ENGAGEMENT ================= */

function EngagementPage() {
  const tools = [
    { id: 'tournaments', k: 'Tournaments', short: 'Live leaderboards', d: 'Operator-tunable leaderboards spanning any subset of titles. Real-time scoring, sponsored prize pools, geo-isolated brackets.', accent: 'rust',
      stats: [['Active','142'],['Players','38K'],['Avg duration','72h']],
      bullets: ['Real-time scoring engine','Sponsored & funded prize pools','Geo-isolated brackets','24-hour to 30-day events'] },
    { id: 'missions', k: 'Missions', short: 'Step quests', d: 'Step-quests with deterministic completion criteria. Players progress through bands; operators tune reward intensity and anti-fatigue cooldowns.', accent: 'indigo',
      stats: [['Templates','24'],['Completion','62%'],['Retention lift','+18pp']],
      bullets: ['Deterministic completion criteria','Tunable reward intensity','Anti-fatigue cooldowns','Daily, weekly, seasonal cadences'] },
    { id: 'jackpots', k: 'Jackpot Engine', short: 'Pooled prizes', d: 'Pooled, sponsored or fixed jackpots — trigger by network, by game, or by chosen RTP carve-out. Synchronized across all titles.', accent: 'ochre',
      stats: [['Avg pool','€42K'],['Trigger','1 / 38K'],['Markets','11']],
      bullets: ['Pooled, sponsored or fixed','Trigger by network or per-game','RTP carve-out modelling','Synchronised across catalogue'] },
    { id: 'bonus', k: 'Bonus Mechanics', short: 'Retention curves', d: 'Free rounds, cashback, deposit matches, retention curves. Wired into every title via a single configuration; no per-game integration burden.', accent: 'moss',
      stats: [['Bonus types','9'],['Conv. uplift','+24%'],['Player ROI','+11pp']],
      bullets: ['Free rounds & cashback','Deposit-match programmes','Retention-curve scheduling','One config — all titles'] },
  ];
  const [activeId, setActiveId] = React.useState(tools[0].id);
  const active = tools.find(t => t.id === activeId) || tools[0];

  return (
    <div>
      <section style={{ paddingTop: 64, paddingBottom: 32, position: 'relative', overflow: 'hidden' }}>
        <Aurora intensity={0.55} 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">Engagement</span>
          </div>
          <div className="row items-end justify-between gap-lg">
            <div style={{ maxWidth: 880 }}>
              <span className="t-label">// Engagement Tools 2.0</span>
              <h1 className="t-h1" style={{ marginTop: 12 }}>One engagement layer. Every simplegames.fun title. Operator-tunable, live-deployable.</h1>
              <p className="t-lede" style={{ marginTop: 18, maxWidth: 700 }}>Built so your retention team can ship without engineering. A single config surface for tournaments, missions, jackpots and bonus mechanics — across our full catalogue and yours.</p>
            </div>
          </div>
        </div>
      </section>

      {/* TABBED FEATURE BLOCK (feature108-style) */}
      <section className="section-sm">
        <div className="container">
          {/* Tab strip */}
          <div className="feat-tabs" role="tablist" aria-label="Engagement tools">
            {tools.map(t => (
              <button key={t.id}
                role="tab"
                aria-selected={t.id === activeId}
                onClick={() => setActiveId(t.id)}
                className={`feat-tab ${t.id === activeId ? 'is-active' : ''}`}>
                <span className="feat-tab-icon" data-accent={t.accent}><FeatIcon kind={t.id}/></span>
                <span className="feat-tab-text">
                  <span className="feat-tab-title">{t.k}</span>
                  <span className="feat-tab-sub">{t.short}</span>
                </span>
              </button>
            ))}
          </div>

          {/* Active panel */}
          <div className="feat-panel">
            <div className="feat-panel-grid">
              <div className="feat-panel-copy">
                <span className={`chip chip-${active.accent}`} style={{ marginBottom: 14 }}>0{tools.findIndex(t=>t.id===active.id)+1} · {active.k}</span>
                <h3 className="t-h2">{active.k}</h3>
                <p className="t-lede" style={{ marginTop: 14 }}>{active.d}</p>
                <ul className="feat-bullets">
                  {active.bullets.map((b,i)=>(
                    <li key={i}><span className="feat-bullet-dot" data-accent={active.accent}/>{b}</li>
                  ))}
                </ul>
                <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--hairline)', paddingTop: 18, marginTop: 26, gap: 12 }}>
                  {active.stats.map(([k,v], j) => (
                    <div key={j}>
                      <span className="t-label">{k}</span>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, marginTop: 4 }}>{v}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="feat-panel-visual" data-accent={active.accent}>
                <FeatVisual kind={active.id} accent={active.accent}/>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ink)', color: 'var(--chalk)' }}>
        <div className="container">
          <div className="row items-end justify-between gap-lg mb-xl" style={{ paddingBottom: 14, borderBottom: '1px solid rgba(255,237,231,0.15)' }}>
            <div>
              <span className="t-label" style={{ color: 'rgba(255,237,231,0.6)' }}>// Architecture</span>
              <h2 className="t-h1" style={{ color: 'var(--chalk)', marginTop: 8 }}>Wired in once. Configured forever.</h2>
            </div>
            <span className="t-mono" style={{ color: 'rgba(255,237,231,0.5)' }}>v4.18.0 · single endpoint</span>
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid rgba(255,237,231,0.15)' }}>
            {[
              { n: '01', k: 'Operator config plane', d: 'A single REST + WebSocket endpoint. Schedule a tournament, fund a pool, launch a mission.' },
              { n: '02', k: 'Game-side SDK', d: 'Auto-injected into every title. Renders engagement chrome with operator branding. Zero per-title work.' },
              { n: '03', k: 'Player-side ledger', d: 'Deterministic, audited, and fully reconcilable with operator wallet ledgers in real time.' },
            ].map((s, i) => (
              <div key={i} style={{ padding: 28, borderRight: i<2 ? '1px solid rgba(255,237,231,0.15)' : 'none' }}>
                <span className="t-mono" style={{ color: 'var(--rust)', fontSize: 13, fontWeight: 600 }}>{s.n}</span>
                <h4 style={{ margin: '20px 0 10px', fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--chalk)' }}>{s.k}</h4>
                <p className="t-body" style={{ color: 'rgba(255,237,231,0.65)', margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* Feature 108 helpers — icons for tabs, visuals for the active panel */
function FeatIcon({ kind }) {
  const s = { width: 22, height: 22, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'tournaments') return (<svg viewBox="0 0 24 24" {...s}><path d="M8 21h8M12 17v4M6 4h12v3a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V4Z"/><path d="M6 5H4v2a3 3 0 0 0 3 3M18 5h2v2a3 3 0 0 1-3 3"/></svg>);
  if (kind === 'missions')   return (<svg viewBox="0 0 24 24" {...s}><path d="M4 6h7M4 12h12M4 18h7"/><path d="M14 18l3 3 4-5"/></svg>);
  if (kind === 'jackpots')   return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="8"/><path d="M12 8v8M8 12h8"/></svg>);
  return (<svg viewBox="0 0 24 24" {...s}><path d="M12 2l2.4 5 5.6.8-4 4 1 5.6L12 14.8 6.9 17.4 8 11.8 4 7.8l5.6-.8L12 2Z"/></svg>);
}

function FeatVisual({ kind, accent }) {
  const accentMap = { rust: '#B8450C', indigo: '#1E3A5F', moss: '#4F6B4A', ochre: '#B8853C' };
  const c = accentMap[accent] || '#B8450C';
  if (kind === 'tournaments') {
    const rows = [
      { rank: 1, name: 'PLR_4821', score: '124,890', delta: '+2.1k' },
      { rank: 2, name: 'PLR_2018', score: '118,420', delta: '+1.4k' },
      { rank: 3, name: 'PLR_9304', score: '111,200', delta: '+0.8k' },
      { rank: 4, name: 'PLR_5512', score: '102,840', delta: '+0.4k' },
      { rank: 5, name: 'PLR_7720', score: ' 98,140', delta: '−0.1k' },
    ];
    return (
      <div className="feat-vis-card">
        <div className="feat-vis-head">
          <span className="t-label">Live leaderboard · WEEKLY OPEN</span>
          <span className="dot dot-live"/>
        </div>
        <div className="feat-vis-rows">
          {rows.map((r,i)=>(
            <div key={i} className="feat-vis-row">
              <span className="feat-vis-rank" style={{ color: i<3 ? c : 'var(--ink-3)' }}>{String(r.rank).padStart(2,'0')}</span>
              <span className="feat-vis-name">{r.name}</span>
              <span className="feat-vis-bar"><span style={{ width: `${100 - i*14}%`, background: c }}/></span>
              <span className="feat-vis-score t-num">{r.score}</span>
              <span className="feat-vis-delta" style={{ color: r.delta.startsWith('−') ? 'var(--ink-3)' : c }}>{r.delta}</span>
            </div>
          ))}
        </div>
        <div className="feat-vis-foot">
          <span className="t-mono">38,420 PLAYERS · 72h LEFT</span>
          <span className="t-mono" style={{ color: c }}>POOL €48,210</span>
        </div>
      </div>
    );
  }
  if (kind === 'missions') {
    const steps = [
      { k: 'Land 3 multipliers', done: true,  v: '3 / 3' },
      { k: 'Win above 10×',      done: true,  v: '10.4×' },
      { k: 'Bank 5 rounds',      done: true,  v: '5 / 5' },
      { k: 'Hit a streak of 4',  done: false, v: '2 / 4' },
      { k: 'Survive 50 rounds',  done: false, v: '34 / 50' },
    ];
    return (
      <div className="feat-vis-card">
        <div className="feat-vis-head">
          <span className="t-label">Quest · WEEKEND CIRCUIT</span>
          <span className="t-mono" style={{ color: c }}>3 / 5</span>
        </div>
        <div className="feat-vis-mission">
          {steps.map((s,i)=>(
            <div key={i} className={`feat-vis-step ${s.done ? 'is-done' : ''}`}>
              <span className="feat-vis-step-tick" style={{ borderColor: s.done ? c : 'var(--hairline-strong)', background: s.done ? c : 'transparent' }}>
                {s.done && <svg viewBox="0 0 14 14" width="10" height="10" fill="none" stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7.5 6 10.5 11 4"/></svg>}
              </span>
              <span className="feat-vis-step-k">{s.k}</span>
              <span className="feat-vis-step-v t-num">{s.v}</span>
            </div>
          ))}
        </div>
        <div className="feat-vis-foot">
          <span className="t-mono">REWARD · 50 FREE ROUNDS · MIRA</span>
          <span className="t-mono" style={{ color: c }}>UNLOCKS IN 1d 4h</span>
        </div>
      </div>
    );
  }
  if (kind === 'jackpots') {
    return (
      <div className="feat-vis-card" style={{ alignItems: 'stretch' }}>
        <div className="feat-vis-head">
          <span className="t-label">Pool · MIDNIGHT NETWORK</span>
          <span className="dot dot-live"/>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '24px 0' }}>
          <span className="t-mono" style={{ color: 'var(--ink-3)' }}>CURRENT POOL</span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 56, fontWeight: 600, letterSpacing: '-0.03em', color: c, fontVariantNumeric: 'tabular-nums' }}>€48,210</span>
          <span className="t-mono" style={{ color: 'var(--ink-3)' }}>+€12 / s · 12 OPERATORS POOLING</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderTop: '1px solid var(--hairline)', paddingTop: 14, gap: 12 }}>
          {[['Avg trigger','38K'],['Last hit','2d ago'],['Carve-out','0.18%']].map(([k,v],i)=>(
            <div key={i}><span className="t-label">{k}</span><div className="t-num" style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, marginTop: 2 }}>{v}</div></div>
          ))}
        </div>
      </div>
    );
  }
  // bonus
  const bonuses = [
    { k: 'Free rounds',     v: '120',  pct: 84 },
    { k: 'Cashback 10%',    v: '€840', pct: 62 },
    { k: 'Deposit match',   v: '×2',   pct: 48 },
    { k: 'Retention curve', v: 'D7+',  pct: 36 },
  ];
  return (
    <div className="feat-vis-card">
      <div className="feat-vis-head">
        <span className="t-label">Programme · OCTOBER COHORT</span>
        <span className="t-mono" style={{ color: c }}>+24% conv.</span>
      </div>
      <div className="feat-vis-rows" style={{ gap: 12 }}>
        {bonuses.map((b,i)=>(
          <div key={i} className="feat-vis-row" style={{ gridTemplateColumns: '1fr 60px 1fr 56px' }}>
            <span className="feat-vis-name" style={{ fontFamily: 'var(--font-display)', fontWeight: 500 }}>{b.k}</span>
            <span className="feat-vis-score t-num" style={{ textAlign: 'left' }}>{b.v}</span>
            <span className="feat-vis-bar"><span style={{ width: `${b.pct}%`, background: c }}/></span>
            <span className="t-mono" style={{ color: c, textAlign: 'right' }}>{b.pct}%</span>
          </div>
        ))}
      </div>
      <div className="feat-vis-foot">
        <span className="t-mono">9 BONUS TYPES · ALL TITLES</span>
        <span className="t-mono" style={{ color: c }}>+11pp ROI</span>
      </div>
    </div>
  );
}

/* ================= CONTACT ================= */

function ContactPage() {
  const [state, setState] = React.useState({ name: '', co: '', mkt: '', message: '' });
  const set = (k) => (e) => setState(s => ({ ...s, [k]: e.target.value }));
  const [sent, setSent] = React.useState(false);
  return (
    <div>
      <section style={{ paddingTop: 64, paddingBottom: 24, position: 'relative', overflow: 'hidden' }}>
        <Aurora intensity={0.5} tone="mix" />
        <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">Contact</span>
          </div>
          <div className="grid" style={{ gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'start' }}>
            <div>
              <span className="t-label">// Onboarding</span>
              <h1 className="t-h1" style={{ marginTop: 12 }}>Bring our catalogue to your platform.</h1>
              <p className="t-lede" style={{ marginTop: 16, maxWidth: 540 }}>
                Single-API integration, sandbox in 48 hours, production in two weeks. Tell us what you operate; we'll route to the right team.
              </p>

              <div className="card" style={{ marginTop: 32, padding: 28 }}>
                {sent ? (
                  <div className="col gap-sm" style={{ minHeight: 380, alignItems: 'center', justifyContent: 'center' }}>
                    <div style={{ width: 64, height: 64, border: '2px solid var(--moss)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--moss)', fontSize: 28 }}>✓</div>
                    <h3 className="t-h3" style={{ marginTop: 12, marginBottom: 0 }}>Request received.</h3>
                    <p className="t-body" style={{ textAlign: 'center', maxWidth: 360 }}>We route every onboarding request within four working hours. Expect an integration deck and a 30-min discovery call invite at the address you provided.</p>
                    <button className="btn btn-ghost" onClick={()=>{ setSent(false); setState({name:'',co:'',mkt:'',message:''}); }}>Send another</button>
                  </div>
                ) : (
                  <form onSubmit={(e)=>{e.preventDefault(); setSent(true);}}>
                    <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                      <div className="col gap-xs">
                        <label className="t-label">Your name</label>
                        <input className="input" value={state.name} onChange={set('name')} placeholder="Maya Halberg" />
                      </div>
                      <div className="col gap-xs">
                        <label className="t-label">Work email</label>
                        <input className="input" type="email" placeholder="maya@operator.io" />
                      </div>
                      <div className="col gap-xs">
                        <label className="t-label">Operator / Company</label>
                        <input className="input" value={state.co} onChange={set('co')} placeholder="Bright Casino Group" />
                      </div>
                      <div className="col gap-xs">
                        <label className="t-label">Primary market</label>
                        <select className="input" value={state.mkt} onChange={set('mkt')}>
                          <option value="">Select…</option>
                          <option>Malta</option><option>United Kingdom</option><option>Romania</option>
                          <option>Sweden</option><option>Ontario</option><option>South Africa</option>
                          <option>Other</option>
                        </select>
                      </div>
                    </div>
                    <div className="col gap-xs mt-md">
                      <label className="t-label">What do you need?</label>
                      <div className="row gap-sm" style={{ flexWrap: 'wrap', marginTop: 4 }}>
                        {['Integration deck','Sandbox access','Specific titles','Engagement layer','Custom RFP'].map(t => (
                          <span key={t} className="chip" style={{ cursor: 'pointer' }}>{t}</span>
                        ))}
                      </div>
                    </div>
                    <div className="col gap-xs mt-md">
                      <label className="t-label">Notes</label>
                      <textarea className="input" rows="4" value={state.message} onChange={set('message')} placeholder="Anything that'll help us route…" style={{ resize: 'vertical', fontFamily: 'var(--font-body)' }} />
                    </div>
                    <div className="row items-center justify-between mt-lg">
                      <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11 }}>RESPONSE WITHIN 4 WORKING HOURS · GMT</span>
                      <button type="submit" className="btn btn-primary btn-arrow">Send request</button>
                    </div>
                  </form>
                )}
              </div>
            </div>

            <div className="col gap-md">
              <div className="card card-pad">
                <span className="t-label">Direct lines</span>
                <div className="col gap-md mt-md">
                  {[
                    { k: 'Onboarding', v: 'partners@simplegames.fun', sub: 'Operators, aggregators, platforms' },
                    { k: 'Press', v: 'press@simplegames.fun', sub: 'Editorial, interviews' },
                    { k: 'Compliance', v: 'compliance@simplegames.fun', sub: 'Auditors, regulators' },
                    { k: 'Careers', v: 'jobs@simplegames.fun', sub: 'We are always hiring engineers' },
                  ].map((c, i) => (
                    <div key={i} style={{ paddingTop: i ? 14 : 0, borderTop: i ? '1px solid var(--hairline)' : 'none' }}>
                      <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>{c.k}</span>
                      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 600, marginTop: 4, color: 'var(--rust)' }}>{c.v}</div>
                      <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11.5 }}>{c.sub}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="card card-pad">
                <span className="t-label">Studios</span>
                <div className="col gap-md mt-md">
                  {[
                    { city: 'Bucharest', addr: 'Strada Polonă 14, 010491', tag: 'HQ · ENG' },
                    { city: 'Tallinn',   addr: 'Tartu mnt 80, 10112',     tag: 'MATH' },
                    { city: 'Buenos Aires', addr: 'Av. Corrientes 348, C1043', tag: 'DESIGN' },
                  ].map((s, i) => (
                    <div key={i} className="row justify-between items-start" style={{ paddingTop: i ? 12 : 0, borderTop: i ? '1px solid var(--hairline)' : 'none' }}>
                      <div>
                        <h4 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600 }}>{s.city}</h4>
                        <span className="t-mono" style={{ color: 'var(--ink-3)', fontSize: 11.5 }}>{s.addr}</span>
                      </div>
                      <span className="chip">{s.tag}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="card card-pad" style={{ background: 'var(--ink)', color: 'var(--chalk)', borderColor: 'var(--ink)' }}>
                <span className="t-label" style={{ color: 'rgba(255,237,231,0.6)' }}>System status</span>
                <div className="row items-center gap-sm mt-sm">
                  <span className="dot dot-live"></span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13.5 }}>All systems operational</span>
                </div>
                <p className="t-mono" style={{ color: 'rgba(255,237,231,0.55)', fontSize: 11.5, marginTop: 10, marginBottom: 0 }}>UPTIME 99.998% · LAST 365D</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { NewsPage, NewsArticlePage, AboutPage, EngagementPage, ContactPage });