<?php
/**
 * includes/public_layout.php
 * Shared navbar + footer + base styles for public pages (home, contact, terms, privacy)
 * Usage:
 *   $publicPage = ['title'=>'...','badge'=>'...','badgeIcon'=>'📄','heroTitle'=>'...','heroGrad'=>'...','heroSub'=>'...'];
 *   $publicPageMeta = ['lastUpdated'=>'March 1, 2026','readTime'=>'5 min read'];
 *   $publicSection = 'contact'; // for active nav link
 *   publicHead();   — outputs <head> open through </head>
 *   publicNav();    — outputs navbar
 *   publicHero();   — outputs hero section
 *   publicFooter(); — outputs footer + closing scripts
 */

function publicHead(array $page = [], string $extraCss = '') {
    $title    = htmlspecialchars($page['title'] ?? 'StudyTrack');
    $siteName = defined('SITE_NAME') ? SITE_NAME : 'StudyTrack';
    $siteUrl  = defined('SITE_URL')  ? SITE_URL  : '';
    echo <<<HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>{$title} — {$siteName}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Sora:wght@700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{$siteUrl}/assets/css/style.css">
<link rel="icon" type="image/png" href="https://studytrack.edurx.icu/studytrack/images/studytrack.png">
<script>(function(){var t=localStorage.getItem('stTheme')||'dark';document.documentElement.setAttribute('data-theme',t);})();</script>
<style>
/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg-primary); color:var(--text-primary); font-family:'Inter',sans-serif; overflow-x:hidden; }
a    { text-decoration:none; color:inherit; }

/* ── Ambient glow ── */
.pub-glow {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 15% 20%, rgba(99,102,241,.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(168,85,247,.07) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 55% 100%,rgba(6,182,212,.05)  0%, transparent 50%);
}

/* ── Navbar ── */
.pub-nav {
  position:fixed; top:0; left:0; right:0; z-index:999;
  background:rgba(10,10,15,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:0 24px;
  transition:background .3s;
}
[data-theme="light"] .pub-nav { background:rgba(255,255,255,.93); border-bottom:1px solid var(--border); }
.pub-nav-inner {
  max-width:1160px; margin:0 auto;
  height:64px; display:flex; align-items:center; justify-content:space-between;
}
.pub-nav-logo { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700; }
.pub-nav-logo img { height:36px; }
.pub-nav-logo span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.pub-nav-links { display:flex; align-items:center; gap:8px; }
.pub-nav-links a {
  padding:8px 16px; border-radius:8px; font-size:14px; font-weight:500;
  color:var(--text-secondary); transition:all .2s;
}
.pub-nav-links a:hover { color:var(--text-primary); background:rgba(255,255,255,.05); }
[data-theme="light"] .pub-nav-links a:hover { background:var(--bg-secondary); }
.pub-nav-links a.active { color:var(--accent) !important; }
.pub-nav-links .btn-nav {
  background:var(--gradient); color:#fff !important;
  padding:8px 20px; border-radius:8px;
  box-shadow:0 4px 14px rgba(99,102,241,.35);
}
.pub-nav-links .btn-nav:hover { box-shadow:0 6px 20px rgba(99,102,241,.5); transform:translateY(-1px); }

/* Theme btn */
.pub-theme-btn {
  width:36px; height:36px; border-radius:10px;
  background:var(--bg-secondary); border:1px solid var(--border);
  color:var(--text-primary); cursor:pointer; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; margin-left:4px;
}
.pub-theme-btn:hover { background:var(--bg-card); border-color:rgba(255,255,255,.15); }

/* ── Mobile hamburger ── */
.pub-hamburger {
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--bg-secondary); border:1px solid var(--border);
  cursor:pointer; flex-direction:column; gap:5px; padding:10px;
  transition:all .2s;
}
.pub-hamburger span {
  display:block; width:18px; height:2px;
  background:var(--text-primary); border-radius:2px;
  transition:all .3s; transform-origin:center;
}
.pub-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.pub-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.pub-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media(max-width:768px) {
  .pub-nav-links { display:none !important; }
  .pub-hamburger { display:flex !important; }
}

/* Mobile drawer */
.pub-drawer {
  display:none; position:fixed; top:64px; left:0; right:0; z-index:998;
  background:var(--bg-card); border-bottom:1px solid var(--border);
  padding:16px; flex-direction:column; gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  animation:pubSlideDown .2s ease;
}
@keyframes pubSlideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
[data-theme="light"] .pub-drawer { background:#fff; }
.pub-drawer.open { display:flex; }
.pub-drawer a {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:10px;
  font-size:15px; font-weight:500; color:var(--text-secondary); transition:all .2s;
}
.pub-drawer a:hover { background:var(--bg-secondary); color:var(--text-primary); }
.pub-drawer .btn-drawer {
  background:var(--gradient); color:#fff !important;
  justify-content:center; font-weight:700; margin-top:4px;
  box-shadow:0 4px 14px rgba(99,102,241,.35);
}

/* ── Hero ── */
.pub-hero {
  padding:120px 24px 64px;
  text-align:center; position:relative; overflow:hidden;
}
.pub-hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(99,102,241,.13) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 20% 80%, rgba(168,85,247,.07) 0%, transparent 60%);
}
.pub-hero-inner { position:relative; z-index:1; max-width:700px; margin:0 auto; }
.pub-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(99,102,241,.15); border:1px solid rgba(99,102,241,.3);
  border-radius:100px; padding:6px 18px;
  font-size:13px; color:#a5b4fc; font-weight:500; margin-bottom:22px;
}
.pub-hero-title {
  font-family:'Sora',sans-serif;
  font-size:clamp(34px,5.5vw,58px); font-weight:800; line-height:1.1;
  letter-spacing:-2px; margin-bottom:18px;
}
.pub-hero-title .grad {
  background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.pub-hero-sub { font-size:16px; color:var(--text-secondary); line-height:1.75; max-width:560px; margin:0 auto; }
.pub-hero-meta {
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
  margin-top:24px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.07);
}
.pub-hero-meta span {
  font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:6px;
}
[data-theme="light"] .pub-hero-meta { border-color:var(--border); }

/* ── Footer ── */
.pub-footer {
  background:var(--bg-secondary); border-top:1px solid var(--border);
  padding:44px 24px; margin-top:0; position:relative; z-index:1;
}
.pub-footer-inner {
  max-width:1160px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.pub-footer-logo { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:700; }
.pub-footer-logo img { height:28px; }
.pub-footer-logo span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.pub-footer-links { display:flex; gap:24px; flex-wrap:wrap; }
.pub-footer-links a { font-size:13px; color:var(--text-muted); transition:color .2s; }
.pub-footer-links a:hover { color:var(--text-secondary); }
.pub-footer-copy { font-size:13px; color:var(--text-muted); }

@media(max-width:640px) {
  .pub-hero { padding:100px 16px 48px; }
  .pub-footer-inner { flex-direction:column; text-align:center; }
  .pub-footer-links { justify-content:center; }
}
</style>
HTML;
    echo $extraCss;
}

function publicNav(string $active = '') {
    $siteUrl  = defined('SITE_URL')  ? SITE_URL  : '';
    $siteName = defined('SITE_NAME') ? SITE_NAME : 'StudyTrack';
    $loggedIn = function_exists('isLoggedIn') && isLoggedIn();

    $links = [
        ['href' => "$siteUrl/home",    'label' => 'Home',    'key' => 'home'],
        ['href' => "$siteUrl/contact", 'label' => 'Contact', 'key' => 'contact'],
    ];

    $desktopLinks = '';
    $drawerLinks  = '';
    foreach ($links as $l) {
        $isActive = ($active === $l['key']) ? ' active' : '';
        $desktopLinks .= "<a href=\"{$l['href']}\" class=\"{$isActive}\">{$l['label']}</a>";
        $drawerLinks  .= "<a href=\"{$l['href']}\"{$isActive}>{$l['label']}</a>";
    }

    if ($loggedIn) {
        $desktopLinks .= "<a href=\"$siteUrl/dashboard\">Dashboard</a>";
        $desktopLinks .= "<a href=\"$siteUrl/logout\">Sign Out</a>";
        $drawerLinks  .= "<a href=\"$siteUrl/dashboard\">📊 Dashboard</a>";
        $drawerLinks  .= "<a href=\"$siteUrl/logout\">🚪 Sign Out</a>";
    } else {
        $desktopLinks .= "<a href=\"$siteUrl/login\">Sign In</a>";
        $desktopLinks .= "<a href=\"$siteUrl/register\" class=\"btn-nav\">Get Started</a>";
        $drawerLinks  .= "<a href=\"$siteUrl/login\">🔑 Sign In</a>";
        $drawerLinks  .= "<a href=\"$siteUrl/register\" class=\"btn-drawer\">🚀 Get Started — Free</a>";
    }

    echo <<<HTML
<nav class="pub-nav" id="pubNav">
  <div class="pub-nav-inner">
    <a href="{$siteUrl}/home" class="pub-nav-logo">
      <img src="https://studytrack.edurx.icu/studytrack/images/studytrack.png" alt="{$siteName}" style="height:32px;width:32px;object-fit:contain;border-radius:8px;">
      <span style="font-size:18px;font-weight:800;letter-spacing:-0.5px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">{$siteName}</span>
    </a>
    <div class="pub-nav-links">
      {$desktopLinks}
      <button class="pub-theme-btn" onclick="pubToggleTheme()" id="pubThemeBtn" title="Toggle theme">🌙</button>
    </div>
    <div style="display:flex;align-items:center;gap:8px;">
      <button class="pub-theme-btn" onclick="pubToggleTheme()" id="pubThemeBtnMob" style="display:none" title="Toggle theme">🌙</button>
      <button class="pub-hamburger" id="pubHamburger" aria-label="Menu" onclick="pubToggleMenu()">
        <span></span><span></span><span></span>
      </button>
    </div>
  </div>
</nav>
<div class="pub-drawer" id="pubDrawer">
  {$drawerLinks}
</div>
HTML;
}

function publicHero(array $page = [], array $meta = []) {
    $badge     = htmlspecialchars($page['badgeIcon'] ?? '📄') . ' ' . htmlspecialchars($page['badge'] ?? '');
    $titleMain = htmlspecialchars($page['heroTitle'] ?? '');
    $titleGrad = htmlspecialchars($page['heroGrad']  ?? '');
    $sub       = htmlspecialchars($page['heroSub']   ?? '');
    $updated   = htmlspecialchars($meta['lastUpdated'] ?? '');
    $readTime  = htmlspecialchars($meta['readTime']    ?? '');

    $metaHtml = '';
    if ($updated || $readTime) {
        $metaHtml = '<div class="pub-hero-meta">';
        if ($updated)  $metaHtml .= "<span>📅 Effective: January 1, 2025</span><span>🔄 Updated: $updated</span>";
        if ($readTime) $metaHtml .= "<span>⏱️ $readTime read</span>";
        $metaHtml .= '</div>';
    }

    echo <<<HTML
<div class="pub-hero">
  <div class="pub-hero-bg"></div>
  <div class="pub-hero-inner">
    <div class="pub-badge">{$badge}</div>
    <h1 class="pub-hero-title">{$titleMain} <span class="grad">{$titleGrad}</span></h1>
    <p class="pub-hero-sub">{$sub}</p>
    {$metaHtml}
  </div>
</div>
HTML;
}

function publicFooter() {
    $siteUrl  = defined('SITE_URL')  ? SITE_URL  : '';
    $siteName = defined('SITE_NAME') ? SITE_NAME : 'StudyTrack';
    $year     = date('Y');

    echo <<<HTML
<footer class="pub-footer">
  <div class="pub-footer-inner">
    <a href="{$siteUrl}/home" class="pub-footer-logo">
      <img src="https://studytrack.edurx.icu/studytrack/images/studytrack.png" alt="{$siteName}" style="height:26px;width:26px;object-fit:contain;border-radius:6px;">
      <span style="font-size:15px;font-weight:800;letter-spacing:-0.5px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">{$siteName}</span>
    </a>
    <div class="pub-footer-links">
      <a href="{$siteUrl}/home">Home</a>
      <a href="{$siteUrl}/contact">Contact</a>
      <a href="{$siteUrl}/terms">Terms</a>
      <a href="{$siteUrl}/privacy">Privacy</a>
    </div>
    <span class="pub-footer-copy">© {$year} {$siteName} · Built for Sri Lankan A/L students ❤️</span>
  </div>
</footer>

<script>
// Theme
function pubToggleTheme() {
  var cur  = document.documentElement.getAttribute('data-theme') || 'dark';
  var next = cur === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', next);
  localStorage.setItem('stTheme', next);
  pubSyncThemeBtns();
  var nav = document.getElementById('pubNav');
  if (nav) nav.style.background = '';
}
function pubSyncThemeBtns() {
  var t = document.documentElement.getAttribute('data-theme');
  var icon = t === 'dark' ? '🌙' : '☀️';
  ['pubThemeBtn','pubThemeBtnMob'].forEach(function(id){
    var el = document.getElementById(id);
    if (el) el.textContent = icon;
  });
}
pubSyncThemeBtns();

// Mobile nav
function pubToggleMenu() {
  document.getElementById('pubDrawer').classList.toggle('open');
  document.getElementById('pubHamburger').classList.toggle('open');
}
document.addEventListener('click', function(e) {
  var d = document.getElementById('pubDrawer');
  var b = document.getElementById('pubHamburger');
  if (d && b && !d.contains(e.target) && !b.contains(e.target)) {
    d.classList.remove('open');
    b.classList.remove('open');
  }
});

// Navbar scroll shrink
var _nav = document.getElementById('pubNav');
window.addEventListener('scroll', function() {
  if (!_nav) return;
  var isDark = document.documentElement.getAttribute('data-theme') !== 'light';
  _nav.style.background = window.scrollY > 40
    ? (isDark ? 'rgba(10,10,15,.97)' : 'rgba(255,255,255,.99)')
    : (isDark ? 'rgba(10,10,15,.88)' : 'rgba(255,255,255,.93)');
});

// Show mobile theme btn on small screens
(function(){
  var mob = document.getElementById('pubThemeBtnMob');
  if (mob && window.innerWidth <= 768) mob.style.display = 'flex';
  window.addEventListener('resize', function(){
    if (mob) mob.style.display = window.innerWidth <= 768 ? 'flex' : 'none';
  });
})();
</script>
</body>
</html>
HTML;
}