<?php
//require_once("../members/gate.php");

// ── Ad system bootstrap ───────────────────────────────────────────────────────
$ads_above = [];
$ads_below = [];
$ads_json  = __DIR__ . '/../admanager/ads.json';

if (file_exists($ads_json)) {
    $_all_ads = json_decode(file_get_contents($ads_json), true);
    if (is_array($_all_ads)) {
        foreach ($_all_ads as $_ad) {
            if (!($_ad['active'] ?? true)) continue;
            if (empty($_ad['sizes']))      continue;
            if (($_ad['placement'] ?? 'above') === 'above') $ads_above[] = $_ad;
            else                                             $ads_below[] = $_ad;
        }
    }
}

$size_breakpoints = [
    'mobile-banner' => ['min'=>    0, 'max'=> 479, 'w'=> 320, 'h'=>  50],
    'mobile-rect'   => ['min'=>    0, 'max'=> 599, 'w'=> 300, 'h'=> 250],
    'tablet-banner' => ['min'=>  480, 'max'=> 767, 'w'=> 468, 'h'=>  60],
    'leaderboard'   => ['min'=>  768, 'max'=>1023, 'w'=> 728, 'h'=>  90],
    'billboard'     => ['min'=> 1024, 'max'=>null,  'w'=> 970, 'h'=>  90],
    'large-rect'    => ['min'=>  600, 'max'=>null,  'w'=> 336, 'h'=> 280],
    'custom'        => ['min'=>    0, 'max'=>null,  'w'=>null,  'h'=>null],
];
?>

<?php
function render_ad_zone(array $ads, string $placement, array $size_breakpoints): void {
    static $zone_counter = 0;
    echo '<div class="ad-zone" aria-label="Advertisement">' . "\n";
    foreach ($ads as $ad_idx => $ad) {
        $sizes = array_values(array_filter($ad['sizes'] ?? []));
        if (empty($sizes)) continue;
        $zone_counter++;
        $unit_id  = 'adunit-' . $zone_counter;
        $click    = htmlspecialchars(trim($ad['click_url'] ?? ''));
        echo "  <div class=\"ad-unit\" id=\"{$unit_id}\">\n";
        echo "  <style>\n";
        foreach ($sizes as $vi => $sv) {
            $sk  = $sv['size_key'] ?? 'custom';
            $bp  = $size_breakpoints[$sk] ?? ['min'=>0,'max'=>null,'w'=>null,'h'=>null];
            $w   = ($sk==='custom' && !empty($sv['custom_w'])) ? (int)$sv['custom_w'] : ($bp['w'] ?? null);
            $h   = ($sk==='custom' && !empty($sv['custom_h'])) ? (int)$sv['custom_h'] : ($bp['h'] ?? null);
            $min = (int)$bp['min'];
            $max = $bp['max'];
            $parts = [];
            if ($min > 0) $parts[] = "(min-width:{$min}px)";
            if ($max)     $parts[] = "(max-width:{$max}px)";
            $mq  = $parts ? '@media ' . implode(' and ', $parts) : null;
            $sel = "#{$unit_id} .adv-{$vi}";
            if ($mq) echo "    {$mq} { {$sel} { display:flex; } }\n";
            else     echo "    {$sel} { display:flex; }\n";
            if ($w && $h) {
                echo "    {$sel} .ad-creative { width:{$w}px; height:{$h}px; max-width:100%; }\n";
                echo "    {$sel} .ad-creative img,{$sel} .ad-creative video { width:{$w}px; height:{$h}px; max-width:100%; }\n";
            }
        }
        echo "  </style>\n";
        foreach ($sizes as $vi => $sv) {
            $murl  = htmlspecialchars(trim($sv['media_url'] ?? ''));
            $mtype = $sv['media_type'] ?? 'image';
            if (!$murl) continue;
            $wrap_o = $click ? "<a class=\"ad-creative\" href=\"{$click}\" target=\"_blank\" rel=\"noopener noreferrer sponsored\">" : '<div class="ad-creative">';
            $wrap_c = $click ? '</a>' : '</div>';
            $media  = ($mtype === 'video')
                ? "<video autoplay muted loop playsinline preload=\"metadata\"><source src=\"{$murl}\"></video>"
                : "<img src=\"{$murl}\" alt=\"\" loading=\"lazy\">";
            echo "    <div class=\"ad-variant adv-{$vi}\">\n";
            echo "      {$wrap_o}<span class=\"ad-label\">Ad</span>{$media}{$wrap_c}\n";
            echo "    </div>\n";
        }
        echo "  </div>\n";
    }
    echo '</div>' . "\n";
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Live at TyClifford.com/Live — Members Area">
  <meta name="author" content="Ty Clifford">
  <meta name="keywords" content="Ty Clifford, Live, Podcast, Keyser, West Virginia, Nerd, TikTok">

  <meta property="og:url"         content="https://tyclifford.com/live/" />
  <meta property="og:type"        content="website" />
  <meta property="og:site_name"   content="Ty Clifford — Live! Hobbies are my hobby." />
  <meta property="og:title"       content="Live TC | TyClifford.com/Live" />
  <meta property="og:image"       content="" />
  <meta property="og:image:alt"   content="Live stream" />
  <meta name="twitter:site"        content="@_tyclifford" />
  <meta name="twitter:title"       content="Live TC | TyClifford.com/Live" />
  <meta name="twitter:description" content="Members live stream area — TyClifford.com">

  <title>Live — TyClifford.com</title>

  <link rel="shortcut icon" href="/images/ico/fa-bl.ico">
  <link rel="apple-touch-icon" href="/images/ico/fa-bl.jpg">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Share+Tech+Mono&family=Rajdhani:wght@400;600;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">

  <!-- CyberChat stylesheet -->
  <link rel="stylesheet" href="https://chat.tyclifford.com/assets/css/cyberchat.css">

  <style>
    /* ── Reset & design tokens ──────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:          #09090f;
      --surface:     #0f0f1a;
      --surface-2:   #141425;
      --border:      #1e1e38;
      --border-2:    #2a2a48;
      --text:        #e8e8f8;
      --text-2:      #9898c0;
      --text-3:      #58587a;

      --green:       #00e87a;
      --blue:        #00c8ff;
      --purple:      #b060ff;
      --red:         #ff3355;
      --orange:      #ff8800;
      --yellow:      #ffd040;

      --pat:         #ff424d;
      --pat-lite:    rgba(255,66,77,.10);
      --pat-border:  rgba(255,66,77,.32);
      --pat-glow:    rgba(255,66,77,.18);

      --libera:      #f6c915;
      --paypal:      #009cde;

      --r:           6px;
      --gap:         1.25rem;
      --page-pad:    1rem;

      /* Chat panel width on desktop */
      --chat-w:      340px;
    }

    @media (min-width: 600px)  { :root { --page-pad: 1.5rem; } }
    @media (min-width: 1000px) { :root { --page-pad: 2rem; --chat-w: 360px; } }
    @media (min-width: 1200px) { :root { --chat-w: 400px; } }

    html {
      font-size: 16px;
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
    }

    body {
      min-height: 100dvh;
      background: var(--bg);
      background-image:
        radial-gradient(ellipse 70% 50% at 20% 10%,  rgba(176,96,255,.05)  0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%,  rgba(0,200,255,.04)   0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 50% 50%,  rgba(255,66,77,.03)   0%, transparent 70%);
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* scanline overlay */
    body::after {
      content: '';
      position: fixed; inset: 0; pointer-events: none; z-index: 999;
      background: repeating-linear-gradient(
        0deg, transparent 0px, transparent 3px,
        rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px
      );
    }

    /* ── Animations ──────────────────────────────────────────────────────── */
    @keyframes rise {
      from { opacity: 0; transform: translateY(14px) scale(.98); }
      to   { opacity: 1; transform: translateY(0)    scale(1);   }
    }
    @keyframes shimmer {
      from { background-position:   0% 50%; }
      to   { background-position: 200% 50%; }
    }
    @keyframes pulse-border {
      0%,100% { box-shadow: 0 0 0 0   var(--pat-glow); }
      50%      { box-shadow: 0 0 0 6px transparent;     }
    }
    @keyframes live-pulse {
      0%,100% { opacity: 1; }
      50%      { opacity: .4; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       PAGE WRAPPER
    ══════════════════════════════════════════════════════════════════════ */
    .page {
      width: 100%;
      max-width: 1400px;
      padding: var(--page-pad);
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      animation: rise .45s cubic-bezier(.22,.68,0,1.2) both;
    }

    /* ══════════════════════════════════════════════════════════════════════
       TOP BAR
    ══════════════════════════════════════════════════════════════════════ */
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .topbar-brand {
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .brand-name {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -.01em;
      color: var(--text);
    }
    .brand-sub {
      font-family: 'Share Tech Mono', monospace;
      font-size: .62rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    .live-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .25rem .65rem;
      background: rgba(255,51,85,.12);
      border: 1px solid rgba(255,51,85,.3);
      border-radius: 99px;
      font-family: 'Share Tech Mono', monospace;
      font-size: .6rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--red);
      text-shadow: 0 0 8px rgba(255,51,85,.4);
    }
    .live-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 6px rgba(255,51,85,.8);
      animation: live-pulse 1.4s ease-in-out infinite;
    }

    .topbar-social {
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .social-pill {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .35rem .75rem;
      background: rgba(255,255,255,.03);
      border: 1px solid var(--border-2);
      border-radius: 99px;
      font-family: 'Share Tech Mono', monospace;
      font-size: .65rem;
      letter-spacing: .08em;
      color: var(--text-3);
      text-decoration: none;
      transition: border-color .2s, color .2s, background .2s;
    }
    .social-pill:hover {
      border-color: var(--border-2);
      color: var(--text-2);
      background: rgba(255,255,255,.06);
    }
    .social-pill svg { flex-shrink: 0; }

    /* ══════════════════════════════════════════════════════════════════════
       STREAM + CHAT LAYOUT
       - Mobile/small tablet  (<860px): stacked, stream on top, chat below
       - Large tablet/desktop (≥860px): stream left, chat right (side-by-side)
    ══════════════════════════════════════════════════════════════════════ */
    .stream-chat-row {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    @media (min-width: 860px) {
      .stream-chat-row {
        flex-direction: row;
        align-items: stretch;
        gap: 1rem;
      }
    }

    /* ── Stream card ────────────────────────────────────────────────────── */
    .stream-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: calc(var(--r) + 2px);
      overflow: hidden;
      position: relative;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.03),
        0 4px 50px rgba(0,0,0,.6);
      /* On mobile: full width. On desktop: fills remaining space */
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .stream-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px; z-index: 2;
      background: linear-gradient(90deg,
        var(--pat), var(--purple), var(--blue), var(--green),
        var(--blue), var(--purple), var(--pat));
      background-size: 300% 100%;
      animation: shimmer 5s linear infinite;
    }

    /* 16:9 ratio wrapper — fills card width */
    .stream-ratio {
      position: relative;
      width: 100%;
      padding-top: 56.25%;
      background: #000;
      flex-shrink: 0;
    }
    .stream-ratio iframe {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      border: 0;
      display: block;
    }

    .stream-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      padding: .75rem 1.1rem;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
      margin-top: auto;
    }

    .stream-meta {
      font-family: 'Share Tech Mono', monospace;
      font-size: .65rem;
      letter-spacing: .1em;
      color: var(--text-3);
    }
    .stream-meta span { color: var(--text-2); }

    .eyebrow {
      font-family: 'Share Tech Mono', monospace;
      font-size: .62rem;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .eyebrow-green { color: var(--green); text-shadow: 0 0 10px rgba(0,232,122,.5); }
    .eyebrow-green::before { content: '> '; opacity: .5; }

    /* ── Chat panel ─────────────────────────────────────────────────────── */
    .chat-panel {
      /* Mobile: full width, fixed height */
      width: 100%;
      height: 480px;
      flex-shrink: 0;
      position: relative;
    }

    @media (min-width: 860px) {
      .chat-panel {
        /* Desktop: fixed width sidebar, stretches to match stream card height */
        width: var(--chat-w);
        flex: 0 0 var(--chat-w);
        /* Height driven by stream card; min so it's always usable */
        height: auto;
        min-height: 400px;
        align-self: stretch;
      }
    }

    /* The actual CyberChat container fills its parent fully */
    #live-chat {
      width: 100%;
      height: 100%;
      /* On mobile panel has fixed height so this just fills it */
    }

    @media (min-width: 860px) {
      #live-chat {
        /* On desktop panel is stretch, so this must be 100% height */
        position: absolute;
        inset: 0;
      }
    }

    /* ── Chat panel label (shows above chat on mobile) ──────────────────── */
    .chat-label {
      display: none; /* hidden on desktop — chat header is visible */
    }

    @media (max-width: 859px) {
      .chat-label {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-family: 'Share Tech Mono', monospace;
        font-size: .62rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--green);
        text-shadow: 0 0 10px rgba(0,232,122,.5);
        margin-bottom: .4rem;
      }
      .chat-label::before { content: '> '; opacity: .5; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       LOWER GRID — Support · About · Social
    ══════════════════════════════════════════════════════════════════════ */
    .lower-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    @media (min-width: 640px) {
      .lower-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 900px) {
      .lower-grid { grid-template-columns: 2fr 1fr 1fr; }
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: calc(var(--r) + 2px);
      padding: 1.4rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: .9rem;
      position: relative;
      overflow: hidden;
    }

    .card::after {
      content: '';
      position: absolute;
      bottom: -1px; right: -1px;
      width: 14px; height: 14px;
      border-bottom: 2px solid var(--purple);
      border-right:  2px solid var(--purple);
      border-radius: 0 0 calc(var(--r) + 2px) 0;
      opacity: .5;
    }

    .card-title {
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: -.01em;
      color: var(--text);
      line-height: 1.2;
    }
    .card-body {
      font-size: .85rem;
      color: var(--text-2);
      line-height: 1.7;
    }
    .card-body strong { color: var(--text); font-weight: 600; }
    .card-body a {
      color: var(--pat);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,66,77,.25);
      transition: border-color .15s;
    }
    .card-body a:hover { border-color: rgba(255,66,77,.6); }

    .card-patreon {
      background: var(--surface);
      border-color: var(--pat-border);
      box-shadow: 0 0 30px rgba(255,66,77,.05);
    }
    .card-patreon::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg,
        var(--pat), var(--purple), var(--blue), var(--green),
        var(--blue), var(--purple), var(--pat));
      background-size: 300% 100%;
      animation: shimmer 5s linear infinite;
    }

    .donate-stack {
      display: flex;
      flex-direction: column;
      gap: .55rem;
    }

    .btn-donate {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      padding: .75rem 1.1rem;
      border-radius: var(--r);
      font-family: 'Inter', sans-serif;
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: .02em;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: transform .15s, box-shadow .2s, filter .15s;
      min-height: 44px;
    }
    .btn-donate::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, transparent 60%);
      pointer-events: none;
    }
    .btn-donate:hover  { transform: translateY(-1px); filter: brightness(1.08); }
    .btn-donate:active { transform: scale(.98); filter: brightness(.96); }

    .btn-patreon-donate {
      background: var(--pat);
      color: #fff;
      box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset,
                  0 4px 18px rgba(255,66,77,.3);
      animation: pulse-border 3s ease-in-out infinite;
    }
    .btn-libera {
      background: var(--libera);
      color: #1a1400;
      box-shadow: 0 4px 18px rgba(246,201,21,.2);
    }
    .btn-paypal {
      background: var(--paypal);
      color: #fff;
      box-shadow: 0 4px 18px rgba(0,156,222,.2);
    }
    .btn-stripe {
      background: #635BFF;
      color: #fff;
      box-shadow: 0 4px 14px rgba(99,91,255,.2);
    }

    .payment-methods-row {
      display: flex;
      align-items: center;
      gap: .5rem;
      flex-wrap: wrap;
    }
    .payment-methods-label {
      font-family: 'Share Tech Mono', monospace;
      font-size: .65rem;
      letter-spacing: .06em;
      color: var(--text-3);
      white-space: nowrap;
    }

    .card-about  { background: var(--surface-2); }
    .card-social { background: var(--surface-2); }

    .social-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }
    .social-list a {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .6rem .8rem;
      border: 1px solid var(--border-2);
      border-radius: var(--r);
      font-family: 'Share Tech Mono', monospace;
      font-size: .78rem;
      color: var(--text-2);
      text-decoration: none;
      transition: border-color .2s, color .2s, background .2s;
    }
    .social-list a:hover {
      border-color: var(--green);
      color: var(--text);
      background: rgba(0,232,122,.04);
    }
    .social-list a svg { flex-shrink: 0; color: var(--text-3); transition: color .2s; }
    .social-list a:hover svg { color: var(--green); }

    /* ══════════════════════════════════════════════════════════════════════
       PAGE FOOTER
    ══════════════════════════════════════════════════════════════════════ */
    .page-footer {
      padding: .5rem 0 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      border-top: 1px solid var(--border);
    }

    .footer-note {
      font-family: 'Share Tech Mono', monospace;
      font-size: .63rem;
      color: var(--text-3);
      letter-spacing: .06em;
      text-align: center;
    }
    .footer-note::before { content: '// '; opacity: .4; }
    .footer-note a {
      color: var(--text-3);
      text-decoration: none;
      transition: color .15s;
    }
    .footer-note a:hover { color: var(--text-2); }

    /* ══════════════════════════════════════════════════════════════════════
       AD ZONES
    ══════════════════════════════════════════════════════════════════════ */
    .ad-zone {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .75rem;
    }
    .ad-unit {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
    .ad-creative {
      display: block;
      line-height: 0;
      border-radius: var(--r, 6px);
      overflow: hidden;
      background: var(--surface-2, #141425);
      border: 1px solid var(--border, #1e1e38);
      transition: opacity .2s, border-color .2s;
      position: relative;
      max-width: 100%;
    }
    a.ad-creative:hover { border-color: var(--green, #00e87a); opacity: .93; }
    .ad-creative img,
    .ad-creative video {
      display: block;
      max-width: 100%;
      height: auto;
      object-fit: cover;
    }
    .ad-label {
      position: absolute; top: 3px; right: 5px;
      font-family: 'Share Tech Mono', monospace;
      font-size: .46rem; letter-spacing: .1em; text-transform: uppercase;
      color: var(--text-3, #58587a);
      background: rgba(9,9,15,.72);
      padding: .08em .32em; border-radius: 2px;
      pointer-events: none; z-index: 2;
    }
    .ad-variant { display: none; }

  </style>
</head>

<body>

<main class="page" role="main">

  <!-- AD ZONE — ABOVE -->
  <?php if (!empty($ads_above)): render_ad_zone($ads_above, 'above', $size_breakpoints); endif; ?>

  <!-- ══════════════════════════════════════════════════════════════════════
       TOP BAR
  ══════════════════════════════════════════════════════════════════════ -->
  <header class="topbar">
    <div class="topbar-brand">
      <div>
        <div class="brand-name">Ty Clifford</div>
        <div class="brand-sub">tyclifford.com / live</div>
      </div>
    </div>

    <nav class="topbar-social" aria-label="Social links">
      <a class="social-pill" href="https://github.com/snick512" target="_blank" rel="noopener" aria-label="GitHub">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61
                   c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77
                   5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0
                   0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77
                   a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7
                   A3.37 3.37 0 0 0 9 18.13V22"/>
        </svg>
        GitHub
      </a>
      <a class="social-pill" href="mailto:ty@tyclifford.com" aria-label="Email Ty">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <rect x="2" y="4" width="20" height="16" rx="2"/>
          <polyline points="2,4 12,13 22,4"/>
        </svg>
        Email
      </a>
    </nav>
  </header>

  <!-- ══════════════════════════════════════════════════════════════════════
       STREAM + CHAT — side by side on desktop, stacked on mobile
  ══════════════════════════════════════════════════════════════════════ -->
  <div class="stream-chat-row">

    <!-- Stream card -->
    <section class="stream-card" aria-label="Live stream">
      <div class="stream-ratio">
        <iframe
          src="https://stream.place/embed/tyclifford.com"
          allowfullscreen
          allow="autoplay; fullscreen"
          title="Ty Clifford live stream"
        ></iframe>
      </div>
      <div class="stream-footer">
        <p class="eyebrow eyebrow-green">Stream</p>
        <p class="stream-meta">Keyser, WV / <span>tyclifford.com</span></p>
      </div>
    </section>

    <!-- Chat panel -->
    <div class="chat-panel">
      <p class="chat-label">Live Chat</p>
      <div id="live-chat"></div>
    </div>

  </div><!-- /stream-chat-row -->

  <!-- ══════════════════════════════════════════════════════════════════════
       LOWER GRID — Support · About · Social
  ══════════════════════════════════════════════════════════════════════ -->
  <div class="lower-grid">

    <!-- Support card -->
    <div class="card card-patreon">
      <div>
        <p class="eyebrow eyebrow-green" style="margin-bottom:.35rem">Support the stream</p>
        <h2 class="card-title">Hobbies are my hobby.</h2>
      </div>

      <p class="card-body">
        If you're enjoying the stream, consider throwing a few bucks in the jar.
        <strong>Patreon</strong> members keep this going — even a free membership helps.
        You can also tip via PayPal, no account needed.
      </p>

      <div class="donate-stack">
        <a class="btn-donate btn-patreon-donate"
           href="https://go.tyclifford.com/patreon"
           target="_blank" rel="noopener noreferrer"
           aria-label="Become a Patreon supporter">
          <svg width="12" height="14" viewBox="0 0 12 14" fill="white" aria-hidden="true">
            <ellipse cx="7.5" cy="4.8" rx="4.5" ry="4.5"/>
            <rect x="0" y="0" width="2.8" height="14" rx="1.2"/>
          </svg>
          Become a Patron
        </a>

        <a class="btn-donate btn-paypal"
           href="https://www.paypal.com/donate/?hosted_button_id=ZDJ9TXPPMNZ6U"
           target="_blank" rel="noopener noreferrer"
           aria-label="Tip via PayPal">
          <svg width="13" height="15" viewBox="0 0 24 28" fill="white" aria-hidden="true">
            <path d="M7.8 27H3.5L6.3 9.5h7.6c3.1 0 5.3.7 6.4 2 1.1 1.3
                     1.3 3 .5 5.1-.9 2.4-2.4 4.2-4.5 5.3-2 1-4.5 1.5-7.3
                     1.5H7l-.8 3.6zm1.1-6.5h1.6c1.5 0 2.8-.3 3.8-.9 1-.6
                     1.7-1.5 2.1-2.7.4-1.2.2-2-.5-2.6-.7-.5-1.9-.8-3.6-.8H10L8.9
                     20.5z"/>
          </svg>
          Tip via PayPal
        </a>

        <a class="btn-donate btn-stripe"
           href="https://buy.stripe.com/8x2dRa1cV0ahdTn3gn67S02"
           target="_blank" rel="noopener noreferrer"
           aria-label="Tip via Stripe">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M13.479 9.883c-2.116-.562-2.8-.562-2.8-1.237 0-.614.563-.9 1.6-.9
                     1.333 0 2.746.48 3.69.978l.542-3.337C15.568 5.023 14.238 4.5 12.28 4.5
                     10.32 4.5 8.68 5.104 7.68 6.194 7 6.97 6.68 7.93 6.68 9.016
                     c0 1.92.959 3.118 3.196 3.817 1.84.563 2.44.756 2.44 1.39
                     0 .67-.6 1.005-1.76 1.005-1.44 0-3-.6-4.12-1.36l-.56 3.4
                     c1.16.72 2.88 1.232 4.68 1.232 1.92 0 3.52-.512 4.52-1.536
                     .84-.868 1.24-1.92 1.24-3.12 0-2.064-1.12-3.2-2.837-3.96z"
                  fill="white"/>
          </svg>
          Live Access Only - $2.10/m
        </a>

        <div class="payment-methods-row">
          <span class="payment-methods-label">Also accepted:</span>

          <!-- Apple Pay -->
          <svg height="20" viewBox="0 0 54 20" fill="none" aria-label="Apple Pay" role="img">
            <title>Apple Pay</title>
            <rect width="54" height="20" rx="4" fill="none" stroke="currentColor" stroke-opacity=".2" stroke-width=".75"/>
            <path d="M10.5 6.5c.4-.5.7-1.1.6-1.8-.6 0-1.3.4-1.7.9-.4.4-.7 1.1-.6 1.7.7.1 1.3-.3 1.7-.8z" fill="currentColor"/>
            <path d="M11.1 7.5c-.9-.1-1.7.5-2.2.5-.5 0-1.2-.5-2-.5C5.8 7.6 4.8 8.4 4.2 9.5
                     c-1.1 2-.3 4.9.8 6.5.5.8 1.2 1.6 2 1.6.8 0 1.1-.5 2-.5.9 0 1.2.5 2 .5
                     .8 0 1.5-.8 2-1.5.7-1.1.9-2.1 1-2.2-.1 0-2-1-2-3 0-1.8 1.4-2.6 1.5-2.7
                     -.8-1.2-2.1-1.3-2.4-1.3z" fill="currentColor"/>
            <text x="19" y="14" font-size="8" font-family="inherit" font-weight="500" fill="currentColor">Pay</text>
          </svg>

          <!-- Google Pay -->
          <svg height="20" viewBox="0 0 58 20" fill="none" aria-label="Google Pay" role="img">
            <title>Google Pay</title>
            <rect width="58" height="20" rx="4" fill="none" stroke="currentColor" stroke-opacity=".2" stroke-width=".75"/>
            <path d="M13.5 10c0-.2 0-.4-.1-.6H11v1.1h1.4c-.1.3-.3.6-.6.8v.7h1c.5-.5.7-1.2.7-2z" fill="#4285F4"/>
            <path d="M11 14c.7 0 1.3-.2 1.8-.6l-1-.7c-.2.2-.5.3-.8.3-1 0-1.7-.7-2-1.6H7.9v.7c.5 1 1.7 1.9 3.1 1.9z" fill="#34A853"/>
            <path d="M9 11.4c-.1-.3-.2-.5-.2-.8s.1-.5.2-.8V9H7.9c-.3.5-.4 1-.4 1.6s.2 1.1.4 1.6l1.1-.8z" fill="#FBBC05"/>
            <path d="M11 7.9c.5 0 1 .2 1.3.5l1-.9C12.8 6.7 12 6.4 11 6.4c-1.4 0-2.6.8-3.1 1.9l1.1.9c.3-.9 1-1.3 2-1.3z" fill="#EA4335"/>
            <text x="18" y="14" font-size="8" font-family="inherit" font-weight="500" fill="currentColor">Pay</text>
          </svg>

          <!-- Link by Stripe -->
          <svg height="20" viewBox="0 0 52 20" fill="none" aria-label="Link by Stripe" role="img">
            <title>Link by Stripe</title>
            <rect width="52" height="20" rx="4" fill="none" stroke="currentColor" stroke-opacity=".2" stroke-width=".75"/>
            <rect x="3.5" y="6" width="13" height="8" rx="2" fill="#00D66B"/>
            <path d="M7 10.5c0-1.1.9-2 2-2 .6 0 1.1.3 1.4.7l.6-.5C10.6 8.3 9.9 8 9 8
                     c-1.4 0-2.5 1.1-2.5 2.5S7.6 13 9 13c.9 0 1.6-.4 2.1-1l-.6-.5
                     c-.4.4-.9.6-1.5.6-1.1 0-2-.9-2-1.6z" fill="white"/>
            <text x="19" y="14" font-size="8" font-family="inherit" font-weight="500" fill="currentColor">Link</text>
          </svg>
        </div>
      </div>
    </div>

    <!-- About card -->
    <div class="card card-about">
      <p class="eyebrow eyebrow-green" style="margin-bottom:.1rem">About</p>
      <h2 class="card-title">Ty Clifford</h2>
      <p class="card-body">
        Based in <strong>Keyser, West Virginia</strong>. Nerd, tinkerer, and
        creator. Hobbies are my hobby — from tech and podcasting to whatever
        rabbit hole I fell into this week.
        <br><br>
        Follow along on <a href="https://go.tyclifford.com/patreon" target="_blank" rel="noopener">Patreon</a>
        and join the conversation.
      </p>
    </div>

    <!-- Social links card -->
    <div class="card card-social">
      <p class="eyebrow eyebrow-green" style="margin-bottom:.1rem">Links</p>
      <h2 class="card-title">Find me online</h2>
      <ul class="social-list" aria-label="Social media links">
        <li>
          <a href="https://github.com/snick512" target="_blank" rel="noopener">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0
                       0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0
                       20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38
                       13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0
                       5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44
                       7A3.37 3.37 0 0 0 9 18.13V22"/>
            </svg>
            github.com/snick512
          </a>
        </li>
        <li>
          <a href="mailto:ty@tyclifford.com">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <rect x="2" y="4" width="20" height="16" rx="2"/>
              <polyline points="2,4 12,13 22,4"/>
            </svg>
            ty@tyclifford.com
          </a>
        </li>
        <li>
          <a href="https://go.tyclifford.com/patreon" target="_blank" rel="noopener">
            <svg width="14" height="14" viewBox="0 0 12 14" fill="currentColor" aria-hidden="true">
              <ellipse cx="7.5" cy="4.8" rx="4.5" ry="4.5"/>
              <rect x="0" y="0" width="2.8" height="14" rx="1.2"/>
            </svg>
            patreon.com/tyclifford
          </a>
        </li>
      </ul>
    </div>

  </div><!-- /lower-grid -->

  <!-- AD ZONE — BELOW -->
  <?php if (!empty($ads_below)): render_ad_zone($ads_below, 'below', $size_breakpoints); endif; ?>

  <!-- ══════════════════════════════════════════════════════════════════════
       PAGE FOOTER
  ══════════════════════════════════════════════════════════════════════ -->
  <footer class="page-footer" role="contentinfo">
    <p class="footer-note">TyClifford.com &nbsp;·&nbsp; members area</p>
    <p class="footer-note">hobbies are my hobby</p>
    <p class="footer-note">
      <a href="mailto:ty@tyclifford.com">ty@tyclifford.com</a>
    </p>
  </footer>

</main>

<!-- CyberChat -->
<script src="https://chat.tyclifford.com/assets/js/cyberchat.js"></script>
<script>
  window.CYBERCHAT_BASE = 'https://chat.tyclifford.com';
  document.addEventListener('DOMContentLoaded', function() {
    CyberChat.init('#live-chat');
  });
</script>

</body>
</html>
