<?php
// demo.php — Halaman Demo Sriwijaya Smart Edu
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Demo Sistem — Sriwijaya Smart Edu</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet"/>
<style>
  :root {
    --navy:        #0f1f5c;
    --navy-deep:   #091444;
    --navy-mid:    #1a2f6e;
    --blue:        #1e40af;
    --blue-bright: #2563eb;
    --blue-light:  #3b82f6;
    --sky:         #60a5fa;
    --accent:      #f0a500;
    --white:       #ffffff;
    --gray-50:     #f8faff;
    --gray-100:    #eef2ff;
    --gray-200:    #e0e7ff;
    --text-main:   #0f172a;
    --text-muted:  #475569;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--navy-deep);
    min-height: 100vh;
    color: white;
    overflow-x: hidden;
  }

  /* BG */
  .bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 70% 55% at 20% 20%, rgba(37,99,235,.25) 0%, transparent 60%),
      radial-gradient(ellipse 50% 50% at 85% 80%, rgba(96,165,250,.15) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 50% 50%, rgba(240,165,0,.05) 0%, transparent 70%);
  }
  .bg-grid {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 52px 52px;
  }
  .orb {
    position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none;
    animation: drift linear infinite;
  }
  .orb-1 { width:420px;height:420px;background:rgba(37,99,235,.18);top:-100px;left:-100px;animation-duration:24s; }
  .orb-2 { width:320px;height:320px;background:rgba(96,165,250,.12);bottom:-80px;right:-60px;animation-duration:19s;animation-delay:-10s; }
  @keyframes drift {
    0%{transform:translate(0,0)scale(1)}
    33%{transform:translate(28px,-18px)scale(1.04)}
    66%{transform:translate(-18px,28px)scale(.97)}
    100%{transform:translate(0,0)scale(1)}
  }

  /* NAVBAR */
  .navbar {
    position: relative; z-index: 10;
    height: 68px; padding: 0 5%;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
  }
  .nav-logo { display: flex; align-items: center; gap: 11px; }
  .nav-logo .lm {
    width: 40px; height: 40px; background: var(--blue-bright);
    border-radius: 11px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px; color: white;
    box-shadow: 0 4px 18px rgba(37,99,235,.4);
  }
  .nav-logo .lt { font-size: 16px; font-weight: 800; color: white; line-height: 1.2; }
  .nav-logo .ls { font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .5px; text-transform: uppercase; }
  .nav-back {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,.6);
    text-decoration: none; transition: color .2s;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: 8px 16px;
  }
  .nav-back:hover { color: white; background: rgba(255,255,255,.12); }
  .nav-back svg { width: 15px; height: 15px; }

  /* HERO */
  .hero {
    position: relative; z-index: 5;
    text-align: center; padding: 72px 5% 60px;
  }
  .demo-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    border-radius: 100px; padding: 7px 18px; margin-bottom: 28px;
    font-size: 12px; font-weight: 700; color: var(--sky); letter-spacing: .5px;
  }
  .demo-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{opacity:1}50%{opacity:.35} }
  .hero h1 { font-size: clamp(30px,4.5vw,54px); font-weight: 800; line-height: 1.15; margin-bottom: 16px; }
  .hero h1 em { font-style: italic; font-family: 'Instrument Serif', serif; color: var(--sky); font-weight: 400; }
  .hero p { font-size: 16px; color: rgba(255,255,255,.6); max-width: 540px; margin: 0 auto 12px; line-height: 1.7; }
  .hero-note {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(240,165,0,.12); border: 1px solid rgba(240,165,0,.25);
    border-radius: 8px; padding: 8px 16px; margin-top: 4px;
    font-size: 13px; font-weight: 600; color: var(--accent);
  }

  /* CARDS GRID */
  .cards-wrap {
    position: relative; z-index: 5;
    max-width: 860px; margin: 0 auto;
    padding: 0 5% 80px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  }

  .demo-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px; padding: 36px 32px 32px;
    text-decoration: none; color: white;
    display: flex; flex-direction: column; gap: 0;
    transition: all .3s cubic-bezier(.22,1,.36,1);
    position: relative; overflow: hidden;
    animation: cardIn .6s cubic-bezier(.22,1,.36,1) both;
  }
  .demo-card:nth-child(1) { animation-delay: .1s; }
  .demo-card:nth-child(2) { animation-delay: .2s; }
  @keyframes cardIn {
    from { opacity:0; transform:translateY(28px) scale(.97); }
    to   { opacity:1; transform:none; }
  }
  .demo-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255,255,255,.06) 0%, transparent 70%);
    opacity: 0; transition: opacity .3s;
  }
  .demo-card:hover { transform: translateY(-8px); box-shadow: 0 28px 64px rgba(0,0,0,.4); border-color: rgba(255,255,255,.22); }
  .demo-card:hover::before { opacity: 1; }

  /* Card — primary (Aplikasi Android) */
  .demo-card.primary {
    background: linear-gradient(145deg, rgba(37,99,235,.35) 0%, rgba(15,31,92,.6) 100%);
    border-color: rgba(37,99,235,.45);
  }
  .demo-card.primary:hover { border-color: rgba(96,165,250,.6); box-shadow: 0 28px 64px rgba(37,99,235,.3); }

  /* Card — accent (Dashboard Admin) */
  .demo-card.accent-card {
    background: linear-gradient(145deg, rgba(15,31,92,.5) 0%, rgba(9,20,68,.8) 100%);
    border-color: rgba(255,255,255,.12);
  }

  .card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
  .card-icon {
    width: 60px; height: 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
    flex-shrink: 0;
  }
  .icon-blue  { background: rgba(37,99,235,.35); border: 1px solid rgba(37,99,235,.5); }
  .icon-navy  { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
  .card-chip {
    font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 100px;
  }
  .chip-live   { background: rgba(34,197,94,.18); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
  .chip-admin  { background: rgba(240,165,0,.15); color: var(--accent); border: 1px solid rgba(240,165,0,.3); }

  .card-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; line-height: 1.25; }
  .card-desc  { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.65; margin-bottom: 26px; flex: 1; }

  .card-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
  .card-feat {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75);
  }
  .card-feat .ft-dot {
    width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08);
    font-size: 10px;
  }

  .card-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 20px; border-radius: 12px;
    font-size: 14px; font-weight: 800;
    border: none; cursor: pointer; transition: all .22s;
    text-decoration: none; width: 100%;
  }
  .btn-primary-card { background: var(--blue-bright); color: white; }
  .btn-primary-card:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(37,99,235,.45); }
  .btn-navy-card { background: rgba(255,255,255,.1); color: white; border: 1.5px solid rgba(255,255,255,.2); }
  .btn-navy-card:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
  .card-btn svg { width: 16px; height: 16px; }

  /* Info bar */
  .info-bar {
    position: relative; z-index: 5;
    max-width: 860px; margin: -40px auto 0; padding: 0 5% 60px;
  }
  .info-inner {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; padding: 18px 24px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  }
  .info-icon { font-size: 22px; }
  .info-text { flex: 1; font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.6; }
  .info-text strong { color: rgba(255,255,255,.85); }
  .info-wa {
    display: inline-flex; align-items: center; gap: 7px;
    background: #25d366; color: white; font-size: 13px; font-weight: 700;
    padding: 9px 18px; border-radius: 9px; text-decoration: none; white-space: nowrap;
    transition: .2s;
  }
  .info-wa:hover { background: #22c55e; transform: translateY(-1px); }
  .info-wa svg { width: 15px; height: 15px; }

  /* FOOTER */
  .pg-footer {
    position: relative; z-index: 5;
    text-align: center; padding: 24px 5%;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 12.5px; color: rgba(255,255,255,.3);
  }
  .pg-footer a { color: var(--sky); text-decoration: none; font-weight: 600; }

  @media (max-width: 640px) {
    .cards-wrap { grid-template-columns: 1fr; }
    .hero { padding: 48px 5% 40px; }
  }
</style>
</head>
<body>
<div class="bg"></div>
<div class="bg-grid"></div>
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>

<!-- NAVBAR -->
<nav class="navbar">
  <div class="nav-logo">
    <div class="lm">SE</div>
    <div>
      <div class="lt">Sriwijaya Smart Edu</div>
      <div class="ls">Smart Solutions for Modern Education</div>
    </div>
  </div>
  <a href="index.php" class="nav-back">
    <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
    Kembali ke Beranda
  </a>
</nav>

<!-- HERO -->
<div class="hero">
  <div class="demo-badge">
    <div class="dot"></div>
    Demo Interaktif — Sriwijaya Smart Edu
  </div>
  <h1>Coba Sistem Kami<br/><em>Langsung Sekarang</em></h1>
  <p>Pilih demo yang ingin Anda lihat. Tidak perlu registrasi — eksplorasi bebas semua fitur.</p>
  <div class="hero-note">
    💡 Demo bersifat read-only. Data tidak akan tersimpan permanen.
  </div>
</div>

<!-- CARDS -->
<div class="cards-wrap">

  <!-- CARD 1 — Aplikasi Android -->
  <a href="https://download.sman2sekayu.sch.id/" target="_blank" rel="noopener" class="demo-card primary">
    <div class="card-top">
      <div class="card-icon icon-blue">📱</div>
      <div class="card-chip chip-live">● Live App</div>
    </div>
    <div class="card-title">Lihat Aplikasi Android</div>
    <div class="card-desc">Unduh dan coba langsung Aplikasi Ujian Berbasis Android yang digunakan oleh sekolah-sekolah aktif kami.</div>
    <div class="card-features">
      <div class="card-feat"><div class="ft-dot">📝</div>Sistem CBT Anti-Curang</div>
      <div class="card-feat"><div class="ft-dot">🔀</div>Randomisasi Soal Otomatis</div>
      <div class="card-feat"><div class="ft-dot">📊</div>Nilai Langsung Setelah Ujian</div>
      <div class="card-feat"><div class="ft-dot">🌐</div>Berbasis Web & Android APK</div>
    </div>
    <div class="card-btn btn-primary-card">
      <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><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>
      Download & Lihat Aplikasi
    </div>
  </a>

  <!-- CARD 2 — Dashboard Admin -->
  <a href="demodashboard.php" class="demo-card accent-card">
    <div class="card-top">
      <div class="card-icon icon-navy">🖥️</div>
      <div class="card-chip chip-admin">Admin Panel</div>
    </div>
    <div class="card-title">Dashboard Admin</div>
    <div class="card-desc">Jelajahi tampilan panel admin lengkap: kelola tes, peserta, laporan, dan semua fitur manajemen sekolah.</div>
    <div class="card-features">
      <div class="card-feat"><div class="ft-dot">📋</div>Daftar Tes & Manajemen Soal</div>
      <div class="card-feat"><div class="ft-dot">👥</div>Data Peserta & Kelas</div>
      <div class="card-feat"><div class="ft-dot">📈</div>Laporan Nilai & Rekap</div>
      <div class="card-feat"><div class="ft-dot">⚙️</div>Pengaturan Ujian & Token</div>
    </div>
    <div class="card-btn btn-navy-card">
      <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      Masuk ke Demo Dashboard
    </div>
  </a>

</div>

<!-- INFO BAR -->
<div class="info-bar">
  <div class="info-inner">
    <div class="info-icon">💬</div>
    <div class="info-text">
      <strong>Tertarik menggunakan sistem ini untuk sekolah Anda?</strong> Konsultasi gratis dengan tim kami — kami siap membantu sekolah Anda bertransformasi digital.
    </div>
    <a href="https://wa.me/6281234567890?text=Halo%20Sriwijaya%20Smart%20Edu%2C%20saya%20tertarik%20setelah%20melihat%20demo%20sistem%20ujian." target="_blank" class="info-wa">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.123.556 4.116 1.528 5.845L.057 23.899l6.234-1.635A11.936 11.936 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.892a9.876 9.876 0 01-5.017-1.364l-.36-.214-3.732.979 1.003-3.648-.234-.373A9.865 9.865 0 012.108 12C2.108 6.528 6.528 2.108 12 2.108S21.892 6.528 21.892 12 17.472 21.892 12 21.892z"/></svg>
      Konsultasi Gratis
    </a>
  </div>
</div>

<div class="pg-footer">
  © 2025 <a href="index.php">Sriwijaya Smart Edu</a> · Produk dari Sriwijaya Dev · Bengkulu, Indonesia
</div>
</body>
</html>