<?php

require_once 'config.php';

$page_title = "Video Tutorials — EduTrack";

?>

<!DOCTYPE html>

<html lang="en" data-theme="light">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title><?php echo $page_title; ?></title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Serif+Display&display=swap" rel="stylesheet">

  <style>

  :root {

    --teal: #007A7A; --teal-light: #e0f4f4; --orange: #E87722;

    --dark: #0F1923; --navy: #1e2a3e; --mid: #2E3A45; --slate: #4a6275;

    --grey: #6B7785; --lgrey: #F2F4F5; --white: #fff; --cream: #FDFBF7;

    --card-bg: #ffffff; --bg: #f4f7fb; --border: #e2e8f0;

    --shadow: 0 4px 16px rgba(0,0,0,0.07);

    --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);

    --radius: 14px; --radius-sm: 8px;

    --font: 'Inter', system-ui, sans-serif;

    --grad: linear-gradient(135deg, #007A7A 0%, #005C5C 100%);

  }

  [data-theme="dark"] {

    --card-bg: #1e2a3e; --bg: #131c28; --border: #253040;

    --navy: #e8f0fe; --slate: #a0b3c5; --lgrey: #1a2535;

    --shadow: 0 4px 16px rgba(0,0,0,0.3);

  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body { font-family: var(--font); background: var(--bg); color: var(--navy); line-height: 1.6; transition: background .3s, color .3s; }

  a { text-decoration: none; color: var(--teal); }



  /* ── NAV ── */

  .nav {

    position: sticky; top: 0; z-index: 100;

    background: var(--card-bg); border-bottom: 1px solid var(--border);

    padding: 0 2rem; display: flex; align-items: center; justify-content: space-between;

    height: 64px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);

  }

  .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--navy); }

  .nav-logo { width: 34px; height: 34px; background: var(--teal); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'DM Serif Display'; font-size: 1.1rem; color: white; }

  .nav-links { display: flex; gap: 1.8rem; }

  .nav-links a { font-size: .9rem; font-weight: 500; color: var(--slate); transition: color .2s; }

  .nav-links a:hover, .nav-links a.active { color: var(--teal); }

  .nav-actions { display: flex; gap: .75rem; align-items: center; }

  .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 9px; font-size: .88rem; font-weight: 600; cursor: pointer; border: none; font-family: var(--font); transition: all .2s; }

  .btn-primary { background: var(--teal); color: white; }

  .btn-primary:hover { background: #005C5C; }

  .btn-outline { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); }

  .btn-sm { padding: 7px 14px; font-size: .8rem; }

  .theme-btn { background: none; border: none; color: var(--grey); cursor: pointer; font-size: 1rem; padding: 6px; border-radius: 8px; }

  .theme-btn:hover { background: var(--lgrey); }



  /* ── HERO ── */

  .hero {

    background: linear-gradient(135deg, #0b2b3f 0%, #134b6b 50%, #1b7a5c 100%);

    padding: 4rem 2rem 3.5rem; text-align: center; position: relative; overflow: hidden;

  }

  .hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='7' cy='7' r='2'/%3E%3C/g%3E%3C/svg%3E"); }

  .hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

  .hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(0,200,200,.15); border: 1px solid rgba(76,200,206,.3); color: #7ee8e8; border-radius: 40px; padding: 5px 16px; font-size: .8rem; font-weight: 600; margin-bottom: 1.25rem; }

  .hero h1 { font-size: 2.8rem; font-weight: 800; color: white; margin-bottom: .75rem; line-height: 1.15; }

  .hero h1 span { background: linear-gradient(135deg, #4CC8CE, #F5A200); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

  .hero p { font-size: 1.05rem; color: rgba(255,255,255,.7); margin-bottom: 1.75rem; }

  .hero-search { max-width: 500px; margin: 0 auto 2rem; position: relative; }

  .hero-search input { width: 100%; padding: 14px 20px 14px 48px; border: none; border-radius: 50px; background: rgba(255,255,255,.12); color: white; font-size: .95rem; font-family: var(--font); backdrop-filter: blur(4px); outline: none; border: 1px solid rgba(255,255,255,.2); }

  .hero-search input::placeholder { color: rgba(255,255,255,.5); }

  .hero-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); }

  .hero-stats { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

  .hero-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 40px; padding: 6px 16px; font-size: .8rem; color: rgba(255,255,255,.8); font-weight: 500; display: flex; align-items: center; gap: 6px; }



  /* ── LAYOUT ── */

  .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

  .main { padding: 2.5rem 0 4rem; }



  /* ── CATEGORY TABS ── */

  .cat-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }

  .cat-btn { padding: 8px 16px; border-radius: 9px; font-size: .83rem; font-weight: 600; border: 1.5px solid var(--border); background: var(--card-bg); color: var(--slate); cursor: pointer; transition: all .2s; font-family: var(--font); display: flex; align-items: center; gap: 6px; }

  .cat-btn:hover { border-color: var(--teal); color: var(--teal); }

  .cat-btn.active { background: var(--teal); border-color: var(--teal); color: white; }



  /* ── VIDEO GRID ── */

  .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }

  .section-head h2 { font-size: 1.15rem; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; }

  .section-head h2 .cat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); }

  .section-divider { height: 1px; background: var(--border); margin: 2.5rem 0; }



  .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; margin-bottom: 1rem; }

  .video-card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; transition: transform .2s, box-shadow .2s; cursor: pointer; }

  .video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

  .video-thumb { position: relative; height: 185px; background: var(--dark); display: flex; align-items: center; justify-content: center; overflow: hidden; }

  .video-thumb .thumb-bg { position: absolute; inset: 0; opacity: .25; background-size: cover; background-position: center; }

  .video-thumb .play-btn { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: white; z-index: 2; transition: all .2s; backdrop-filter: blur(4px); }

  .video-card:hover .play-btn { background: var(--teal); border-color: var(--teal); transform: scale(1.08); }

  .video-badge { position: absolute; top: 10px; left: 10px; background: var(--teal); color: white; font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 5px; z-index: 2; }

  .video-badge.orange { background: var(--orange); }

  .video-badge.purple { background: #7c3aed; }

  .video-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.7); color: white; font-size: .75rem; padding: 2px 7px; border-radius: 4px; z-index: 2; }

  .video-info { padding: 1rem 1.1rem 1.1rem; }

  .video-info h3 { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .3rem; line-height: 1.35; }

  .video-info p { font-size: .82rem; color: var(--slate); line-height: 1.5; margin-bottom: .75rem; }

  .video-tags { display: flex; flex-wrap: wrap; gap: .35rem; }

  .video-tag { background: var(--lgrey); border-radius: 5px; padding: 3px 8px; font-size: .72rem; color: var(--grey); font-weight: 500; }



  /* ── FEATURED ── */

  .featured-card { background: linear-gradient(135deg, #0b2b3f, #1b5c6b); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 2.5rem; min-height: 240px; }

  .featured-thumb { background: #0a1f2e; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

  .featured-thumb .big-play { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: white; backdrop-filter: blur(4px); transition: all .2s; cursor: pointer; }

  .featured-card:hover .big-play { background: var(--teal); border-color: var(--teal); transform: scale(1.06); }

  .featured-info { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }

  .featured-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); border-radius: 5px; padding: 4px 10px; font-size: .75rem; font-weight: 700; margin-bottom: .75rem; width: fit-content; }

  .featured-info h2 { font-size: 1.35rem; font-weight: 800; color: white; margin-bottom: .5rem; line-height: 1.3; }

  .featured-info p { font-size: .88rem; color: rgba(255,255,255,.65); line-height: 1.6; margin-bottom: 1rem; }

  .featured-meta { display: flex; gap: .75rem; flex-wrap: wrap; }

  .feat-meta-chip { background: rgba(255,255,255,.1); border-radius: 5px; padding: 4px 10px; font-size: .75rem; color: rgba(255,255,255,.75); font-weight: 500; display: flex; align-items: center; gap: 5px; }



  /* ── SCRIPT MODAL ── */

  .script-fab { position: fixed; bottom: 24px; right: 24px; z-index: 200; background: var(--orange); color: white; border: none; border-radius: 50px; padding: 12px 22px; font-size: .9rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 24px rgba(232,119,34,.4); font-family: var(--font); transition: all .2s; }

  .script-fab:hover { background: #c45e10; transform: translateY(-2px); }



  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 300; display: none; align-items: center; justify-content: center; padding: 1rem; }

  .modal-overlay.open { display: flex; }

  .modal { background: var(--card-bg); border-radius: 16px; max-width: 900px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); }

  .modal-header { padding: 1.5rem 1.5rem 0; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--card-bg); z-index: 2; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }

  .modal-header h2 { font-size: 1.2rem; font-weight: 800; color: var(--navy); }

  .modal-close { background: var(--lgrey); border: none; border-radius: 8px; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; color: var(--grey); display: flex; align-items: center; justify-content: center; }

  .modal-body { padding: 1.5rem; }



  /* ── SCRIPT CONTENT ── */

  .script-module { margin-bottom: 2.5rem; }

  .script-module-title { display: flex; align-items: center; gap: 10px; background: var(--teal); color: white; border-radius: 9px; padding: 10px 16px; font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }

  .script-module-title .module-num { background: rgba(255,255,255,.2); border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; flex-shrink: 0; }

  .script-video { background: var(--lgrey); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; border-left: 3px solid var(--teal); }

  .script-video h4 { font-size: .92rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; display: flex; align-items: center; gap: 8px; }

  .script-video .duration-badge { background: var(--teal); color: white; border-radius: 4px; padding: 2px 7px; font-size: .7rem; font-weight: 700; }

  .script-step { display: flex; gap: .75rem; margin-bottom: .6rem; align-items: flex-start; font-size: .87rem; color: var(--slate); }

  .script-step .step-label { min-width: 80px; font-weight: 700; color: var(--teal); font-size: .78rem; flex-shrink: 0; }

  .script-step .step-text { line-height: 1.5; }

  .script-step .step-say { color: #1f846b; font-style: italic; }

  .script-step .step-show { color: #1a5d9c; }



  /* ── COMING SOON ── */

  .coming-soon { text-align: center; padding: 3.5rem 2rem; background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--border); margin-top: 2rem; }

  .coming-soon i { font-size: 2.5rem; color: var(--teal); margin-bottom: 1rem; display: block; }

  .coming-soon h3 { font-size: 1.3rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }

  .coming-soon p { color: var(--slate); margin-bottom: 1.5rem; max-width: 440px; margin-left: auto; margin-right: auto; }



  /* ── NO RESULTS ── */

  .no-results { text-align: center; padding: 3rem; color: var(--grey); display: none; }



  /* ── FOOTER ── */

  footer { background: var(--dark); padding: 2rem; text-align: center; color: rgba(255,255,255,.4); font-size: .83rem; margin-top: 3rem; }

  footer a { color: rgba(255,255,255,.5); }



  @media (max-width: 768px) {

    .nav-links { display: none; }

    .featured-card { grid-template-columns: 1fr; }

    .featured-thumb { min-height: 180px; }

    .hero h1 { font-size: 2rem; }

    .modal { border-radius: 12px 12px 0 0; max-height: 92vh; align-self: flex-end; max-width: 100%; }

    .modal-overlay { align-items: flex-end; padding: 0; }

  }

  </style>

</head>

<body>



<!-- NAV -->

<nav class="nav">

  <div class="nav-brand">

    <div class="nav-logo">E</div>

    <span>EduTrackPro</span>

  </div>

  <div class="nav-links">

    <a href="index.php">Home</a>

    <a href="guide.php">User Guide</a> 

    <a href="video_guide.php" class="active">Video Tutorials</a>

    <a href="faq.php">FAQ</a>

  </div>

  <div class="nav-actions">

    <button class="theme-btn" id="themeToggle" title="Toggle theme"><i class="fas fa-moon"></i></button>

    <a href="login.php" class="btn btn-outline btn-sm">Login</a>

  </div>

</nav>



<!-- HERO -->

<div class="hero">

  <div class="hero-inner">

    <div class="hero-eyebrow"><i class="fas fa-play-circle"></i> Video Tutorials</div>

    <h1>Learn EduTrack<br><span>Step by Step</span></h1>

    <p>Screen-recorded walkthroughs of every module and feature — watch in under 20 minutes per topic.</p>

    <div class="hero-search">

      <i class="fas fa-search"></i>

      <input type="text" id="videoSearch" placeholder="Search tutorials (e.g. attendance, fees, AI agent...)" oninput="filterVideos(this.value)">

    </div>

    <div class="hero-stats">

      <span class="hero-stat"><i class="fas fa-play"></i> 28 Tutorial Videos</span>

      <span class="hero-stat"><i class="fas fa-tags"></i> 9 Categories</span>

      <span class="hero-stat"><i class="fas fa-clock"></i> Under 20 min each</span>

      <span class="hero-stat"><i class="fas fa-file-alt"></i> Recording script included</span>

    </div>

  </div>

</div>



<!-- MAIN -->

<div class="main">

  <div class="container">



    <!-- Category Tabs -->

    <div class="cat-tabs" id="catTabs">

      <button class="cat-btn active" data-cat="all" onclick="setCat('all',this)"><i class="fas fa-th-large"></i> All</button>

      <button class="cat-btn" data-cat="getting-started" onclick="setCat('getting-started',this)"><i class="fas fa-rocket"></i> Getting Started</button>

      <button class="cat-btn" data-cat="finance" onclick="setCat('finance',this)"><i class="fas fa-coins"></i> Finance</button>

      <button class="cat-btn" data-cat="students" onclick="setCat('students',this)"><i class="fas fa-user-graduate"></i> Students &amp; Staff</button>

      <button class="cat-btn" data-cat="academic" onclick="setCat('academic',this)"><i class="fas fa-book"></i> Academic</button>

      <button class="cat-btn" data-cat="ai" onclick="setCat('ai',this)"><i class="fas fa-robot"></i> AI &amp; Analytics</button>

      <button class="cat-btn" data-cat="canteen" onclick="setCat('canteen',this)"><i class="fas fa-utensils"></i> Canteen Module</button>

      <button class="cat-btn" data-cat="parents" onclick="setCat('parents',this)"><i class="fas fa-users"></i> Parent Portal</button>

      <button class="cat-btn" data-cat="communication" onclick="setCat('communication',this)"><i class="fas fa-comment-dots"></i> Communication</button>

      <button class="cat-btn" data-cat="admin" onclick="setCat('admin',this)"><i class="fas fa-cog"></i> Admin &amp; Settings</button>

    </div>



    <div id="noResults" class="no-results">

      <i class="fas fa-search" style="font-size:2rem;display:block;margin-bottom:.5rem"></i>

      No tutorials match your search. <a href="https://wa.me/233537793106" target="_blank">Ask us on WhatsApp</a>.

    </div>



    <!-- Featured Video -->

    <div class="featured-card video-card-outer" data-cat="getting-started" data-search="getting started complete overview setup walk-through full tour introduction">

      <div class="featured-thumb" onclick="openVideo('https://youtube.com/watch?v=placeholder','EduTrack Complete Overview — Getting Started in 25 Minutes')">

        <div class="big-play"><i class="fas fa-play"></i></div>

      </div>

      <div class="featured-info">

        <div class="featured-badge"><i class="fas fa-star"></i> Start Here</div>

        <h2>EduTrack Complete Overview — Getting Started in 25 Minutes</h2>

        <p>The complete first-look tour: logging in, navigating the system, setting up your school, adding your first students, recording a payment, and taking attendance — all in one video.</p>

        <div class="featured-meta">

          <span class="feat-meta-chip"><i class="fas fa-clock"></i> 25:00</span>

          <span class="feat-meta-chip"><i class="fas fa-signal"></i> Beginner</span>

          <span class="feat-meta-chip"><i class="fas fa-calendar"></i> Coming Soon</span>

        </div>

      </div>

    </div>



    <!-- Videos Grid -->

    <div class="video-grid" id="videoGrid">



      <?php

      $videos = [

        // GETTING STARTED

        ['cat'=>'getting-started','badge'=>'Beginner','badge_class'=>'','title'=>'Logging In &amp; Navigating EduTrack','desc'=>'How to log in with your credentials, navigate the sidebar, understand the dashboard, and change your password.','dur'=>'05:30','level'=>'Beginner','tags'=>['Login','Navigation','Dashboard'],'search'=>'login navigation dashboard profile password getting started'],

        ['cat'=>'getting-started','badge'=>'Beginner','badge_class'=>'','title'=>'System Setup — School Info, Year, SMS &amp; Payments','desc'=>'Configure your school name and logo, set the academic year and term, connect your Hubtel SMS API, and link your Paystack payment gateway.','dur'=>'12:40','level'=>'Beginner','tags'=>['Settings','SMS','Paystack','Hubtel'],'search'=>'settings setup school information academic year sms api paystack hubtel'],



        // STUDENTS & STAFF

        ['cat'=>'students','badge'=>'Core','badge_class'=>'','title'=>'Enrolling Students — Individual &amp; Bulk CSV Import','desc'=>'Add a student manually with photo and parent contacts, then import 200+ students at once using the CSV template.','dur'=>'14:20','level'=>'Beginner','tags'=>['Students','CSV Import','Enrollment'],'search'=>'students enroll add import csv bulk upload enrollment'],

        ['cat'=>'students','badge'=>'Core','badge_class'=>'','title'=>'Staff Management — Adding, Editing &amp; GES Fields','desc'=>'Add a new teacher with all GES-required fields (SSNIT, TIN, qualifications), upload their photo, and see how their login account is auto-created.','dur'=>'11:15','level'=>'Beginner','tags'=>['Staff','GES','HR'],'search'=>'staff teacher hr ges fields ssnit tin qualification'],

        ['cat'=>'students','badge'=>'Core','badge_class'=>'','title'=>'Classes, Subjects &amp; Timetable Setup','desc'=>'Create class groups for the academic year, add subjects with codes, assign class teachers, and build a weekly timetable with conflict detection.','dur'=>'09:50','level'=>'Beginner','tags'=>['Classes','Subjects','Timetable'],'search'=>'classes subjects timetable conflict detection schedule'],



        // FINANCE

        ['cat'=>'finance','badge'=>'Core','badge_class'=>'','title'=>'Setting Up Fee Structures','desc'=>'Create fee types (Tuition, Feeding, Exam Fee etc.), set amounts per class, and understand how multiple fee types per class work.','dur'=>'07:45','level'=>'Beginner','tags'=>['Fees','Fee Structures','Setup'],'search'=>'fees fee structure tuition feeding exam setup'],

        ['cat'=>'finance','badge'=>'Core','badge_class'=>'','title'=>'Recording Cash, MoMo &amp; Bank Payments','desc'=>'Record a cash payment, a Mobile Money payment with a reference, and a bank transfer — including how the auto-SMS confirmation is sent to the parent.','dur'=>'08:30','level'=>'Beginner','tags'=>['Payments','Cash','Mobile Money','SMS'],'search'=>'payments record cash mobile money momo bank transfer sms receipt'],

        ['cat'=>'finance','badge'=>'Growth','badge_class'=>'orange','title'=>'Online Payments — Parent-Side Walkthrough','desc'=>'See the full online payment flow from a parent\'s perspective: logging into the portal, selecting fees, paying with MoMo and card, and receiving confirmation.','dur'=>'10:00','level'=>'Intermediate','tags'=>['Online Payments','Paystack','MoMo','Parent'],'search'=>'online payments paystack hubtel momo card parent portal checkout'],

        ['cat'=>'finance','badge'=>'Core','badge_class'=>'','title'=>'Expenses Tracking &amp; Financial Reports','desc'=>'Add school expenses by category, then generate a fee collections report, an outstanding fees report, and a financial reconciliation report — export as PDF and CSV.','dur'=>'09:15','level'=>'Intermediate','tags'=>['Expenses','Reports','PDF','CSV'],'search'=>'expenses reports financial reconciliation outstanding fees collections export pdf csv'],

        ['cat'=>'finance','badge'=>'Canteen','badge_class'=>'purple','title'=>'Express Fee Collection with QR Scanning','desc'=>'Use the Express Collection scanner to process a feeding fee payment in under 3 seconds — scan the QR, tap the fee type, select Mobile Money, done.','dur'=>'06:20','level'=>'Intermediate','tags'=>['Express Collection','QR','Canteen','Fees'],'search'=>'express collection qr scan fees canteen fast payment cashier'],



        // ACADEMIC

        ['cat'=>'academic','badge'=>'Core','badge_class'=>'','title'=>'Taking Attendance &amp; Sending Absentee SMS','desc'=>'Take the daily register for a class using Quick Fill, mark late and excused students, then send automatic SMS alerts to absent students\' parents.','dur'=>'07:00','level'=>'Beginner','tags'=>['Attendance','SMS','Register'],'search'=>'attendance register daily sms alert absent present late excused'],

        ['cat'=>'academic','badge'=>'Growth','badge_class'=>'orange','title'=>'Entering Exam Scores &amp; Generating Report Cards','desc'=>'Enter class scores and exam scores for a subject, understand GES grading and class positions, then batch-download all report cards as PDF for printing.','dur'=>'13:30','level'=>'Intermediate','tags'=>['Reports','Scores','Grades','PDF'],'search'=>'report cards terminal reports scores grades ges positions pdf batch download'],

        ['cat'=>'academic','badge'=>'Growth','badge_class'=>'orange','title'=>'AI Exam Question Generator — PDF to Questions','desc'=>'Upload a textbook chapter PDF and generate 30 MCQ + essay questions in under 60 seconds. Review, edit, save to the question bank, and print.','dur'=>'08:45','level'=>'Intermediate','tags'=>['AI','Exams','Questions','PDF'],'search'=>'ai exam generator questions pdf upload generate mcq essay'],



        // AI & ANALYTICS

        ['cat'=>'ai','badge'=>'Premium','badge_class'=>'purple','title'=>'RBC AI Agent — Controlling EduTrack with Plain English','desc'=>'Walkthrough of the AI Agent: sending fee reminders to a class, querying outstanding balances, generating bulk canteen entitlements, and drafting parent letters.','dur'=>'16:00','level'=>'Advanced','tags'=>['AI Agent','Automation','Premium'],'search'=>'ai agent rbc plain english commands automation fee reminders sms bulk'],

        ['cat'=>'ai','badge'=>'Premium','badge_class'=>'purple','title'=>'AI Analytics Dashboard &amp; Revenue Forecasting','desc'=>'Tour of the AI Analytics module: collection trend charts, attendance pattern analysis, revenue forecasting, and how to configure scheduled weekly AI reports.','dur'=>'12:20','level'=>'Advanced','tags'=>['AI Analytics','Forecasting','Reports','Premium'],'search'=>'ai analytics revenue forecasting dashboard charts scheduled reports'],

        ['cat'=>'ai','badge'=>'Premium','badge_class'=>'purple','title'=>'At-Risk Student Detection — Early Intervention','desc'=>'How the at-risk detection model works, how to view flagged students, interpret their risk score and trend data, and send immediate alerts to parents.','dur'=>'09:00','level'=>'Advanced','tags'=>['At-Risk','AI','Students','Premium'],'search'=>'at risk detection flagged students attendance score trend intervention alert'],



        // CANTEEN MODULE

        ['cat'=>'canteen','badge'=>'Canteen','badge_class'=>'purple','title'=>'Canteen Module Setup — First-Time Configuration','desc'=>'Activate the Canteen Module, run through the onboarding wizard, create your first meal sessions, generate student Identity QR tokens, and set the scanner PIN.','dur'=>'14:00','level'=>'Intermediate','tags'=>['Canteen','Setup','QR','Sessions'],'search'=>'canteen module setup first time onboarding wizard sessions qr tokens pin'],

        ['cat'=>'canteen','badge'=>'Canteen','badge_class'=>'purple','title'=>'Canteen Scanner — Full Session Walkthrough','desc'=>'Log in to the scanner with a PIN, scan a student\'s Session Pass QR, see success and error states (already confirmed, expired, invalid), and use the 5-digit ID fallback.','dur'=>'08:00','level'=>'Intermediate','tags'=>['Canteen Scanner','QR','Sessions'],'search'=>'canteen scanner qr session pass confirm meal validate phone pin fallback'],

        ['cat'=>'canteen','badge'=>'Canteen','badge_class'=>'purple','title'=>'Cook\'s Dashboard — Live Meal Monitoring','desc'=>'Access the Cook\'s Dashboard with a 4-digit PIN, understand the confirmed/expected numbers, per-class colour-coded table, and arrival rate charts.','dur'=>'05:30','level'=>'Beginner','tags'=>['Cook Dashboard','Canteen'],'search'=>'cook dashboard canteen meals confirmed expected class arrival rate pin'],

        ['cat'=>'canteen','badge'=>'Canteen','badge_class'=>'purple','title'=>'Canteen Offline Mode &amp; Sync','desc'=>'Disconnect internet mid-session to demonstrate offline scanning, see the OFFLINE MODE badge, view confirmations in IndexedDB, then reconnect and watch auto-sync.','dur'=>'07:15','level'=>'Advanced','tags'=>['Canteen','Offline','Sync'],'search'=>'canteen offline mode sync indexeddb reconnect service worker'],



        // PARENT PORTAL

        ['cat'=>'parents','badge'=>'Growth','badge_class'=>'orange','title'=>'Parent Portal — Full Parent Walkthrough','desc'=>'Show the portal from a parent\'s perspective: logging in, viewing fee balances, paying a fee online with MTN MoMo, checking attendance, and viewing results.','dur'=>'11:00','level'=>'Beginner','tags'=>['Parent Portal','Fees','Online Payment','Attendance'],'search'=>'parent portal login fees online payment attendance results timetable'],

        ['cat'=>'parents','badge'=>'Growth','badge_class'=>'orange','title'=>'Installing the Parent Portal PWA (Android &amp; iPhone)','desc'=>'Add the Parent Portal to the home screen on Android Chrome and iPhone Safari, then demonstrate offline access to the fee balance and Canteen QR codes.','dur'=>'04:30','level'=>'Beginner','tags'=>['PWA','Offline','Parent','Install'],'search'=>'pwa progressive web app install android iphone offline home screen'],

        ['cat'=>'parents','badge'=>'Canteen','badge_class'=>'purple','title'=>'Canteen QR Codes in the Parent Portal','desc'=>'Show both QR cards in the parent portal: the permanent Identity QR (for the fee desk) and the daily Session Pass QR (for the canteen window) with its expiry countdown.','dur'=>'05:45','level'=>'Beginner','tags'=>['Parent Portal','QR','Canteen'],'search'=>'parent portal qr canteen session pass identity fee desk countdown expiry'],



        // COMMUNICATION

        ['cat'=>'communication','badge'=>'Core','badge_class'=>'','title'=>'Sending Bulk SMS Alerts to Parents','desc'=>'Send a fee reminder SMS to all outstanding fee holders in a class, an event announcement to all parents, and a custom message — with live delivery tracking.','dur'=>'07:30','level'=>'Beginner','tags'=>['SMS','Alerts','Communication','Bulk'],'search'=>'sms alerts bulk parents communication announcement fee reminder event'],

        ['cat'=>'communication','badge'=>'Core','badge_class'=>'','title'=>'Staff Announcements &amp; Internal Messaging','desc'=>'Post a school-wide announcement, send a private internal message to a staff member, and manage the inbox with read/unread indicators.','dur'=>'06:00','level'=>'Beginner','tags'=>['Announcements','Messaging','Staff'],'search'=>'announcements messages staff internal inbox communication'],



        // ADMIN

        ['cat'=>'admin','badge'=>'Core','badge_class'=>'','title'=>'User Accounts &amp; Role Management','desc'=>'Create a new cashier account, assign the correct role, demonstrate what the cashier sees vs. what the admin sees, reset a password, and deactivate a user.','dur'=>'08:45','level'=>'Beginner','tags'=>['User Management','Roles','Access Control'],'search'=>'user accounts roles permissions admin cashier teacher headteacher management'],

        ['cat'=>'admin','badge'=>'Core','badge_class'=>'','title'=>'Linking Parent Accounts &amp; Creating Login Credentials','desc'=>'Create parent accounts for multiple children, set temporary passwords, demonstrate the parent\'s first login, and show how to reset a parent\'s password.','dur'=>'07:20','level'=>'Beginner','tags'=>['Parent Accounts','Credentials','Setup'],'search'=>'parent accounts linking credentials login password setup phone number'],

        ['cat'=>'admin','badge'=>'Core','badge_class'=>'','title'=>'Discount Coupons — Scholarships &amp; Fee Discounts','desc'=>'Create a percentage scholarship coupon, a fixed-amount staff-child discount code, set usage limits, and demonstrate applying a coupon during payment recording.','dur'=>'06:45','level'=>'Intermediate','tags'=>['Coupons','Discounts','Scholarships'],'search'=>'coupons discounts scholarship staff fee reduction percentage fixed usage'],

      ];



      foreach ($videos as $v): ?>

      <div class="video-card" data-cat="<?= $v['cat'] ?>" data-search="<?= htmlspecialchars($v['search']) ?>"

           onclick="openVideo('https://youtube.com/watch?v=placeholder_<?= urlencode($v['title']) ?>','<?= htmlspecialchars($v['title']) ?>')">

        <div class="video-thumb">

          <div class="thumb-bg" style="background:linear-gradient(135deg,#0b2b3f,#1b5c6b)"></div>

          <div class="video-badge <?= $v['badge_class'] ?>"><?= $v['badge'] ?></div>

          <div class="play-btn"><i class="fas fa-play"></i></div>

          <div class="video-duration"><?= $v['dur'] ?></div>

        </div>

        <div class="video-info">

          <h3><?= $v['title'] ?></h3>

          <p><?= $v['desc'] ?></p>

          <div class="video-tags">

            <?php foreach ($v['tags'] as $tag): ?>

            <span class="video-tag"><?= $tag ?></span>

            <?php endforeach; ?>

            <span class="video-tag"><i class="fas fa-signal" style="font-size:.65rem;margin-right:2px"></i> <?= $v['level'] ?></span>

          </div>

        </div>

      </div>

      <?php endforeach; ?>



    </div>



    <!-- Coming Soon -->

    <div class="coming-soon">

      <i class="fas fa-video"></i>

      <h3>More Tutorials Coming Soon</h3>

      <p>We are constantly creating new screen-recorded walkthroughs. Subscribe to our YouTube channel to be notified when new videos drop.</p>

      <div style="display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap">

        <a href="https://wa.me/233537793106?text=I+want+to+be+notified+about+new+EduTrack+tutorial+videos" target="_blank" class="btn btn-primary"><i class="fab fa-whatsapp"></i> Notify Me</a>

        <a href="guide.php" class="btn btn-outline"><i class="fas fa-book"></i> Read Written Guide</a>

      </div>

    </div>



  </div>

</div>



<!-- Floating Script Button -->

<?php if(isset($_GET['series'])){?>

<button class="script-fab" onclick="document.getElementById('scriptModal').classList.add('open')">

  <i class="fas fa-film"></i> Recording Script

</button>

<?php } ?>



<!-- Video Modal -->

<div class="modal-overlay" id="videoModal" onclick="if(event.target===this)closeVideo()">

  <div class="modal" style="max-width:640px" onclick="event.stopPropagation()">

    <div class="modal-header">

      <h2 id="videoModalTitle">Video Tutorial</h2>

      <button class="modal-close" onclick="closeVideo()"><i class="fas fa-times"></i></button>

    </div>

    <div class="modal-body" style="padding:0">

      <div style="background:#000;display:flex;align-items:center;justify-content:center;min-height:320px;border-radius:0 0 16px 16px;position:relative">

        <div style="text-align:center;color:white;padding:2rem">

          <i class="fas fa-play-circle" style="font-size:3rem;opacity:.5;display:block;margin-bottom:1rem"></i>

          <p style="opacity:.6;font-size:.9rem">Video will play here when uploaded to YouTube.<br>Subscribe to our channel for updates.</p>

          <a href="https://wa.me/233537793106?text=Hi%2C+request+for+EduTrack+video+tutorial" target="_blank" class="btn btn-primary" style="margin-top:1rem"><i class="fab fa-whatsapp"></i> Request This Video</a>

        </div>

      </div>

    </div>

  </div>

</div>



<!-- Script Modal -->

<div class="modal-overlay" id="scriptModal" onclick="if(event.target===this)this.classList.remove('open')">

  <div class="modal" onclick="event.stopPropagation()">

    <div class="modal-header">

      <h2><i class="fas fa-film" style="color:var(--orange);margin-right:8px"></i> Video Recording Script — EduTrack Tutorials</h2>

      <button class="modal-close" onclick="document.getElementById('scriptModal').classList.remove('open')"><i class="fas fa-times"></i></button>

    </div>

    <div class="modal-body">



      <p style="font-size:.88rem;color:var(--slate);margin-bottom:1.5rem;padding:1rem;background:var(--lgrey);border-radius:8px;line-height:1.7">

        <strong style="color:var(--navy)">How to use this script:</strong> Each section below is one video. For each step, <em style="color:#1f846b">italic green text</em> is what to <strong>say aloud</strong>, and <em style="color:#1a5d9c">italic blue text</em> is what to <strong>show on screen</strong>. Record your screen at 1080p, use a clear microphone, and keep each video under 20 minutes. Edit out any mistakes before uploading.

      </p>



      <!-- MODULE 1: Getting Started -->

      <div class="script-module">

        <div class="script-module-title"><span class="module-num">1</span> Getting Started</div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 1: Logging In &amp; Navigating EduTrack <span class="duration-badge">~5:30</span></h4>

          <div class="script-step"><span class="step-label">INTRO (0:00)</span><span class="step-text step-say">"Welcome to EduTrack. In this video I'll show you how to log in for the first time, understand your dashboard, and find your way around the system."</span></div>

          <div class="script-step"><span class="step-label">SHOW (0:15)</span><span class="step-text step-show">Navigate to the EduTrack login page. Type "admin" in the username field and the password. Click Log In.</span></div>

          <div class="script-step"><span class="step-label">SAY (0:30)</span><span class="step-text step-say">"This is the EduTrack dashboard — your school's live command centre. The three numbers at the top show total fees collected this term, outstanding fees, and total expenses. These update in real time every time a payment is recorded."</span></div>

          <div class="script-step"><span class="step-label">SHOW (0:50)</span><span class="step-text step-show">Point to each dashboard card: Collected, Outstanding, Expenses. Click on the student count card. Navigate to Students list.</span></div>

          <div class="script-step"><span class="step-label">SAY (1:10)</span><span class="step-text step-say">"The left sidebar is your main menu. Notice that it only shows the modules your role can access. If you're a teacher, you'll see attendance and exams. If you're a cashier, you'll see fees and payments. An admin sees everything."</span></div>

          <div class="script-step"><span class="step-label">SHOW (1:30)</span><span class="step-text step-show">Hover over different sidebar items. Show the collapse/expand on mobile by resizing the browser window.</span></div>

          <div class="script-step"><span class="step-label">SAY (1:55)</span><span class="step-text step-say">"Let me show you how to change your password. Click your name in the top-right corner, then My Profile."</span></div>

          <div class="script-step"><span class="step-label">SHOW (2:05)</span><span class="step-text step-show">Click username dropdown → My Profile → Change Password tab. Type current password, new password, confirm. Click Change Password. Show success message.</span></div>

          <div class="script-step"><span class="step-label">SAY (3:30)</span><span class="step-text step-say">"And that's it for navigation. In the next video we'll set up the school information, SMS, and payment gateways."</span></div>

        </div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 2: System Setup — School Info, Year, SMS &amp; Payments <span class="duration-badge">~12:40</span></h4>

          <div class="script-step"><span class="step-label">INTRO (0:00)</span><span class="step-text step-say">"In this video I'll configure all the essential settings — school name, logo, academic year, SMS API, and the payment gateways so parents can pay online."</span></div>

          <div class="script-step"><span class="step-label">SHOW (0:20)</span><span class="step-text step-show">Click Settings in the sidebar. Click the School Information tab.</span></div>

          <div class="script-step"><span class="step-label">SAY (0:25)</span><span class="step-text step-say">"Here I'll type the school's name, address, phone number, and email. Then I'll upload the school logo — it should be a square image, ideally on a white background, and no more than 2 megabytes."</span></div>

          <div class="script-step"><span class="step-label">SHOW (0:40)</span><span class="step-text step-show">Fill in school name, address, phone, email. Click Choose File, select a logo PNG. Click Save Settings. Show logo updating in the top bar.</span></div>

          <div class="script-step"><span class="step-label">SAY (1:30)</span><span class="step-text step-say">"Now the Academic Settings tab. This is very important — the Current Academic Year controls which fees, classes, and records appear throughout the system. Set it correctly before doing anything else."</span></div>

          <div class="script-step"><span class="step-label">SHOW (1:45)</span><span class="step-text step-show">Click Academic Settings tab. Set year to "2024-2025", term to "Term 1". Save.</span></div>

          <div class="script-step"><span class="step-label">SAY (2:30)</span><span class="step-text step-say">"Now SMS settings. EduTrack uses Hubtel for SMS. You'll need your Hubtel Client ID, Client Secret, and a Sender Name — that's the name that appears on the parent's phone when they receive a text."</span></div>

          <div class="script-step"><span class="step-label">SHOW (2:45)</span><span class="step-text step-show">Click SMS Settings tab. Enter Hubtel credentials (use demo values). Set Sender Name to school name. Save. Show the test SMS option.</span></div>

          <div class="script-step"><span class="step-label">SAY (4:00)</span><span class="step-text step-say">"For online payments, click Payment Gateways. Enter your Paystack public key and secret key. If you're using Hubtel for MoMo, enter those credentials too."</span></div>

          <div class="script-step"><span class="step-label">SHOW (4:15)</span><span class="step-text step-show">Enter Paystack keys. Then click Online Payment Settlement card. Select bank from dropdown, enter account number, click Verify Account. Show account name auto-filling. Save.</span></div>

          <div class="script-step"><span class="step-label">SAY (6:30)</span><span class="step-text step-say">"Once your bank account is verified, every online payment will be automatically settled into that account. No manual bank transfers needed."</span></div>

          <div class="script-step"><span class="step-label">OUTRO (12:00)</span><span class="step-text step-say">"Your school is now configured. In the next video we'll add your students."</span></div>

        </div>

      </div>



      <!-- MODULE 2: Finance -->

      <div class="script-module">

        <div class="script-module-title"><span class="module-num">2</span> Finance — Fees, Payments &amp; Reports</div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 3: Setting Up Fee Structures <span class="duration-badge">~7:45</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"Before you can record any payments, you need to create fee structures — these tell the system how much each class owes for each fee type."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to Fees → Add Fee Structure. Select "Basic 1" class. Select fee type "Tuition Fee". Enter amount 800. Set due date. Save. Repeat for "Feeding Fee" 250 for same class.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Notice I created two separate fee structures for the same class — one for tuition and one for feeding. You can have as many fee types as your school needs. Each is tracked separately, and parents see each one clearly in the portal."</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Important: if you have the Canteen Module, any fee type with 'feeding' or 'canteen' in the name will automatically generate a canteen session pass when paid. So name your feeding fee correctly."</span></div>

        </div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 4: Recording Cash, MoMo &amp; Bank Payments <span class="duration-badge">~8:30</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"This is the most common daily task for a cashier — recording fee payments. I'll show cash, Mobile Money, and bank transfer."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to Fees → Record Payment. Select student "Ama Asante". Select fee type "Tuition Fee". Amount 800. Method: Cash. Date: today. Click Record Payment. Show confirmation + SMS sent notice.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"See the confirmation — it says 'SMS confirmation sent.' The parent just received a text on their phone saying we received GHS 800 for tuition for Ama Asante."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Record a second payment: same student, Feeding Fee, 250, Mobile Money, enter MoMo reference number. Record. Show parent portal updating to show partial payment cleared.</span></div>

        </div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 5: Express Fee Collection with QR Scanning <span class="duration-badge">~6:20</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"Express Collection is a game-changer for schools with canteens. Instead of searching for a student, we scan their QR code and the whole thing takes 3 seconds."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">On a mobile phone, open Express Collection. Camera viewfinder appears. Hold up a printed student QR code or show it on another phone's screen from the parent portal. Watch it scan instantly.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"The student's photo, name, class, and outstanding fees loaded immediately. Notice the feeding fee is highlighted in green at the top — that's intentional, because during canteen time that's the one we're collecting."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Tap the feeding fee button. Select Mobile Money → MTN MoMo. Tap Record Payment. 2-second green confirmation screen. Auto-resets to scanner view.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Done — full cycle from scan to confirmation in under 10 seconds. Compare that to the 45 seconds it takes the traditional way."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Demonstrate the 5-digit ID fallback below the camera — type a student ID number manually.</span></div>

        </div>

      </div>



      <!-- MODULE 3: Academic -->

      <div class="script-module">

        <div class="script-module-title"><span class="module-num">3</span> Academic — Attendance, Reports &amp; Exams</div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 6: Taking Attendance &amp; Sending Absentee SMS <span class="duration-badge">~7:00</span></h4>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to Attendance → Take Register. Select class "Basic 4". Click Load. Full class list appears.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"First I'll click All Present — that marks every student green. Then I only need to change the few who are absent or late, which is usually much faster."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Click All Present. Mark 2 students as Absent (red), 1 as Late (orange). Add a note "Not feeling well" to one absent student. Click Save Register.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Now I'll send SMS alerts to the parents of the absent students. Click SMS Absentees tab."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Click SMS Absentees tab. Select class and today's date. Show the 2 absent students listed. Click Send SMS. Show confirmation: "2 SMS messages sent."</span></div>

        </div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 7: Generating Report Cards (Growth/Premium) <span class="duration-badge">~13:30</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"This is one of the features schools love most — automated GES-standard report cards. I enter scores once and the system calculates grades, positions, and formats everything for printing."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to Terminal Reports. Select class "JHS 1", subject "Mathematics", Term 1. Enter class scores and exam scores for 5 students. Show auto-calculation of total, grade, position.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"See how the grade and position update automatically as I type. The system uses the GES A1 to F9 grading scale. For JHS the default is 30% class score and 70% exam score — you can adjust this in Settings."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Repeat for 2 more subjects. Then click Generate Report Cards. Show preview of a report card PDF with school logo, student photo, all subjects, position, teacher remarks field.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"The report card includes your school logo, the student's photo, all subjects with scores and grades, their class position, and space for teacher and headteacher remarks."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Click Download PDF (All Students). Show a multi-page PDF opening with all student report cards ready to print.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"One click — the entire class's report cards as a print-ready PDF. No more formatting in Word. No more spending 2 weeks on report cards."</span></div>

        </div>

      </div>



      <!-- MODULE 4: AI -->

      <div class="script-module">

        <div class="script-module-title"><span class="module-num">4</span> AI &amp; Analytics (Premium)</div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 8: RBC AI Agent Walkthrough <span class="duration-badge">~16:00</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"This is EduTrack's most powerful feature — the RBC AI Agent. Instead of navigating menus, you just type what you want done in plain English and the AI does it."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to AI Agent. Type: "How many students in JHS 2 have not paid tuition fees?" Press Enter. Wait for AI response.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"The AI queried the database and returned a list of students with their outstanding amounts. Now let me try an action."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Type: "Send fee reminders to all parents in JHS 3 with outstanding balances." Show AI confirmation prompt: "I will send X SMS messages. Confirm?" Type "yes".</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Notice it always asks for confirmation before sending any SMS or making changes. Once I confirm, it sends all the reminders instantly."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Type: "Generate 15 MCQ questions for Science, Basic 5, medium difficulty." Show AI generating questions. Review questions on screen.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"15 science questions generated in about 30 seconds. I can review them, edit any I don't like, and save them to the question bank."</span></div>

        </div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 9: At-Risk Student Detection <span class="duration-badge">~9:00</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"At-Risk Detection monitors every student's attendance and score trends continuously. When the system detects a pattern that suggests a student may struggle in exams, it flags them — typically 3 to 4 weeks before exams, giving you time to act."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to AI Analytics → At-Risk Detection tab. Show the list of flagged students with risk scores. Click on one student. Show their attendance trend chart and score decline graph.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"This student has missed 28% of classes this term, and their average score dropped from 72 to 54 over the last 3 assessments. The system flagged them as high risk. I can now send an immediate alert to the parent."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Click Send Alert to Parent. Show the pre-drafted SMS message. Edit it slightly. Send.</span></div>

        </div>

      </div>



      <!-- MODULE 5: Canteen -->

      <div class="script-module">

        <div class="script-module-title"><span class="module-num">5</span> Canteen Module</div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 10: Canteen Module — First-Time Setup <span class="duration-badge">~14:00</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"The Canteen Module eliminates both morning queues — the fee desk queue and the canteen window queue. Setup takes about 15 minutes."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to Canteen menu (visible in sidebar). Click Setup. Onboarding wizard appears. Walk through each step.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Step 1 of the wizard just explains what the module does. Step 2 is where we create our first meal sessions."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">In Meal Sessions step: toggle Breakfast on, set price 5, toggle Lunch on, set price 8. Select all classes. Click Quick Setup button.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"The Quick Setup button creates today's breakfast and lunch sessions for all enrolled classes in one click. Behind the scenes it's generating session pass QR tokens for every student in those classes who has an active feeding fee payment."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to Canteen → Settings → Student ID Cards tab. Click Generate Missing Identity QR Tokens. Show progress counter. Show a student's profile — identity_qr_token now populated.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Identity QR tokens are permanent — once generated, they never change. Every student has one that lives in their parent portal and on their printed ID card."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to Canteen → Settings → General tab. Set Scanner PIN to 1234. Set Cook Dashboard PIN to 5678. Save.</span></div>

        </div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 11: Canteen Scanner — Full Session Demo <span class="duration-badge">~8:00</span></h4>

          <div class="script-step"><span class="step-label">SETUP</span><span class="step-text step-say">"I'm going to show this on a phone — that's how it works in practice, with the phone at the canteen window."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">On a phone, navigate to canteen/scanner.php. PIN entry screen appears. Enter 1234. Scanner opens with camera viewfinder and session name in header.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"The scanner shows the session name, confirmed count, and total enrolled at the top. The camera is always live — no tap needed to start scanning."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Hold up a valid Session Pass QR (from parent portal). Scanner beeps. White overlay flashes: student photo, name, class, green ✓ CONFIRMED. Auto-dismisses after 3 seconds.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Scan the same QR again."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Scan same QR. Amber overlay: "Already confirmed at 8:34 AM". Auto-dismisses in 2 seconds. Scanner ready again.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Try scanning the permanent Identity QR — the one for the fee desk."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Scan Identity QR. Red overlay: "Invalid canteen pass". The two types are completely separate.</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Turn off phone wifi/data. Try scanning another student. Show OFFLINE MODE badge in header. Confirm success. Reconnect. Show sync happening automatically.</span></div>

        </div>

      </div>



      <!-- MODULE 6: Parent Portal -->

      <div class="script-module">

        <div class="script-module-title"><span class="module-num">6</span> Parent Portal</div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 12: Parent Portal Full Walkthrough <span class="duration-badge">~11:00</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"This is what a parent sees when they log into EduTrack. I'll do this on a phone because that's how most parents access it."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">On a phone browser, navigate to parent-portal URL. Log in with phone number 0594453744 and password 123456.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"The dashboard shows a summary for each child — their class, outstanding fees, and a quick attendance overview. If I have two children enrolled, I tap the dropdown at the top to switch between them."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Tap Fees in menu. Show fee breakdown table. Find a fee with Unpaid status. Tap Pay Online. Select fees, choose MTN MoMo, enter name and phone, tap Proceed to Payment.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"The parent completes payment on Paystack or Hubtel's secure checkout. After payment, they're returned here and the fee updates instantly."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Show Attendance tab — colour-coded calendar. Show Results tab with subject scores and grades. Show Timetable tab.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Everything a parent needs is here — fees, attendance, results, timetable — all in one place on their phone."</span></div>

        </div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 13: Installing the PWA on Android &amp; iPhone <span class="duration-badge">~4:30</span></h4>

          <div class="script-step"><span class="step-label">ANDROID</span><span class="step-text step-say">"On Android with Chrome, open the parent portal. Tap the three-dot menu — Add to Home screen — Add. The EduTrack icon now appears on the home screen just like any other app."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Do the install flow on Android. Go to home screen. Tap EduTrack icon. App opens instantly — no browser bar, full screen, no loading delay.</span></div>

          <div class="script-step"><span class="step-label">IPHONE</span><span class="step-text step-say">"On iPhone with Safari, open the portal. Tap the Share button at the bottom. Scroll down to Add to Home Screen. Tap Add."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Do the install flow on iPhone. Demonstrate opening installed app. Turn off wifi — show app still loads with cached data. Navigate to Fees — shows last synced balance.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Even without internet, parents can see their child's fee balance, attendance summary, and their Canteen QR codes. The app syncs automatically when connectivity is restored."</span></div>

        </div>

      </div>



      <!-- MODULE 7: Communication -->

      <div class="script-module">

        <div class="script-module-title"><span class="module-num">7</span> Communication &amp; SMS</div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 14: Sending Bulk SMS Alerts to Parents <span class="duration-badge">~7:30</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"EduTrack can send SMS messages to individual parents, an entire class, or all parents at once. I'll show all three."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to Alerts → Alert Type: Fee Reminder. Who to send to: Entire Class → JHS 3. Message auto-populates. Edit to add school name. Click Send Alert. Show delivery report: X messages sent.</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Alert Type: Custom Message. Who: All Students. Type a message about school closing early. Use {student_name} placeholder. Send. Show message preview with placeholder replaced.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"Using the {student_name} placeholder personalises every message — each parent receives the message with their child's name filled in, not a generic broadcast."</span></div>

        </div>

      </div>



      <!-- MODULE 8: Admin -->

      <div class="script-module">

        <div class="script-module-title"><span class="module-num">8</span> Administration &amp; User Management</div>



        <div class="script-video">

          <h4><i class="fas fa-play-circle" style="color:var(--teal)"></i> Video 15: Creating User Accounts &amp; Roles <span class="duration-badge">~8:45</span></h4>

          <div class="script-step"><span class="step-label">INTRO</span><span class="step-text step-say">"User accounts control who can log in and what they can see. A cashier only sees fees. A teacher only sees attendance and their class. An admin sees everything. I'll create a cashier account now."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Go to User Management → Add New User. Fill in: Username: mary.sarpong, Password: temp1234, Full Name: Mary Sarpong, Email: mary@school.com, Role: Cashier. Click Add User.</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Log out. Log back in as mary.sarpong. Show restricted sidebar — only Fees, Expenses, Reports, Dashboard visible. No Students management, no Settings, no AI.</span></div>

          <div class="script-step"><span class="step-label">SAY</span><span class="step-text step-say">"This is exactly what the cashier sees. They can record payments and view reports but cannot access student records, staff information, or system settings — protecting sensitive data."</span></div>

          <div class="script-step"><span class="step-label">SHOW</span><span class="step-text step-show">Log back in as admin. Go to User Management. Click Edit on Mary's account. Change password. Click Save.</span></div>

        </div>

      </div>



      <div style="text-align:center;padding:1.5rem;background:var(--lgrey);border-radius:10px;margin-top:1rem">

        <p style="font-size:.88rem;color:var(--slate);margin-bottom:1rem">This script covers 15 of the 28 planned tutorial videos. Additional scripts for Reports, Data Import, Biometrics, and Advanced AI features will be added as those videos are produced.</p>

        <a href="https://wa.me/233537793106?text=Hi%2C+I+need+the+full+video+recording+script+for+EduTrack" target="_blank" class="btn btn-primary btn-sm"><i class="fab fa-whatsapp"></i> Request Full Script</a>

      </div>



    </div><!-- /modal-body -->

  </div><!-- /modal -->

</div><!-- /modal-overlay -->



<footer>

  <p>© 2025 Oric Network Limited · EduTrackPro School Management System · Kwabenya, Accra, Ghana</p>

  <p style="margin-top:.4rem"><a href="https://wa.me/233537793106">+233 537 793 106</a> · <a href="mailto:info@oricnetwork.com">info@oricnetwork.com</a></p>

</footer>



<script>

// Theme

const themeToggle = document.getElementById('themeToggle');

const savedTheme = localStorage.getItem('et_theme') || 'light';

document.documentElement.setAttribute('data-theme', savedTheme);

updateThemeIcon(savedTheme);

themeToggle.addEventListener('click', () => {

  const cur = document.documentElement.getAttribute('data-theme');

  const next = cur === 'light' ? 'dark' : 'light';

  document.documentElement.setAttribute('data-theme', next);

  localStorage.setItem('et_theme', next);

  updateThemeIcon(next);

});

function updateThemeIcon(t) {

  themeToggle.querySelector('i').className = t === 'light' ? 'fas fa-moon' : 'fas fa-sun';

}



// Category filtering

function setCat(cat, btn) {

  document.getElementById('videoSearch').value = '';

  document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));

  btn.classList.add('active');

  const cards = document.querySelectorAll('.video-card, .video-card-outer');

  let found = 0;

  cards.forEach(c => {

    const show = cat === 'all' || c.dataset.cat === cat;

    c.style.display = show ? '' : 'none';

    if (show) found++;

  });

  document.getElementById('noResults').style.display = found === 0 ? 'block' : 'none';

}



// Search

function filterVideos(q) {

  q = q.trim().toLowerCase();

  const cards = document.querySelectorAll('.video-card, .video-card-outer');

  let found = 0;

  cards.forEach(c => {

    if (!q) { c.style.display = ''; found++; return; }

    const text = (c.dataset.search || '') + ' ' + c.textContent.toLowerCase();

    const show = text.includes(q);

    c.style.display = show ? '' : 'none';

    if (show) found++;

  });

  document.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active'));

  if (!q) document.querySelector('.cat-btn[data-cat="all"]').classList.add('active');

  document.getElementById('noResults').style.display = (q && found === 0) ? 'block' : 'none';

}



// Video modal

function openVideo(url, title) {

  document.getElementById('videoModalTitle').textContent = title;

  document.getElementById('videoModal').classList.add('open');

}

function closeVideo() {

  document.getElementById('videoModal').classList.remove('open');

}

document.addEventListener('keydown', e => {

  if (e.key === 'Escape') {

    closeVideo();

    document.getElementById('scriptModal').classList.remove('open');

  }

});

</script>



</body>

</html>

