<?php
// ─── DATA LAYER ───────────────────────────────────────────────────────────────
$platforms = [
    [
        'rank'  => 1,
        'cat'   => 'website',
        'emoji' => '🌐',
        'name'  => 'Premium Display',
        'sub'   => 'Mediavine / Raptive',
        'rpm'   => 28.0,
        'max'   => 45.0,
        'cpm'   => 35.0,
        'trend' => 'up',
        'note'  => 'Requires 50k+ sessions/mo. Highest RPM achievable on the open web right now.',
    ],
    [
        'rank'  => 2,
        'cat'   => 'website',
        'emoji' => '⚡',
        'name'  => 'Ezoic AI Optimized',
        'sub'   => 'AI-Driven Placement',
        'rpm'   => 8.0,
        'max'   => 14.0,
        'cpm'   => 18.0,
        'trend' => 'up',
        'note'  => 'Beats raw AdSense 30–100% for most sites. Easy migration path from AdSense.',
    ],
    [
        'rank'  => 3,
        'cat'   => 'video',
        'emoji' => '▶',
        'name'  => 'YouTube Long-form',
        'sub'   => 'YPP · 55% Rev Share',
        'rpm'   => 6.5,
        'max'   => 15.0,
        'cpm'   => 9.0,
        'trend' => 'up',
        'note'  => 'Undisputed video king. Premium ads, memberships, and Super Chat all stack.',
    ],
    [
        'rank'  => 4,
        'cat'   => 'website',
        'emoji' => '🔍',
        'name'  => 'Google AdSense',
        'sub'   => 'Display Network',
        'rpm'   => 4.5,
        'max'   => 12.0,
        'cpm'   => 14.0,
        'trend' => 'flat',
        'note'  => 'Easy entry point. Leaves real money on the table once you hit 50k sessions.',
    ],
    [
        'rank'  => 5,
        'cat'   => 'website',
        'emoji' => '🚀',
        'name'  => 'Monetag / Adsterra',
        'sub'   => 'Pop · Push · Native',
        'rpm'   => 3.5,
        'max'   => 7.0,
        'cpm'   => 12.0,
        'trend' => 'up',
        'note'  => 'Often beats AdSense on Tier 2/3 traffic or restricted content niches.',
    ],
    [
        'rank'  => 6,
        'cat'   => 'video',
        'emoji' => '📘',
        'name'  => 'Facebook In-stream',
        'sub'   => 'Reels + Video Ads',
        'rpm'   => 1.8,
        'max'   => 4.0,
        'cpm'   => 11.0,
        'trend' => 'down',
        'note'  => 'Highly volatile. Some niches hit the ceiling — most get absolutely crushed.',
    ],
    [
        'rank'  => 7,
        'cat'   => 'social',
        'emoji' => '𝕏',
        'name'  => 'X Revenue Share',
        'sub'   => 'Premium Subscribers',
        'rpm'   => 1.6,
        'max'   => 4.5,
        'cpm'   => 6.0,
        'trend' => 'flat',
        'note'  => 'Depends heavily on Premium follower count. Below AdSense for 90% of creators.',
    ],
    [
        'rank'  => 8,
        'cat'   => 'social',
        'emoji' => '🎵',
        'name'  => 'TikTok Creator Rewards',
        'sub'   => 'Program 2.0',
        'rpm'   => 0.8,
        'max'   => 1.8,
        'cpm'   => 6.0,
        'trend' => 'up',
        'note'  => 'Improved vs old Creativity Program but still low. Strict eligibility.',
    ],
    [
        'rank'  => 9,
        'cat'   => 'social',
        'emoji' => '📸',
        'name'  => 'Instagram Reels',
        'sub'   => 'Meta Overlay Ads',
        'rpm'   => 0.6,
        'max'   => 2.5,
        'cpm'   => 10.0,
        'trend' => 'down',
        'note'  => 'Built for discovery and brand deals. Direct ad RPM is negligible.',
    ],
];

$maxRpm = max(array_column($platforms, 'rpm'));
$platformsJson = json_encode($platforms);

// ─── FILTER (server-side for PHP demo) ───────────────────────────────────────
$cat   = $_GET['cat']   ?? 'all';
$query = strtolower(trim($_GET['q'] ?? ''));

$filtered = array_filter($platforms, function($p) use ($cat, $query) {
    $catMatch   = $cat === 'all' || $p['cat'] === $cat;
    $queryMatch = $query === '' ||
                  str_contains(strtolower($p['name']), $query) ||
                  str_contains(strtolower($p['sub']),  $query) ||
                  str_contains(strtolower($p['note']), $query);
    return $catMatch && $queryMatch;
});
$filtered = array_values($filtered);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPM Arena 2026</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500;600&family=Fraunces:ital,wght@0,300;0,700;1,300;1,700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
  /* ── shadcn CSS variable foundations ─────────────────────────────────────── */
  :root {
    --background:       0 0% 3.9%;
    --foreground:       0 0% 93%;
    --card:             0 0% 6%;
    --card-foreground:  0 0% 93%;
    --popover:          0 0% 6%;
    --border:           0 0% 12%;
    --input:            0 0% 10%;
    --primary:          43 74% 52%;   /* gold */
    --primary-fg:       0 0% 5%;
    --secondary:        0 0% 9%;
    --muted:            0 0% 9%;
    --muted-fg:         0 0% 40%;
    --accent:           152 70% 46%;  /* emerald */
    --accent-fg:        0 0% 5%;
    --destructive:      0 62% 54%;
    --ring:             43 74% 52%;
    --radius:           0.5rem;

    --gold:    hsl(43, 74%, 52%);
    --gold-lt: hsl(43, 80%, 68%);
    --em:      hsl(152, 70%, 46%);
    --red:     hsl(0, 68%, 58%);
    --blue:    hsl(210, 80%, 60%);
    --ink:     hsl(0, 0%, 3.9%);
    --ink2:    hsl(0, 0%, 6%);
    --ink3:    hsl(0, 0%, 9%);
    --border-c: rgba(255,255,255,0.08);
    --text:    hsl(0, 0%, 93%);
    --muted-c: hsl(0, 0%, 40%);
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; color-scheme: dark; }

  body {
    background: var(--ink);
    color: var(--text);
    font-family: 'Syne', system-ui, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* ── Noise grain ──────────────────────────────────────────────────────────── */
  body::after {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 999;
    opacity: .025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  }

  /* ── Ambient glow blobs ───────────────────────────────────────────────────── */
  .blob-gold {
    position: fixed; top: -200px; right: -200px;
    width: 700px; height: 700px; border-radius: 50%;
    background: radial-gradient(circle, hsla(43,74%,52%,.07) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
  }
  .blob-blue {
    position: fixed; bottom: -200px; left: -150px;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, hsla(210,80%,60%,.04) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
  }

  /* ── shadcn-style Card ────────────────────────────────────────────────────── */
  .card {
    background: hsl(var(--card));
    border: 1px solid var(--border-c);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    transition: border-color .25s;
  }
  .card:hover { border-color: rgba(255,255,255,0.13); }
  .card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-c); }
  .card-body   { padding: 1.5rem; }

  /* ── shadcn-style Badge ───────────────────────────────────────────────────── */
  .badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .6rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 9999px;
    border: 1px solid var(--border-c);
    background: rgba(255,255,255,.04);
    color: var(--muted-c);
    white-space: nowrap;
  }
  .badge-gold    { border-color: rgba(201,168,76,.35); background: rgba(201,168,76,.08); color: var(--gold-lt); }
  .badge-green   { border-color: rgba(45,216,122,.3);  background: rgba(45,216,122,.07); color: var(--em); }
  .badge-red     { border-color: rgba(248,80,80,.3);   background: rgba(248,80,80,.07);  color: var(--red); }
  .badge-blue    { border-color: rgba(68,136,255,.3);  background: rgba(68,136,255,.07); color: var(--blue); }
  .badge-muted   { border-color: var(--border-c);      background: rgba(255,255,255,.03); color: var(--muted-c); }

  /* ── shadcn-style Button ──────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    padding: .45rem 1rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--border-c);
    background: rgba(255,255,255,.04);
    color: var(--muted-c);
    cursor: pointer; text-decoration: none;
    transition: all .2s; white-space: nowrap;
    appearance: none;
  }
  .btn:hover  { background: rgba(255,255,255,.08); color: var(--text); border-color: rgba(255,255,255,.15); }
  .btn-primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
  .btn-primary:hover { background: var(--gold-lt); color: var(--ink); border-color: var(--gold-lt); transform: translateY(-1px); }
  .btn.active  { background: rgba(255,255,255,.1); color: var(--text); border-color: rgba(255,255,255,.18); }

  /* ── shadcn-style Input ───────────────────────────────────────────────────── */
  .input {
    height: 2rem;
    background: hsl(var(--input));
    border: 1px solid var(--border-c);
    border-radius: calc(var(--radius) - 2px);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem; letter-spacing: .04em;
    padding: 0 .75rem 0 2rem;
    outline: none; transition: border-color .2s; width: 220px;
  }
  .input::placeholder { color: var(--muted-c); }
  .input:focus { border-color: rgba(201,168,76,.5); }

  /* ── Separator ────────────────────────────────────────────────────────────── */
  .sep { height: 1px; background: var(--border-c); }

  /* ── Table ────────────────────────────────────────────────────────────────── */
  table { width: 100%; border-collapse: collapse; }
  thead tr { border-bottom: 1px solid var(--border-c); }
  thead th {
    font-family: 'JetBrains Mono', monospace;
    font-size: .6rem; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted-c);
    padding: .7rem 1rem; text-align: left;
  }
  th.r, td.r { text-align: right; }
  tbody tr {
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .15s; cursor: pointer;
  }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: rgba(255,255,255,.025); }
  tbody tr.hl   { background: rgba(201,168,76,.07) !important; box-shadow: inset 3px 0 0 var(--gold); }
  td { padding: .9rem 1rem; vertical-align: middle; }

  /* ── RPM spark bar ────────────────────────────────────────────────────────── */
  .spark-bg { height: 3px; border-radius: 9px; background: rgba(255,255,255,.07); margin-top: 5px; width: 100px; }
  .spark-fg { height: 3px; border-radius: 9px; background: linear-gradient(90deg, var(--em), var(--gold)); transition: width .8s cubic-bezier(.16,1,.3,1); }

  /* ── Trend icon ───────────────────────────────────────────────────────────── */
  .trend-up   { color: var(--em); }
  .trend-down { color: var(--red); }
  .trend-flat { color: var(--muted-c); }

  /* ── KPI card accent bar ──────────────────────────────────────────────────── */
  .kpi-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; }

  /* ── Typefaces ────────────────────────────────────────────────────────────── */
  .font-display { font-family: 'Syne', system-ui, sans-serif; }
  .font-serif   { font-family: 'Fraunces', Georgia, serif; }
  .font-mono    { font-family: 'JetBrains Mono', monospace; }

  /* ── Fade-in animation stagger ────────────────────────────────────────────── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .fade { opacity: 0; animation: fadeUp .55s ease forwards; }
  .d0  { animation-delay: .00s; }
  .d1  { animation-delay: .06s; }
  .d2  { animation-delay: .12s; }
  .d3  { animation-delay: .18s; }
  .d4  { animation-delay: .24s; }
  .d5  { animation-delay: .30s; }
  .d6  { animation-delay: .36s; }
  .d7  { animation-delay: .42s; }
  .d8  { animation-delay: .48s; }

  /* ── Scrollbar ────────────────────────────────────────────────────────────── */
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: var(--ink); }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }

  /* ── Toast ────────────────────────────────────────────────────────────────── */
  #toast {
    position: fixed; bottom: 28px; right: 28px; z-index: 9999;
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem; font-weight: 600; letter-spacing: .1em;
    padding: .65rem 1.2rem; border-radius: var(--radius);
    background: var(--gold); color: var(--ink);
    box-shadow: 0 8px 32px rgba(201,168,76,.3);
    transform: translateY(64px); opacity: 0;
    transition: all .35s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
  }
  #toast.show { transform: translateY(0); opacity: 1; }

  /* ── Live pulse ───────────────────────────────────────────────────────────── */
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
  .live-dot { animation: pulse 1.4s ease-in-out infinite; }
</style>
</head>
<body>

<div class="blob-gold"></div>
<div class="blob-blue"></div>
<div id="toast">✓ CHART EXPORTED</div>

<!-- ═══════════════════════════════════════════════════════ HEADER ═══ -->
<header style="position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border-c);background:rgba(10,10,10,.88);backdrop-filter:blur(24px);">
  <div style="max-width:1380px;margin:0 auto;padding:0 2rem;height:56px;display:flex;align-items:center;justify-content:space-between;gap:1rem;">

    <!-- Logo -->
    <a href="?" style="text-decoration:none;display:flex;align-items:center;gap:.6rem;">
      <span class="font-display" style="font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--text);">RPM</span>
      <span class="font-display" style="font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--gold);">ARENA</span>
      <span class="badge badge-gold" style="border-radius:3px;">2026</span>
    </a>

    <!-- Nav filters -->
    <nav style="display:flex;align-items:center;gap:.3rem;">
      <?php foreach(['all'=>'All','website'=>'Websites','video'=>'Video','social'=>'Short-form'] as $k=>$label): ?>
        <a href="?cat=<?= $k ?>&q=<?= urlencode($_GET['q'] ?? '') ?>"
           class="btn <?= $cat===$k ? 'active' : '' ?>">
          <?= $label ?>
        </a>
      <?php endforeach; ?>

      <div style="width:1px;height:18px;background:var(--border-c);margin:0 .5rem;"></div>

      <!-- Live indicator -->
      <div class="badge badge-green" style="gap:.4rem;padding:.3rem .7rem;">
        <span class="live-dot" style="width:6px;height:6px;border-radius:50%;background:var(--em);display:inline-block;"></span>
        LIVE · MAR 2026
      </div>

      <!-- Export -->
      <button class="btn btn-primary" onclick="exportChart()" style="margin-left:.4rem;">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Export PNG
      </button>
    </nav>
  </div>
</header>

<div style="max-width:1380px;margin:0 auto;padding:3rem 2rem 5rem;position:relative;z-index:1;">

  <!-- ═══════════════════════════════════════════════════════ HERO ═══ -->
  <div style="display:grid;grid-template-columns:1fr auto;gap:4rem;align-items:center;margin-bottom:3rem;" class="fade d0">

    <!-- Left: headline -->
    <div>
      <div style="display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;">
        <div style="height:1px;width:2rem;background:var(--gold);"></div>
        <span class="font-mono" style="font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-c);">
          Creator Revenue Intelligence · Brutally Honest Data
        </span>
      </div>

      <h1 class="font-display" style="font-size:clamp(3.5rem,8vw,7rem);font-weight:800;line-height:.92;letter-spacing:-.04em;color:var(--text);">
        WHAT YOU
        <span class="font-serif" style="display:block;font-style:italic;font-weight:700;color:var(--gold);letter-spacing:-.02em;">Actually</span>
        KEEP
      </h1>

      <p style="margin-top:1.25rem;font-size:.88rem;color:var(--muted-c);line-height:1.75;max-width:480px;">
        Real RPM per 1,000 views across every major platform and ad network.
        <strong style="color:var(--em);font-weight:600;">No PR spin.</strong>
        Just the numbers that decide whether you quit your day job.
      </p>
    </div>

    <!-- Right: KPI stack -->
    <div style="display:flex;flex-direction:column;gap:2px;min-width:290px;">

      <?php
      $kpis = [
        ['label'=>'Top Earner · Q1 2026', 'value'=>'$28', 'sub'=>'Mediavine / Raptive avg RPM', 'color'=>'var(--gold)', 'icon'=>'trophy'],
        ['label'=>'Video King',            'value'=>'$6.5','sub'=>'YouTube Long-form avg RPM',  'color'=>'var(--red)',  'icon'=>'video'],
        ['label'=>'Don\'t quit your job',  'value'=>'$0.6','sub'=>'Instagram Reels avg RPM',    'color'=>'var(--muted-c)','icon'=>'skull'],
      ];
      foreach($kpis as $i=>$kpi):
      ?>
      <div class="card fade d<?= $i ?>" style="padding:1.1rem 1.25rem;border-radius:8px;">
        <div class="kpi-bar" style="background:linear-gradient(90deg,<?= $kpi['color'] ?>,transparent);"></div>
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <div>
            <p class="font-mono" style="font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:<?= $kpi['color'] ?>;margin-bottom:.4rem;"><?= $kpi['label'] ?></p>
            <p class="font-display" style="font-size:2.6rem;font-weight:800;line-height:1;color:var(--text);"><?= $kpi['value'] ?></p>
            <p class="font-mono" style="font-size:.65rem;color:var(--muted-c);margin-top:.3rem;"><?= $kpi['sub'] ?></p>
          </div>
          <div style="width:38px;height:38px;border-radius:6px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;font-size:1.1rem;">
            <?= $kpi['icon']==='trophy' ? '🏆' : ($kpi['icon']==='video' ? '▶' : '💀') ?>
          </div>
        </div>
      </div>
      <?php endforeach; ?>

    </div>
  </div>

  <div class="sep" style="margin-bottom:2.5rem;"></div>

  <!-- ═══════════════════════════════════════════════════════ CHART ══ -->
  <div class="card fade d2" style="margin-bottom:2px;">
    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
      <div>
        <h2 class="font-display" style="font-size:1.1rem;font-weight:700;letter-spacing:-.01em;">RPM vs Premium Ceiling</h2>
        <p class="font-mono" style="font-size:.62rem;color:var(--muted-c);margin-top:.2rem;letter-spacing:.04em;">Click any bar to highlight the corresponding row below</p>
      </div>
      <div style="display:flex;gap:1.25rem;align-items:center;">
        <div style="display:flex;align-items:center;gap:.45rem;">
          <div style="width:18px;height:3px;border-radius:9px;background:var(--em);"></div>
          <span class="font-mono" style="font-size:.6rem;letter-spacing:.1em;color:var(--muted-c);">AVG RPM</span>
        </div>
        <div style="display:flex;align-items:center;gap:.45rem;">
          <div style="width:18px;height:3px;border-radius:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.1);"></div>
          <span class="font-mono" style="font-size:.6rem;letter-spacing:.1em;color:var(--muted-c);">PREMIUM MAX</span>
        </div>
      </div>
    </div>
    <div style="padding:1.5rem 1rem 1rem;height:420px;">
      <canvas id="rpmChart"></canvas>
    </div>
  </div>

  <!-- ═══════════════════════════════════════════════════════ TABLE ══ -->
  <div class="card fade d3">
    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;">
      <div style="display:flex;align-items:center;gap:.75rem;">
        <h2 class="font-mono" style="font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-c);">Platform Breakdown</h2>
        <span class="badge"><?= count($filtered) ?> of <?= count($platforms) ?></span>
      </div>

      <!-- Search form (PHP GET) -->
      <form method="GET" action="?" style="position:relative;display:flex;align-items:center;">
        <input type="hidden" name="cat" value="<?= htmlspecialchars($cat) ?>">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
             style="position:absolute;left:.6rem;color:var(--muted-c);pointer-events:none;">
          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
        </svg>
        <input class="input" type="text" name="q"
               value="<?= htmlspecialchars($_GET['q'] ?? '') ?>"
               placeholder="Search platforms…"
               oninput="this.form.submit()">
      </form>
    </div>

    <table>
      <thead>
        <tr>
          <th style="padding-left:1.5rem;width:3rem;">#</th>
          <th>Platform</th>
          <th>Avg RPM</th>
          <th class="r">Premium Max</th>
          <th class="r">Adv. CPM</th>
          <th class="r" style="padding-right:1.5rem;">Verdict</th>
        </tr>
      </thead>
      <tbody id="tableBody">
        <?php
        $catColors = ['website'=>'badge-blue','video'=>'badge-red','social'=>'badge-muted'];
        $catLabels = ['website'=>'Website','video'=>'Video','social'=>'Short-form'];

        foreach($filtered as $i => $p):
          $pct     = round(($p['rpm'] / $maxRpm) * 100);
          $delay   = min($i, 8);
          $trendSvg = match($p['trend']) {
            'up'   => '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="trend-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>',
            'down' => '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="trend-down"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>',
            default=> '<span class="trend-flat">—</span>',
          };
        ?>
        <tr class="fade d<?= $delay ?>" onclick="handleRowClick(this, <?= $p['rank'] ?>)" data-rank="<?= $p['rank'] ?>">
          <td style="padding-left:1.5rem;">
            <span class="font-mono" style="font-size:.65rem;color:var(--muted-c);"><?= str_pad($p['rank'], 2, '0', STR_PAD_LEFT) ?></span>
          </td>
          <td>
            <div style="display:flex;align-items:center;gap:.9rem;">
              <div style="width:36px;height:36px;border-radius:6px;border:1px solid var(--border-c);background:var(--ink3);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;">
                <?= htmlspecialchars($p['emoji']) ?>
              </div>
              <div>
                <div class="font-display" style="font-size:.85rem;font-weight:700;color:var(--text);"><?= htmlspecialchars($p['name']) ?></div>
                <div style="display:flex;align-items:center;gap:.4rem;margin-top:.2rem;">
                  <span class="badge <?= $catColors[$p['cat']] ?>"><?= $catLabels[$p['cat']] ?></span>
                  <span class="font-mono" style="font-size:.6rem;color:var(--muted-c);"><?= htmlspecialchars($p['sub']) ?></span>
                </div>
              </div>
            </div>
          </td>
          <td>
            <div class="font-display" style="font-size:1.6rem;font-weight:800;color:var(--em);line-height:1;">$<?= $p['rpm'] ?></div>
            <div class="spark-bg"><div class="spark-fg" style="width:<?= $pct ?>%;"></div></div>
            <div class="font-mono" style="font-size:.55rem;color:var(--muted-c);margin-top:.3rem;letter-spacing:.1em;">PER 1,000 VIEWS</div>
          </td>
          <td class="r">
            <span class="font-mono" style="font-size:.8rem;font-weight:600;color:var(--gold);">↑ $<?= $p['max'] ?></span>
          </td>
          <td class="r">
            <span class="font-mono" style="font-size:.8rem;color:var(--muted-c);">$<?= $p['cpm'] ?></span>
          </td>
          <td class="r" style="padding-right:1.5rem;">
            <div style="display:flex;align-items:flex-start;justify-content:flex-end;gap:.5rem;">
              <span style="font-size:.72rem;color:var(--muted-c);line-height:1.55;max-width:280px;text-align:right;"><?= htmlspecialchars($p['note']) ?></span>
              <?= $trendSvg ?>
            </div>
          </td>
        </tr>
        <?php endforeach; ?>

        <?php if(empty($filtered)): ?>
        <tr>
          <td colspan="6" style="text-align:center;padding:3rem;color:var(--muted-c);" class="font-mono">
            NO PLATFORMS FOUND — <a href="?" style="color:var(--gold);text-decoration:none;">CLEAR FILTERS</a>
          </td>
        </tr>
        <?php endif; ?>
      </tbody>
    </table>
  </div>

  <!-- ═══════════════════════════════════════════════════════ TAKEAWAYS ══ -->
  <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:2px;" class="fade d4">
    <?php
    $takeaways = [
      ['icon'=>'🌐','color'=>'var(--blue)', 'num'=>'01','title'=>'Websites Still Win',
       'body'=>'Mediavine, Raptive, and Ezoic annihilate every social platform when you have real traffic. Hit 50k sessions and you enter a completely different income bracket.'],
      ['icon'=>'📱','color'=>'var(--gold)', 'num'=>'02','title'=>'Short-form = Growth, Not Pay',
       'body'=>'TikTok, Reels, and Shorts are elite reach engines with terrible direct RPMs. Use them as funnels to YouTube or your site — never as the end destination.'],
      ['icon'=>'⚡','color'=>'var(--em)',   'num'=>'03','title'=>'X Is Not Beating AdSense',
       'body'=>'Real data puts X RPM at $0.50–$3 for most creators. AdSense, Monetag, and Adsterra pay more consistently. The hype does not match the payout.'],
    ];
    foreach($takeaways as $t):
    ?>
    <div class="card" style="padding:1.75rem;border-radius:8px;position:relative;">
      <div style="position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,<?= $t['color'] ?>,transparent);"></div>
      <div style="position:absolute;top:1rem;right:1.25rem;font-family:'Syne',sans-serif;font-size:4rem;font-weight:800;color:rgba(255,255,255,.04);line-height:1;user-select:none;">
        <?= $t['num'] ?>
      </div>
      <div style="width:38px;height:38px;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:1rem;">
        <?= $t['icon'] ?>
      </div>
      <h3 class="font-display" style="font-size:.9rem;font-weight:700;letter-spacing:.02em;margin-bottom:.6rem;color:var(--text);"><?= $t['title'] ?></h3>
      <p style="font-size:.75rem;color:var(--muted-c);line-height:1.7;"><?= $t['body'] ?></p>
    </div>
    <?php endforeach; ?>
  </div>

</div><!-- /main -->

<!-- ═══════════════════════════════════════════════════════ FOOTER ══ -->
<footer style="border-top:1px solid var(--border-c);padding:1.25rem 2rem;max-width:1380px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;">
  <span class="font-mono" style="font-size:.58rem;letter-spacing:.18em;color:var(--muted-c);">RPM ARENA · DATA AS OF MARCH 2026</span>
  <span class="font-mono" style="font-size:.58rem;letter-spacing:.18em;color:var(--muted-c);">FIGURES ARE AVERAGES · NICHE & GEO WILL VARY</span>
</footer>

<script>
const ALL_DATA = <?= $platformsJson ?>;
const FILTERED  = <?= json_encode(array_values($filtered)) ?>;
const MAX_RPM   = <?= $maxRpm ?>;

// ── Colour map by category ──────────────────────────────────────────────────
const CAT_COLOR = {
  website: 'hsl(210,80%,60%)',
  video:   'hsl(0,68%,58%)',
  social:  'hsl(280,60%,65%)',
};
const EMERALD = 'hsl(152,70%,46%)';
const GOLD    = 'hsl(43,74%,52%)';

// ── Build chart ─────────────────────────────────────────────────────────────
let chartInst = null;
let highlighted = null;

function buildChart(data) {
  const ctx = document.getElementById('rpmChart');
  if (chartInst) chartInst.destroy();

  const labels   = data.map(d => d.emoji + '  ' + d.name);
  const rpmVals  = data.map(d => d.rpm);
  const maxVals  = data.map(d => d.max);

  chartInst = new Chart(ctx, {
    type: 'bar',
    data: {
      labels,
      datasets: [
        {
          label: 'Premium Max',
          data: maxVals,
          backgroundColor: 'rgba(255,255,255,0.05)',
          borderColor:     'rgba(255,255,255,0.1)',
          borderWidth: 1,
          borderRadius: 4,
          borderSkipped: false,
          barThickness: 10,
        },
        {
          label: 'Avg RPM',
          data: rpmVals,
          backgroundColor: data.map(d => CAT_COLOR[d.cat] || EMERALD),
          borderColor:     data.map(d => CAT_COLOR[d.cat] || EMERALD),
          borderWidth: 0,
          borderRadius: 4,
          borderSkipped: false,
          barThickness: 20,
        },
      ]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      maintainAspectRatio: false,
      onClick(e, els) {
        if (!els.length) return;
        const idx  = els[0].index;
        const rank = data[idx]?.rank;
        if (rank) highlightRow(rank);
      },
      animation: { duration: 650, easing: 'easeInOutCubic' },
      plugins: {
        legend: { display: false },
        tooltip: {
          backgroundColor: '#141414',
          borderColor: 'rgba(255,255,255,.1)',
          borderWidth: 1,
          titleColor: '#f0ede8',
          bodyColor:  '#666',
          titleFont: { family: "'Syne', sans-serif", size: 12, weight: '700' },
          bodyFont:  { family: "'JetBrains Mono', monospace", size: 11 },
          padding: 12,
          displayColors: false,
          callbacks: {
            title: items => items[0].label.replace(/^.\s+/, ''),
            label: item  => `  ${item.dataset.label}: $${item.raw} / 1k views`,
          }
        }
      },
      scales: {
        x: {
          grid:  { color: 'rgba(255,255,255,0.04)', drawBorder: false },
          ticks: { color: '#555', font: { family: "'JetBrains Mono',monospace", size: 10 }, callback: v => '$' + v },
          border:{ display: false },
        },
        y: {
          grid:  { display: false, drawBorder: false },
          ticks: { color: '#aaa', font: { family: "'Syne',sans-serif", size: 12, weight: '600' }, padding: 12 },
          border:{ display: false },
        }
      }
    }
  });
}

// ── Table row highlight ─────────────────────────────────────────────────────
function highlightRow(rank) {
  highlighted = (highlighted === rank) ? null : rank;
  document.querySelectorAll('#tableBody tr[data-rank]').forEach(tr => {
    tr.classList.toggle('hl', parseInt(tr.dataset.rank) === highlighted);
  });
  const el = document.querySelector(`#tableBody tr[data-rank="${rank}"]`);
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

function handleRowClick(tr, rank) {
  highlightRow(rank);
  // also highlight chart bar
  if (chartInst) {
    const idx = FILTERED.findIndex(d => d.rank === rank);
    if (idx >= 0) {
      chartInst.setActiveElements([{ datasetIndex: 1, index: idx }]);
      chartInst.update();
    }
  }
}

// ── Export ──────────────────────────────────────────────────────────────────
function exportChart() {
  if (!chartInst) return;
  const a = document.createElement('a');
  a.download = 'rpm-arena-2026.png';
  a.href = chartInst.canvas.toDataURL('image/png');
  a.click();
  const toast = document.getElementById('toast');
  toast.classList.add('show');
  setTimeout(() => toast.classList.remove('show'), 2600);
}

// ── Init ────────────────────────────────────────────────────────────────────
buildChart(FILTERED);
</script>
</body>
</html>