<?php
//Developer: core tech web designTechnology
//Whatsapp: +2349162671360
//Telegram: @jeditech
include __DIR__ . '/config.php';

$is_logged_in = isset($_SESSION['user_id']) && !empty($_SESSION['user_id']);
?>
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title><?php echo $page_title; ?></title>

  <meta name="description" content="<?php echo isset($page_description) ? htmlspecialchars($page_description) : htmlspecialchars($site_data['web_name']) . ' is your trusted platform for purchasing virtual numbers for OTP verification, boosting social media accounts with real followers, likes and comments, buying affordable airtime and data bundles, cable TV subscriptions, and electricity bill payments. Fast delivery, secure transactions, 24/7 support.'; ?>">

  <meta name="keywords" content="virtual number, OTP verification, social media boosting, buy followers, buy likes, buy comments, Instagram growth, TikTok followers, YouTube views, Facebook likes, airtime purchase, cheap data bundles, cable TV subscription, electricity bill payment, <?php echo htmlspecialchars($site_data['web_name']); ?>">

  <!-- Open Graph / Social Sharing -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="<?php echo $page_title; ?> — Virtual Numbers, Social Media Growth, Airtime, Data & Bill Payments">
  <meta property="og:description" content="<?php echo isset($page_description) ? htmlspecialchars($page_description) : 'Purchase virtual numbers, boost your social media, buy airtime & data, pay bills — all in one platform.'; ?>">
  <meta property="og:url" content="<?php echo htmlspecialchars($site_data['web_url']); ?>">
  <meta property="og:image" content="<?php echo htmlspecialchars(!empty($site_data['logo_url']) ? $site_data['logo_url'] : $site_data['web_url'] . '/images/softbills.png'); ?>">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<?php echo isset($page_title) ? htmlspecialchars($page_title) : htmlspecialchars($site_data['web_name']); ?>">
  <meta name="twitter:description" content="<?php echo isset($page_description) ? htmlspecialchars($page_description) : 'Virtual numbers, social media growth, airtime, data & bill payments.'; ?>">
  
  <meta name="cryptomus" content="eabb64c5" />
  
  <link rel="shortcut icon" type="image/png" href="<?php echo htmlspecialchars(!empty($site_data['favicon_url']) ? $site_data['favicon_url'] : (!empty($site_data['logo_url']) ? $site_data['logo_url'] : $site_data['web_url'] . '/images/softbills.png')); ?>"/>
  <?php include __DIR__ . '/pwa.php'; ?>
  <link rel="canonical" href="<?php echo $site_data['web_url']; ?>/" />
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

  <style>
    /* ─── DESIGN TOKENS ──────────────── */
    :root {
      --g: #4D148C;
      --g2: #6b23c2;
      --g-glow: rgba(77,20,140,.22);
      --g-dim: rgba(77,20,140,.08);
      --g-rim: rgba(77,20,140,.22);
      --accent: #FF6600;
      --radius: 14px;
      --radius-sm: 10px;
    }
    [data-theme=dark] {
      --bg: #f7f9fc; --bg2: #ffffff; --bg3: #eef1f6;
      --surface: rgba(0,0,0,.03); --border: rgba(0,0,0,.08); --border2: rgba(0,0,0,.14);
      --text: #0c0f14; --text2: rgba(12,15,20,.55); --text3: rgba(12,15,20,.35);
      --card: #ffffff; --input-bg: #f9fafc; --shadow: rgba(0,0,0,.08);
    }
    [data-theme=light] {
      --bg: #f7f9fc; --bg2: #ffffff; --bg3: #eef1f6;
      --surface: rgba(0,0,0,.03); --border: rgba(0,0,0,.08); --border2: rgba(0,0,0,.14);
      --text: #0c0f14; --text2: rgba(12,15,20,.55); --text3: rgba(12,15,20,.35);
      --card: #ffffff; --input-bg: #f9fafc; --shadow: rgba(0,0,0,.08);
    }

    /* ─── RESET ──────────────────────── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; font-size: 16px; transition: background .3s, color .3s; }
    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: var(--bg); color: var(--text);
      overflow-x: hidden; -webkit-font-smoothing: antialiased;
    }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    ul { list-style: none; }

    ::-webkit-scrollbar { width: 3px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--g); border-radius: 3px; }

    /* ─── NAV ────────────────────────── */
    #site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 800;
      height: 64px; display: flex; align-items: center; justify-content: space-between;
      padding: 0 2.5rem;
      background: rgba(8,11,15,.82); backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--border); transition: background .3s;
    }
    [data-theme=light] #site-nav { background: rgba(247,249,252,.88); }

    .nav-logo { display: flex; align-items: center; gap: 10px; }
    .nav-logo-icon {
      width: 36px; height: 36px; border-radius: 10px;
      background: var(--g); display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 16px var(--g-glow); flex-shrink: 0;
    }
    .nav-logo-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
    .nav-logo-name img { height: 28px; width: auto; }

    .nav-links { display: flex; align-items: center; gap: 2rem; }
    .nav-links a {
      font-size: .825rem; font-weight: 500; color: var(--text2);
      transition: color .2s; position: relative; padding-bottom: 2px;
    }
    .nav-links a::after {
      content: ''; position: absolute; bottom: 0; left: 0;
      width: 0; height: 1.5px; background: var(--g); transition: width .25s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--text); }
    .nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

    .nav-right { display: flex; align-items: center; gap: 8px; }
    .btn-theme {
      display: none !important;
    }
    .btn-theme:hover { border-color: var(--g); color: var(--g); }

    .nav-btn-outline {
      padding: 7px 16px; font-size: .8rem; font-weight: 600;
      border: 1px solid var(--border2); border-radius: 9px;
      color: var(--text2); transition: all .2s; background: transparent;
    }
    .nav-btn-outline:hover { color: var(--text); border-color: var(--border); }

    .nav-btn-primary {
      padding: 8px 20px; font-size: .8rem; font-weight: 700;
      background: var(--g); color: #000; border-radius: 9px;
      box-shadow: 0 3px 14px var(--g-glow); transition: all .22s;
    }
    .nav-btn-primary:hover { background: var(--g2); transform: translateY(-1px); box-shadow: 0 6px 22px var(--g-glow); }

    /* Hamburger */
    .ham-btn {
      display: none; width: 36px; height: 36px; border-radius: 9px;
      border: 1px solid var(--border); background: var(--surface);
      flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      cursor: pointer; transition: border-color .2s;
    }
    .ham-btn:hover { border-color: var(--g); }
    .ham { width: 14px; height: 1.5px; background: var(--text); border-radius: 2px; transition: all .25s; }
    .ham-btn.open .ham:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
    .ham-btn.open .ham:nth-child(2) { opacity: 0; }
    .ham-btn.open .ham:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

    /* Mobile nav */
    #mob-nav {
      display: none; position: fixed; top: 64px; left: 0; right: 0; z-index: 799;
      background: var(--bg2); border-bottom: 1px solid var(--border);
      flex-direction: column; gap: 2px; padding: .5rem 1rem 1rem;
      box-shadow: 0 20px 50px var(--shadow);
    }
    #mob-nav.open { display: flex; }
    #mob-nav a {
      padding: 11px 14px; border-radius: 10px; font-size: .875rem; font-weight: 500;
      color: var(--text2); transition: all .15s; display: flex; align-items: center; gap: 9px;
    }
    #mob-nav a:hover { background: var(--surface); color: var(--text); }
    .mob-div { height: 1px; background: var(--border); margin: 4px 0; }
    .mob-primary {
      background: var(--g) !important; color: #000 !important; font-weight: 700 !important;
      justify-content: center; border-radius: 10px; margin-top: 4px;
      box-shadow: 0 4px 14px var(--g-glow);
    }
    .mob-outline { border: 1px solid var(--border); justify-content: center; }
    #mob-back { display: none; position: fixed; inset: 0; top: 64px; z-index: 798; background: rgba(0,0,0,.5); }
    #mob-back.open { display: block; }

    /* ─── PAGE BODY OFFSET ───────────── */
    .page-body { padding-top: 5px; }

    /* ─── COMMON UTILITIES ───────────── */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
    .wrap { max-width: 1200px; margin: 0 auto; }
    section { padding: 5rem 2.5rem; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: .68rem; font-weight: 700; letter-spacing: .14em;
      text-transform: uppercase; color: var(--g); margin-bottom: .875rem;
    }
    .eyebrow::before, .eyebrow::after { content: ''; width: 20px; height: 1.5px; background: var(--g); border-radius: 2px; }
    h2 { font-size: clamp(1.85rem, 3vw, 2.75rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; color: var(--text); margin-bottom: .875rem; }
    .sec-desc { font-size: .9375rem; line-height: 1.8; color: var(--text2); max-width: 480px; }
    .sec-head { margin-bottom: 3.5rem; }

    /* ─── ALERTS ─────────────────────── */
    .bd-alert {
      display: flex; align-items: center; gap: 8px;
      padding: .75rem 1rem; border-radius: 11px;
      font-size: .8rem; margin-bottom: 1rem; font-weight: 500;
    }
    .bd-alert.success { background: rgba(77,20,140,.08); border: 1px solid rgba(77,20,140,.22); color: #4D148C; }
    .bd-alert.warning { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.22); color: #f59e0b; }
    .bd-alert.danger  { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.22);  color: #ef4444; }
    .bd-alert.info    { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.22); color: #3b82f6; }
    [data-theme=light] .bd-alert.success { color: #4D148C; }
    [data-theme=light] .bd-alert.warning { color: #92400e; }
    [data-theme=light] .bd-alert.danger  { color: #b91c1c; }
    [data-theme=light] .bd-alert.info    { color: #1d4ed8; }

    /* ─── FIELD ──────────────────────── */
    .bd-field { margin-bottom: 1.1rem; }
    .bd-field-lbl {
      display: block; font-size: .72rem; font-weight: 700;
      letter-spacing: .07em; text-transform: uppercase;
      color: var(--text2); margin-bottom: .5rem;
    }
    .bd-field-wrap { position: relative; }
    .bd-field-ico {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      color: var(--g); width: 16px; height: 16px; pointer-events: none; opacity: .7;
    }
    .bd-field-input {
      width: 100%; padding: .85rem .85rem .85rem 2.75rem;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: .875rem; font-weight: 500;
      background: var(--input-bg); border: 1.5px solid var(--border);
      border-radius: var(--radius); color: var(--text); outline: none; transition: all .2s;
    }
    .bd-field-input::placeholder { color: var(--text3); font-weight: 400; }
    .bd-field-input:focus { border-color: var(--g); background: var(--g-dim); box-shadow: 0 0 0 3px var(--g-glow); }

    /* ─── SUBMIT BUTTON ──────────────── */
    .bd-submit {
      width: 100%; padding: .9rem 1rem;
      font-family: 'Plus Jakarta Sans', sans-serif; font-size: .875rem;
      font-weight: 700; color: #000; background: var(--g);
      border: none; border-radius: var(--radius); cursor: pointer;
      position: relative; overflow: hidden; transition: all .22s;
      box-shadow: 0 4px 22px var(--g-glow);
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .bd-submit:hover { background: var(--g2); transform: translateY(-1px); box-shadow: 0 8px 30px var(--g-glow); }
    .bd-submit:active { transform: translateY(0); }
    .bd-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

    /* ─── REVEAL ANIMATION ───────────── */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.23,1,.32,1), transform .65s cubic-bezier(.23,1,.32,1); }
    .reveal.in { opacity: 1; transform: translateY(0); }
    .d1{transition-delay:.07s} .d2{transition-delay:.14s} .d3{transition-delay:.21s}

    @media(max-width: 768px) {
      #site-nav { padding: 0 1.25rem; }
      .nav-links, .nav-right .nav-btn-outline, .nav-right .nav-btn-primary { display: none !important; }
      .ham-btn { display: flex !important; }
      section { padding: 3.5rem 1.25rem; }
    }
  </style>
</head>
<body>

<?php
$current_page = basename(parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH), '.php');
$current_page = trim($current_page, '/');
if (empty($current_page) || $current_page === 'index') $current_page = 'home';
?>

<!-- ─── NAVBAR ────────────────────────── -->
<nav id="site-nav">
  <a href="<?php echo $site_data['web_url']; ?>/" class="nav-logo">
    <!--<div class="nav-logo-icon">
      <svg width="17" height="17" fill="none" stroke="#000" stroke-width="2.5" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
      </svg>
    </div> -->
    <div class="nav-logo-name">
      <img src="<?php echo htmlspecialchars(!empty($site_data['logo_url']) ? $site_data['logo_url'] : $site_data['web_url'] . '/images/softbills.png'); ?>" alt="<?php echo $site_data['web_name']; ?>" onerror="this.style.display='none';this.nextSibling.style.display='block'">
      <span style="display:none"><?php echo $site_data['web_name']; ?></span>
    </div>
  </a>

  <div class="nav-links">
    <a href="<?php echo $site_data['web_url']; ?>/" class="<?php echo $current_page === 'home' ? 'active' : ''; ?>">Home</a>
    <a href="<?php echo $site_data['web_url']; ?>/services" class="<?php echo $current_page === 'services' ? 'active' : ''; ?>">Services</a>
    <a href="<?php echo $site_data['web_url']; ?>/signin" class="<?php echo in_array($current_page, ['signin','api']) ? 'active' : ''; ?>">API</a>
    <a href="<?php echo $site_data['web_url']; ?>/faq" class="<?php echo $current_page === 'faq' ? 'active' : ''; ?>">FAQ</a>
    <a href="<?php echo $site_data['web_url']; ?>/blog" class="<?php echo $current_page === 'blog' ? 'active' : ''; ?>">Blog</a>
    <a href="<?php echo $site_data['web_url']; ?>/contact" class="<?php echo in_array($current_page, ['contact','support']) ? 'active' : ''; ?>">Support</a>
  </div>

  <div class="nav-right">
    <button class="btn-theme" id="themeBtn" aria-label="Toggle theme">
      <svg id="i-moon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
      <svg id="i-sun" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display:none"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
    </button>
    <button onclick="triggerPwaInstall()" class="nav-btn-outline" id="navInstallBtn" style="display:none;gap:5px;" title="Install App">
      <i class="fas fa-download" style="font-size:11px;"></i> Get App
    </button>
    <?php if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true): ?>
      <a href="<?php echo $site_data['web_url']; ?>/<?php echo (isset($_SESSION['is_admin']) && $_SESSION['is_admin'] == 1) ? 'admin' : 'user'; ?>/dashboard" class="nav-btn-outline">Dashboard</a>
      <a href="<?php echo $site_data['web_url']; ?>/logout" class="nav-btn-primary">Log Out</a>
    <?php else: ?>
      <a href="<?php echo $site_data['web_url']; ?>/signin" class="nav-btn-outline">Sign In</a>
      <a href="<?php echo $site_data['web_url']; ?>/signup" class="nav-btn-primary">Get Started →</a>
    <?php endif; ?>
    <button class="ham-btn" id="hamBtn" aria-label="Menu" aria-expanded="false">
      <span class="ham"></span><span class="ham"></span><span class="ham"></span>
    </button>
  </div>
</nav>

<div id="mob-back"></div>
<div id="mob-nav">
  <a href="<?php echo $site_data['web_url']; ?>/">Home</a>
  <a href="<?php echo $site_data['web_url']; ?>/services">Services</a>
  <a href="<?php echo $site_data['web_url']; ?>/signin">API</a>
  <a href="<?php echo $site_data['web_url']; ?>/faq">FAQ</a>
  <a href="<?php echo $site_data['web_url']; ?>/blog">Blog</a>
  <a href="<?php echo $site_data['web_url']; ?>/contact">Support</a>
  <a href="#" onclick="triggerPwaInstall();return false;" id="mobInstallBtn" style="display:none;"><i class="fas fa-download" style="color:var(--g);"></i> Download App</a>
  <div class="mob-div"></div>
  <?php if (isset($_SESSION['logged_in']) && $_SESSION['logged_in'] === true): ?>
    <a href="<?php echo $site_data['web_url']; ?>/<?php echo (isset($_SESSION['is_admin']) && $_SESSION['is_admin'] == 1) ? 'admin' : 'user'; ?>/dashboard" class="mob-outline">Dashboard</a>
    <a href="<?php echo $site_data['web_url']; ?>/logout" class="mob-primary">Log Out</a>
  <?php else: ?>
    <a href="<?php echo $site_data['web_url']; ?>/signin" class="mob-outline">Sign In</a>
    <a href="<?php echo $site_data['web_url']; ?>/signup" class="mob-primary">Get Started Free →</a>
  <?php endif; ?>
</div>

<div class="page-body">

<script>
  /* Theme init — force light mode */
  (function(){
    var t = 'light';
    document.documentElement.setAttribute('data-theme', t);
    var moon = document.getElementById('i-moon'), sun = document.getElementById('i-sun');
    if(moon) moon.style.display = 'none';
    if(sun)  sun.style.display  = 'block';
    if(sun)  sun.style.display  = t==='light'?'block':'none';
  })();
</script>