<?php
// Slides view has its own full-page layout (no sidebar)
$s        = $report['snapshot']     ?? [];
$cats     = $report['categories']   ?? [];
$kpis     = $report['kpis']         ?? [];
$roas     = $report['roas']         ?? 0;
$leadVal  = $report['lead_value']   ?? 0;
$health   = $report['health_score'] ?? 0;
$hcls     = $health >= 70 ? '#22c55e' : ($health >= 50 ? '#f59e0b' : '#ef4444');
$projName = $project['business_name'] ?? '';
$audLabel = $report['audience_label'] ?? 'Client';
$periodStr= date('d M Y', strtotime($start)) . ' — ' . date('d M Y', strtotime($end));

$scriptDir  = rtrim(str_replace('\\', '/', dirname($_SERVER['SCRIPT_NAME'] ?? '/')), '/');
$savitBase  = dirname(dirname($scriptDir));
$reportUrl  = $scriptDir . '/report?project=' . (int)$project['id'] . '&start=' . $start . '&end=' . $end . '&audience=' . $audience;
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= htmlspecialchars($projName) ?> — <?= htmlspecialchars($audLabel) ?> Report</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; background: #0f172a; color: #e2e8f0; font-family: 'Inter', sans-serif; overflow: hidden; }

    .deck { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; }
    .slide {
      height: 100vh; scroll-snap-align: start;
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      padding: 60px; position: relative;
    }
    .slide-title   { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); }
    .slide-kpi     { background: #1e293b; }
    .slide-brand   { background: #0f172a; }
    .slide-leads   { background: #1a1034; }
    .slide-table   { background: #1e293b; align-items: flex-start; overflow: hidden; }

    .slide-num {
      position: absolute; top: 20px; right: 28px;
      font-size: .75rem; color: #475569;
    }
    .back-btn {
      position: fixed; top: 16px; left: 16px; z-index: 100;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
      color: #94a3b8; text-decoration: none; border-radius: 8px; padding: 6px 12px; font-size: .8rem;
    }
    .back-btn:hover { background: rgba(255,255,255,.12); color: #e2e8f0; }
    .nav-hint { position: fixed; bottom: 20px; right: 20px; color: #334155; font-size: .75rem; }

    h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; }
    h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin-bottom: 2rem; color: #94a3b8; }
    .tag { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #7c3aed; margin-bottom: .5rem; }
    .period { font-size: 1rem; color: #475569; margin-top: .5rem; }

    .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; width: 100%; max-width: 900px; }
    .metric-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 1.5rem; text-align: center; }
    .metric-val { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1; }
    .metric-lbl { font-size: .8rem; color: #64748b; margin-top: .4rem; }
    .metric-delta { font-size: .75rem; margin-top: .25rem; }

    .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; width: 100%; max-width: 900px; }
    .cat-box { background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.25); border-radius: 12px; padding: 1.5rem; text-align: center; }
    .cat-count { font-size: 2.5rem; font-weight: 800; color: #a78bfa; }
    .cat-name  { font-size: .85rem; color: #94a3b8; margin-top: .3rem; }
    .cat-value { font-size: .8rem; color: #7c3aed; margin-top: .2rem; }

    .score-ring { width: 120px; height: 120px; position: relative; margin: 0 auto 1.5rem; }
    .slide-table table { width: 100%; border-collapse: collapse; font-size: .85rem; }
    .slide-table th { color: #475569; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; border-bottom: 1px solid rgba(255,255,255,.08); padding: 8px 12px; text-align: right; }
    .slide-table th:first-child { text-align: left; }
    .slide-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.04); text-align: right; color: #cbd5e1; }
    .slide-table td:first-child { text-align: left; color: #e2e8f0; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .branded-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; width: 100%; max-width: 500px; margin: 1rem auto; }
    .branded-seg { transition: width .5s; }

    @media print {
      .deck { overflow: visible; }
      .slide { height: 100vh; page-break-after: always; }
      .back-btn, .nav-hint { display: none; }
    }
  </style>
</head>
<body>

<a href="<?= htmlspecialchars($reportUrl) ?>" class="back-btn">← Back to Report</a>
<div class="nav-hint">↑↓ Scroll or arrow keys to navigate</div>

<div class="deck" id="deck">

  <!-- Slide 1: Title -->
  <div class="slide slide-title">
    <span class="slide-num">1</span>
    <div class="tag">Savit Analytics — <?= htmlspecialchars($audLabel) ?> Report</div>
    <h1><?= htmlspecialchars($projName) ?></h1>
    <div class="period"><?= htmlspecialchars($periodStr) ?></div>
  </div>

  <!-- Slide 2: Health & ROAS -->
  <div class="slide slide-kpi">
    <span class="slide-num">2</span>
    <h2>Performance At a Glance</h2>
    <div class="metric-grid">
      <div class="metric-box">
        <div class="metric-val" style="color:<?= $hcls ?>;"><?= $health ?></div>
        <div class="metric-lbl">Health Score /100</div>
      </div>
      <div class="metric-box">
        <div class="metric-val" style="color:#818cf8;"><?= $roas ?>x</div>
        <div class="metric-lbl">ROAS</div>
      </div>
      <div class="metric-box">
        <div class="metric-val" style="color:#34d399;">₹<?= number_format($leadVal, 0) ?></div>
        <div class="metric-lbl">Lead Value</div>
      </div>
      <div class="metric-box">
        <div class="metric-val"><?= number_format($s['total_leads'] ?? 0) ?></div>
        <div class="metric-lbl">Total Leads</div>
      </div>
    </div>
  </div>

  <!-- Slide 3: GSC Metrics -->
  <div class="slide slide-kpi">
    <span class="slide-num">3</span>
    <h2>Search Console Overview</h2>
    <div class="metric-grid">
      <div class="metric-box">
        <div class="metric-val" style="color:#60a5fa;"><?= number_format($s['gsc_clicks'] ?? 0) ?></div>
        <div class="metric-lbl">Clicks</div>
      </div>
      <div class="metric-box">
        <div class="metric-val"><?= number_format($s['gsc_impressions'] ?? 0) ?></div>
        <div class="metric-lbl">Impressions</div>
      </div>
      <div class="metric-box">
        <div class="metric-val"><?= round(($s['gsc_ctr'] ?? 0) * 100, 2) ?>%</div>
        <div class="metric-lbl">CTR</div>
      </div>
      <div class="metric-box">
        <div class="metric-val"><?= number_format($s['gsc_position'] ?? 0, 1) ?></div>
        <div class="metric-lbl">Avg Position</div>
      </div>
    </div>
  </div>

  <!-- Slide 4: Branded vs Non-Branded -->
  <?php
  $bc  = (int)($s['branded_clicks']     ?? 0);
  $nbc = (int)($s['non_branded_clicks'] ?? 0);
  $tc  = max(1, $bc + $nbc);
  $bPct= round($bc / $tc * 100);
  ?>
  <div class="slide slide-brand">
    <span class="slide-num">4</span>
    <h2>Branded vs Non-Branded</h2>
    <div class="branded-bar">
      <div class="branded-seg" style="width:<?= $bPct ?>%;background:#818cf8;"></div>
      <div class="branded-seg" style="width:<?= 100-$bPct ?>%;background:#34d399;"></div>
    </div>
    <div class="metric-grid" style="max-width:600px;">
      <div class="metric-box">
        <div class="metric-val" style="color:#818cf8;"><?= number_format($bc) ?></div>
        <div class="metric-lbl">Branded Clicks (<?= $bPct ?>%)</div>
      </div>
      <div class="metric-box">
        <div class="metric-val" style="color:#34d399;"><?= number_format($nbc) ?></div>
        <div class="metric-lbl">Non-Branded Clicks (<?= 100-$bPct ?>%)</div>
      </div>
    </div>
  </div>

  <!-- Slide 5: Lead Categories -->
  <?php if (!empty($cats)): ?>
  <div class="slide slide-leads">
    <span class="slide-num">5</span>
    <h2>Lead Categories</h2>
    <div class="cat-grid">
      <?php foreach ($cats as $cat): ?>
      <div class="cat-box">
        <div class="cat-count"><?= number_format($cat['total']) ?></div>
        <div class="cat-name"><?= htmlspecialchars($cat['label']) ?></div>
        <?php if ($audience !== 'client' && $cat['value'] > 0): ?>
        <div class="cat-value">₹<?= number_format($cat['value']) ?> value</div>
        <?php endif; ?>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
  <?php endif; ?>

  <!-- Slide 6: Traffic Channels -->
  <div class="slide slide-kpi">
    <span class="slide-num">6</span>
    <h2>Traffic Channels</h2>
    <div class="metric-grid">
      <div class="metric-box">
        <div class="metric-val" style="color:#34d399;"><?= number_format($s['organic_sessions'] ?? 0) ?></div>
        <div class="metric-lbl">Organic</div>
      </div>
      <div class="metric-box">
        <div class="metric-val"><?= number_format($s['paid_sessions'] ?? 0) ?></div>
        <div class="metric-lbl">Paid</div>
      </div>
      <div class="metric-box">
        <div class="metric-val"><?= number_format($s['direct_sessions'] ?? 0) ?></div>
        <div class="metric-lbl">Direct</div>
      </div>
      <div class="metric-box">
        <div class="metric-val"><?= number_format($s['social_sessions'] ?? 0) ?></div>
        <div class="metric-lbl">Social</div>
      </div>
    </div>
  </div>

  <!-- Slide 7: AI & LLM -->
  <div class="slide slide-kpi">
    <span class="slide-num">7</span>
    <h2>AI & LLM Visibility</h2>
    <div class="metric-grid">
      <div class="metric-box">
        <div class="metric-val" style="color:#f59e0b;"><?= number_format($s['llm_total'] ?? 0) ?></div>
        <div class="metric-lbl">Total LLM Traffic</div>
      </div>
      <div class="metric-box">
        <div class="metric-val"><?= number_format($s['ai_overview'] ?? 0) ?></div>
        <div class="metric-lbl">AI Overview</div>
      </div>
      <?php foreach (['chatgpt' => 'ChatGPT', 'claude' => 'Claude', 'perplexity' => 'Perplexity'] as $k => $lbl): ?>
      <div class="metric-box">
        <div class="metric-val" style="font-size:1.8rem;"><?= number_format($s['ref_' . $k] ?? 0) ?></div>
        <div class="metric-lbl"><?= $lbl ?></div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>

</div><!-- /deck -->

<script>
// Arrow key + keyboard navigation
document.addEventListener('keydown', e => {
  const deck = document.getElementById('deck');
  const h    = window.innerHeight;
  if (e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === ' ')  deck.scrollBy({top:  h, behavior:'smooth'});
  if (e.key === 'ArrowUp'   || e.key === 'PageUp')                      deck.scrollBy({top: -h, behavior:'smooth'});
});
</script>
</body>
</html>
