<?php

declare(strict_types=1);

if (!headers_sent() && extension_loaded('zlib') && !ini_get('zlib.output_compression')) {
    ob_start('ob_gzhandler');
}

session_start();
require_once __DIR__ . '/config/db.php';
require_once __DIR__ . '/config/usage_analytics.php';
require_once __DIR__ . '/super_admin/global_settings_helper.php';
require_once __DIR__ . '/includes/output_hardening.php';
require_once __DIR__ . '/includes/demo_seed_helper.php';
require_once __DIR__ . '/includes/demo_magic_link_helper.php';
startHtmlOutputHardening();

$loggedIn = isset($_SESSION['auth']) && is_array($_SESSION['auth']);
$role = strtolower((string) ($_SESSION['auth']['role'] ?? ''));
$schoolUser = trim((string) ($_SESSION['auth']['school_user'] ?? ''));

function homeDashboardUrl(string $role, string $schoolUser): string
{
    if ($role === 'super_admin') {
        return 'super_admin/dashboard.php';
    }
    if ($role === 'admin') {
        return 'school_admin/dashboard.php' . ($schoolUser !== '' ? ('?school_user=' . urlencode($schoolUser)) : '');
    }
    if ($role === 'teacher') {
        return 'teacher/dashboard.php';
    }
    if ($role === 'student') {
        return 'student/dashboard.php';
    }
    if ($role === 'parent') {
        return 'student/parent_communication.php';
    }

    return 'school_admin/dashboard.php';
}

function e(string $value): string
{
    return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
}

function landingNormalizeUsernameBase(string $value): string
{
    $base = strtolower(trim($value));
    $base = preg_replace('/[^a-z0-9_]+/', '_', $base) ?? '';
    $base = trim($base, '_');
    if ($base === '') {
        $base = 'demo_school';
    }
    return substr($base, 0, 24);
}

function landingSchoolUsernameExists(PDO $pdo, string $username): bool
{
    foreach ($pdo->query("SELECT payload_json FROM app_records WHERE item_type = 'school'") as $row) {
        $payload = json_decode((string) ($row['payload_json'] ?? ''), true);
        if (!is_array($payload)) {
            continue;
        }
        foreach ([
            $payload['admin_account']['username'] ?? '',
            $payload['school_user'] ?? '',
            $payload['username'] ?? '',
        ] as $candidate) {
            if (strcasecmp(trim((string) $candidate), $username) === 0) {
                return true;
            }
        }
    }

    return false;
}

function landingBuildDemoUsername(PDO $pdo, string $schoolName): string
{
    $base = landingNormalizeUsernameBase($schoolName);
    $candidate = $base;
    for ($i = 0; $i < 20; $i++) {
        if ($i > 0) {
            $candidate = substr($base, 0, 20) . '_' . random_int(100, 9999);
        }
        if (!landingSchoolUsernameExists($pdo, $candidate)) {
            return $candidate;
        }
    }

    return 'demo_' . strtolower(bin2hex(random_bytes(4)));
}

function landingSettingsCacheFile(): string
{
    return __DIR__ . '/config/landing_settings_cache.json';
}

function readLandingSettingsCache(): ?array
{
    $file = landingSettingsCacheFile();
    if (!is_file($file) || !is_readable($file)) {
        return null;
    }

    $raw = @file_get_contents($file);
    if (!is_string($raw) || $raw === '') {
        return null;
    }

    $decoded = json_decode($raw, true);
    if (!is_array($decoded) || !is_array($decoded['settings'] ?? null)) {
        return null;
    }

    return $decoded;
}

function writeLandingSettingsCache(array $settings): void
{
    $payload = json_encode([
        'cached_at' => time(),
        'settings' => $settings,
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

    if (!is_string($payload) || $payload === '') {
        return;
    }

    @file_put_contents(landingSettingsCacheFile(), $payload, LOCK_EX);
}

$dashboardUrl = $loggedIn ? homeDashboardUrl($role, $schoolUser) : 'login.php';
$landingPlans = globalSettingsDefaults()['landing_plans'];
$footerSettings = globalSettingsDefaults()['footer_settings'];
$pricingSettings = globalSettingsDefaults();
$settingsCache = readLandingSettingsCache();
$settingsCacheIsFresh = is_array($settingsCache) && ((time() - (int) ($settingsCache['cached_at'] ?? 0)) < 900);
if ($settingsCacheIsFresh) {
    $cachedSettings = $settingsCache['settings'];
    $pricingSettings = array_merge($pricingSettings, $cachedSettings);
    if (is_array($cachedSettings['landing_plans'] ?? null) && count($cachedSettings['landing_plans']) === 3) {
        $landingPlans = $cachedSettings['landing_plans'];
    }
    if (is_array($cachedSettings['footer_settings'] ?? null)) {
        $footerSettings = $cachedSettings['footer_settings'];
    }
} else {
    try {
        $settingsPdo = getDbConnection();
        $settings = loadGlobalSettings($settingsPdo);
        if (is_array($settings['landing_plans'] ?? null) && count($settings['landing_plans']) === 3) {
            $landingPlans = $settings['landing_plans'];
        }
        if (is_array($settings['footer_settings'] ?? null)) {
            $footerSettings = $settings['footer_settings'];
        }
        $pricingSettings = is_array($settings) ? array_merge($pricingSettings, $settings) : $pricingSettings;
        writeLandingSettingsCache($pricingSettings);
    } catch (Throwable $e) {
        if (is_array($settingsCache['settings'] ?? null)) {
            $fallbackSettings = $settingsCache['settings'];
            $pricingSettings = array_merge($pricingSettings, $fallbackSettings);
            if (is_array($fallbackSettings['landing_plans'] ?? null) && count($fallbackSettings['landing_plans']) === 3) {
                $landingPlans = $fallbackSettings['landing_plans'];
            }
            if (is_array($fallbackSettings['footer_settings'] ?? null)) {
                $footerSettings = $fallbackSettings['footer_settings'];
            }
        }
        // keep defaults or stale cache if settings are unavailable
    }
}

$demoDaysCfg = max(1, (int) ($pricingSettings['demo_days'] ?? 2));
$demoStudentsCfg = max(1, (int) ($pricingSettings['demo_students_limit'] ?? 5));
$demoTeachersCfg = max(1, (int) ($pricingSettings['demo_teachers_limit'] ?? 5));
$demoVideoUrl = trim((string) ($pricingSettings['demo_video_url'] ?? ''));
$demoReportsPdf = trim((string) ($pricingSettings['demo_reports_pdf'] ?? ''));
$hasDemoVideo = $demoVideoUrl !== '';
$hasDemoReportsPdf = $demoReportsPdf !== '';
$baseFeeCfg = max(0.0, (float) ($pricingSettings['base_package_rs'] ?? 1000));
$includedStudentsCfg = max(1, (int) ($pricingSettings['included_students'] ?? 100));
$extraPerStudentCfg = max(0.0, (float) ($pricingSettings['extra_student_rate_rs'] ?? 6.25));
$yearlyDiscountPctCfg = 15.0;

$visitDayKey = 'usage_visitor_logged_day';
$todayKey = date('Y-m-d');
$shouldTrackVisit = false;
if ((string) ($_SESSION[$visitDayKey] ?? '') !== $todayKey) {
    $_SESSION[$visitDayKey] = $todayKey;
    usageGetOrCreateVisitorKey();
    $shouldTrackVisit = true;
}

$workerFormError = '';
$workerFormSuccess = isset($_GET['commission_applied']) && $_GET['commission_applied'] === '1';
$demoFormError = '';
$demoFormSuccess = isset($_GET['demo_created']) && $_GET['demo_created'] === '1';
$demoFormCredentials = [
    'username' => trim((string) ($_GET['demo_user'] ?? '')),
    'password' => trim((string) ($_GET['demo_pass'] ?? '')),
];
$demoFormOld = [
    'school_name' => '',
    'admin_name' => '',
    'whatsapp' => '',
    'city' => '',
    'email' => '',
];
$workerFormOld = [
    'name' => '',
    'whatsapp' => '',
    'area' => '',
    'city' => '',
    'experience' => '',
    'message' => '',
];

if ($_SERVER['REQUEST_METHOD'] === 'POST' && (string) ($_POST['action'] ?? '') === 'commission_worker_apply') {
    foreach ($workerFormOld as $field => $_) {
        $workerFormOld[$field] = trim((string) ($_POST[$field] ?? ''));
    }

    if ($workerFormOld['name'] === '' || $workerFormOld['whatsapp'] === '' || $workerFormOld['area'] === '' || $workerFormOld['city'] === '') {
        $workerFormError = 'Name, WhatsApp, area aur city required hain.';
    } elseif (strlen($workerFormOld['whatsapp']) < 8) {
        $workerFormError = 'WhatsApp number theek format me likhein.';
    } else {
        try {
            $pdo = getDbConnection();
            $workerId = 'commission_worker_' . bin2hex(random_bytes(8));
            $now = new DateTimeImmutable('now');
            $workerPayload = [
                'id' => $workerId,
                'type' => 'commission_worker',
                'name' => $workerFormOld['name'],
                'whatsapp' => $workerFormOld['whatsapp'],
                'area' => $workerFormOld['area'],
                'city' => $workerFormOld['city'],
                'experience' => $workerFormOld['experience'],
                'message' => $workerFormOld['message'],
                'status' => 'new',
                'commission_rate_pct' => 35,
                'source' => 'website_commission_modal',
                'created_at' => $now->format(DateTimeInterface::ATOM),
            ];

            $stmt = $pdo->prepare('INSERT INTO app_records (backend_id, item_type, payload_json) VALUES (:id, :type, :payload)');
            $stmt->execute([
                ':id' => $workerId,
                ':type' => 'commission_worker',
                ':payload' => json_encode($workerPayload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_THROW_ON_ERROR),
            ]);

            header('Location: index.php?commission_applied=1#get-commission');
            exit;
        } catch (Throwable $e) {
            $workerFormError = 'Form submit nahi ho saka. Thori dair baad dobara try karein.';
        }
    }
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && (string) ($_POST['action'] ?? '') === 'create_landing_demo') {
    foreach ($demoFormOld as $field => $_) {
        $demoFormOld[$field] = trim((string) ($_POST[$field] ?? ''));
    }

    $ipBlocked = false;

    // Check 1: Hard cookie and form previously registered checks
    $cookiePrev = isset($_COOKIE['__sm_demo_registered']) && $_COOKIE['__sm_demo_registered'] === '1';
    $postPrev = isset($_POST['device_previously_registered']) && $_POST['device_previously_registered'] === '1';
    if ($cookiePrev || $postPrev) {
        $ipBlocked = true;
        $demoFormError = 'Only one demo account is allowed per device. You have already registered a demo account.';
    }

    if (!$ipBlocked) {
        $clientIp = $_SERVER['REMOTE_ADDR'] ?? '';
        if ($clientIp !== '') {
            $ipHash = md5($clientIp);
            try {
                $blockedIpCheck = dbFetchOne(
                    "SELECT backend_id FROM app_records WHERE item_type = 'blocked_ip' AND backend_id = :id LIMIT 1",
                    [':id' => 'blocked_ip_' . $ipHash]
                );
                if ($blockedIpCheck) {
                    $ipBlocked = true;
                    $demoFormError = 'Registration of demo accounts from this device/IP is restricted due to security policy violations.';
                }
            } catch (Throwable $e) {
                // Fail silent
            }
        }
    }

    if ($ipBlocked) {
        // IP is blocked, error already set
    } elseif ($demoFormOld['school_name'] === '' || $demoFormOld['admin_name'] === '' || $demoFormOld['whatsapp'] === '' || $demoFormOld['city'] === '') {
        $demoFormError = 'School name, admin name, WhatsApp aur city required hain.';
    } elseif (strlen($demoFormOld['whatsapp']) < 8) {
        $demoFormError = 'WhatsApp number theek format me likhein.';
    } elseif ($demoFormOld['email'] !== '' && !filter_var($demoFormOld['email'], FILTER_VALIDATE_EMAIL)) {
        $demoFormError = 'Email address valid format me likhein.';
    } else {
        try {
            $pdo = getDbConnection();
            $now = new DateTimeImmutable('now');
            $expiresAt = $now->modify('+' . $demoDaysCfg . ' days');
            $schoolId = 'school_' . bin2hex(random_bytes(8));
            $username = landingBuildDemoUsername($pdo, $demoFormOld['school_name']);
            $password = 'demo' . random_int(100000, 999999);
            $email = $demoFormOld['email'] !== '' ? $demoFormOld['email'] : ($username . '@schoolmarkaz.local');

            $payload = [
                'id' => $schoolId,
                'type' => 'school',
                'name' => $demoFormOld['school_name'],
                'address' => 'Demo request, ' . $demoFormOld['city'],
                'email' => $email,
                'contact' => $demoFormOld['whatsapp'],
                'source' => 'landing_create_demo_modal',
                'admin' => [
                    'name' => $demoFormOld['admin_name'],
                    'phone' => $demoFormOld['whatsapp'],
                    'email' => $email,
                    'photo' => null,
                ],
                'admin_account' => [
                    'username' => $username,
                    'password_hash' => password_hash($password, PASSWORD_DEFAULT),
                    'password_plain' => $password,
                ],
                'package' => [
                    'plan_name' => ($demoDaysCfg === 1) ? '24 Hour Demo' : ($demoDaysCfg . ' Day Demo'),
                    'type' => 'demo',
                    'students_limit' => $demoStudentsCfg,
                    'teachers_limit' => $demoTeachersCfg,
                    'auto_fee_rs' => 0.0,
                    'manual_fee_rs' => null,
                    'custom_billing_enabled' => false,
                    'final_fee_rs' => 0.0,
                    'yearly_discount_pct' => null,
                    'yearly_discount_rs' => null,
                    'starts_at' => $now->format(DateTimeInterface::ATOM),
                    'expires_at' => $expiresAt->format(DateTimeInterface::ATOM),
                    'demo_days' => $demoDaysCfg,
                    'demo_hours' => $demoDaysCfg * 24,
                    'demo_feature_locks' => [
                        'family_system',
                        'backup_import',
                        'bulk_tools',
                        'data_extractor',
                        'erase_all_data',
                        'branding',
                    ],
                    'access_state' => 'deactivated',
                    'access_reason' => 'awaiting_super_admin_activation',
                    'status_updated_at' => $now->format(DateTimeInterface::ATOM),
                ],
                'created_at' => $now->format(DateTimeInterface::ATOM),
            ];

            $stmt = $pdo->prepare('INSERT INTO app_records (backend_id, item_type, payload_json) VALUES (:id, :type, :payload)');
            $stmt->execute([
                ':id' => $schoolId,
                ':type' => 'school',
                ':payload' => json_encode($payload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_THROW_ON_ERROR),
            ]);

            // Seed default classes (Class 8, Class 9, Class 10th) and Section A for demo account
            seedDemoSchoolClassesAndSections($pdo, $username);

            // Set long-term tracking cookie for demo registrations (10 years)
            setcookie('__sm_demo_registered', '1', time() + (10 * 365 * 24 * 60 * 60), '/', '', false, false);

            demoMagicLinkEnsure($pdo, $schoolId, $payload);
            header('Location: login.php?registered_demo=1&un=' . urlencode($username));
            exit;
        } catch (Throwable $e) {
            $demoFormError = 'Demo account create nahi ho saka. Thori dair baad dobara try karein.';
        }
    }
}

$commissionExamplePlanRs = 1500.0;
$commissionRatePct = 35;
$commissionOneSchoolRs = ($commissionExamplePlanRs * $commissionRatePct) / 100;
$commissionTwoSchoolsRs = $commissionOneSchoolRs * 2;
$commissionFiveSchoolsRs = $commissionOneSchoolRs * 5;
$systemName = trim((string) ($pricingSettings['system_name'] ?? 'School Markaz'));
if ($systemName === '') {
    $systemName = 'School Markaz';
}
$navBrandPrimary = $systemName;
$navBrandAccent = '';
if (preg_match('/^(.+?)\s+([^\s]+)$/u', $systemName, $brandParts)) {
    $navBrandPrimary = trim((string) ($brandParts[1] ?? '')) ?: $systemName;
    $navBrandAccent = trim((string) ($brandParts[2] ?? ''));
}

?>
<!doctype html>
<html lang="en" class="h-full">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- PWA: installable "School Markaz" app (Android / iOS / Windows) -->
  <?php
    // Version-stamp manifest + icons: without a changing query string a browser
    // (or the service worker) can pin old artwork indefinitely.
    $smIconV = is_file(__DIR__ . '/assets/icons/school-markaz-pwa-512.png') ? (string) filemtime(__DIR__ . '/assets/icons/school-markaz-pwa-512.png') : '1';
    $smManifestV = is_file(__DIR__ . '/pwa-app.webmanifest') ? (string) filemtime(__DIR__ . '/pwa-app.webmanifest') : '1';
    $smIconV = htmlspecialchars($smIconV, ENT_QUOTES, 'UTF-8');
    $smManifestV = htmlspecialchars($smManifestV, ENT_QUOTES, 'UTF-8');
  ?>
  <link rel="manifest" href="pwa-app.webmanifest?v=<?php echo $smManifestV; ?>">
  <link rel="icon" href="assets/icons/favicon-32.png?v=<?php echo $smIconV; ?>" type="image/png">
  <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png?v=<?php echo $smIconV; ?>">
  <meta name="theme-color" content="#ea580c">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="School Markaz">
  <script>
    // Capture the install prompt HERE: Chrome fires beforeinstallprompt early
    // and the footer widget would otherwise miss it, leaving desktop install
    // permanently unavailable.
    window.addEventListener('beforeinstallprompt', function (e) {
      e.preventDefault();
      window.__smDeferredInstallPrompt = e;
    });
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('service-worker.js', { scope: './' }).catch(function () {});
      });
    }
  </script>
  <title><?php echo e($systemName); ?> - Complete School Management System</title>
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet">
  <?php $landingCssVersion = (is_file(__DIR__ . '/assets/css/landing.css') ? (string) filemtime(__DIR__ . '/assets/css/landing.css') : '1') . '-v5'; ?>
  <link rel="stylesheet" href="assets/css/landing.css?v=<?php echo htmlspecialchars($landingCssVersion, ENT_QUOTES, 'UTF-8'); ?>">
 <meta name="google-site-verification" content="wYb8rZxr9J_NEwRYScaNncLx8pRkmL7Ahel-SjYO3Yc" />
 </head>
 <body class="h-full overflow-x-hidden bg-slate-50 antialiased selection:bg-indigo-500 selection:text-white"><!-- Navbar -->
  <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-20"><!-- Logo --> <a href="index.php" class="flex items-center gap-3 group">
      <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 via-indigo-700 to-cyan-500 flex items-center justify-center shadow-md shadow-indigo-500/20 group-hover:scale-105 transition-transform">
       <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
       </svg>
      </div><span class="text-xl font-black text-slate-900 tracking-tight"><?php echo e($navBrandPrimary); ?><?php if ($navBrandAccent !== ''): ?> <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-cyan-600"><?php echo e($navBrandAccent); ?></span><?php endif; ?></span> </a> <!-- Desktop Nav -->
     <div class="hidden lg:flex items-center gap-5 xl:gap-8"><a href="#features" class="text-slate-600 hover:text-indigo-600 font-bold text-sm xl:text-base transition-colors">Features</a> <a href="#modules" class="text-slate-600 hover:text-indigo-600 font-bold text-sm xl:text-base transition-colors">Modules</a> <a href="#pricing" class="text-slate-600 hover:text-indigo-600 font-bold text-sm xl:text-base transition-colors">Pricing</a> <a href="#get-commission" class="text-slate-600 hover:text-indigo-600 font-bold text-sm xl:text-base transition-colors">Commission</a> <a href="#testimonials" class="text-slate-600 hover:text-indigo-600 font-bold text-sm xl:text-base transition-colors">Testimonials</a> <a href="#contact" class="text-slate-600 hover:text-indigo-600 font-bold text-sm xl:text-base transition-colors">Contact</a>
     </div><!-- CTA Buttons -->
     <div class="hidden lg:flex items-center gap-3"><?php if ($loggedIn): ?> <a href="<?php echo htmlspecialchars($dashboardUrl, ENT_QUOTES, 'UTF-8'); ?>" class="btn-secondary px-5 py-2.5 text-slate-800 font-extrabold rounded-xl text-sm inline-block">Dashboard</a> <a href="logout.php" class="btn-primary px-5 py-2.5 text-white font-extrabold rounded-xl text-sm inline-block">Logout</a> <?php else: ?> <a href="login.php" class="btn-secondary px-4 xl:px-5 py-2.5 text-slate-800 font-extrabold rounded-xl text-sm inline-block">Login</a> <button type="button" data-open-demo-modal="true" class="btn-primary px-4 xl:px-5 py-2.5 text-white font-extrabold rounded-xl text-sm inline-block">Create Demo</button> <a href="register.php" class="btn-secondary px-4 xl:px-5 py-2.5 text-slate-800 font-extrabold rounded-xl text-sm inline-block">Register</a> <?php endif; ?></div><!-- Mobile Menu Button --> <button id="mobileMenuBtn" class="lg:hidden p-2.5 rounded-xl text-slate-700 hover:bg-slate-100 transition-colors">
      <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path id="menuIcon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg></button>
    </div>
   </div><!-- Mobile Menu -->
   <div id="mobileMenu" class="lg:hidden hidden bg-white/95 backdrop-blur-xl border-t border-slate-100 shadow-2xl">
    <div class="px-5 py-6 space-y-4"><a href="check_result.php" class="flex items-center justify-between py-3 px-4 rounded-2xl text-white bg-gradient-to-r from-emerald-600 to-teal-600 font-bold shadow-md shadow-emerald-600/20"><span class="flex items-center gap-2">🎓 Check Student Result (DMC)</span><span class="text-[10px] bg-white/20 text-white px-2 py-0.5 rounded-full uppercase tracking-wider font-extrabold">Online</span></a> <div class="grid grid-cols-2 gap-2 pt-2 border-t border-slate-100"><a href="#features" class="block py-2 px-3 text-slate-700 font-bold text-sm hover:text-indigo-600 rounded-lg hover:bg-slate-50">Features</a> <a href="#modules" class="block py-2 px-3 text-slate-700 font-bold text-sm hover:text-indigo-600 rounded-lg hover:bg-slate-50">Modules</a> <a href="#pricing" class="block py-2 px-3 text-slate-700 font-bold text-sm hover:text-indigo-600 rounded-lg hover:bg-slate-50">Pricing</a> <a href="#get-commission" class="block py-2 px-3 text-slate-700 font-bold text-sm hover:text-indigo-600 rounded-lg hover:bg-slate-50">Commission</a> <a href="#testimonials" class="block py-2 px-3 text-slate-700 font-bold text-sm hover:text-indigo-600 rounded-lg hover:bg-slate-50">Testimonials</a> <a href="#contact" class="block py-2 px-3 text-slate-700 font-bold text-sm hover:text-indigo-600 rounded-lg hover:bg-slate-50">Contact</a></div>
     <div class="pt-4 space-y-3"><?php if ($loggedIn): ?> <a href="<?php echo htmlspecialchars($dashboardUrl, ENT_QUOTES, 'UTF-8'); ?>" class="w-full btn-secondary px-5 py-3 text-gray-700 font-semibold rounded-xl border-2 border-gray-200 inline-block text-center">Dashboard</a> <a href="logout.php" class="w-full btn-primary px-5 py-3 text-white font-semibold rounded-xl inline-block text-center">Logout</a> <?php else: ?> <a href="login.php" class="w-full btn-secondary px-5 py-3 text-gray-700 font-semibold rounded-xl border-2 border-gray-200 inline-block text-center">Login</a> <button type="button" data-open-demo-modal="true" class="w-full btn-primary px-5 py-3 text-white font-semibold rounded-xl inline-block text-center">Create Demo</button> <a href="register.php" class="w-full btn-secondary px-5 py-3 text-gray-700 font-semibold rounded-xl border-2 border-gray-200 inline-block text-center">Register</a> <?php endif; ?></div>
    </div>
   </div>
  </nav><!-- Hero Section -->
  <section class="gradient-hero tech-grid-pattern min-h-screen pt-28 pb-16 lg:pt-36 lg:pb-24 relative overflow-hidden">
   <div class="ambient-glow-indigo -top-20 left-10 opacity-70"></div>
   <div class="ambient-glow-cyan top-40 -right-20 opacity-60"></div>
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
    <div class="grid lg:grid-cols-2 gap-12 items-center"><!-- Left Content -->
     <div class="animate-fade-left" style="animation-fill-mode: forwards;">
      <div class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-indigo-50/90 border border-indigo-200/80 rounded-full mb-6 shadow-xs backdrop-blur-xs"><span class="w-2.5 h-2.5 bg-indigo-600 rounded-full animate-pulse"></span> <span class="text-indigo-900 font-extrabold text-xs tracking-wider uppercase">Trusted by 500+ Schools in Pakistan</span>
      </div>
      <h1 id="heroTitle" class="text-3xl sm:text-5xl lg:text-6xl font-black text-slate-950 leading-[1.12] mb-6 tracking-tight">Transform Your School with <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-cyan-600 to-emerald-500">Smart Cloud Management</span></h1>
      <p id="heroSubtitle" class="text-base sm:text-lg text-slate-600 mb-8 leading-relaxed max-w-xl"><?php echo e($systemName); ?> is the complete digital operating system for Pakistani schools. Effortlessly manage admissions, attendance, exams, automated fee challans, and parent WhatsApp updates — all in one unified platform.</p>
      <!-- 100% RESPONSIVE ACTION BUTTONS -->
      <div class="space-y-3.5">
       <!-- Row 1: Primary Super-CTAs -->
       <div class="flex flex-col sm:flex-row gap-3">
        <a href="check_result.php" class="btn-result-portal px-6 py-4 text-white font-black rounded-2xl text-base shadow-lg shadow-emerald-600/25 flex items-center justify-center gap-2.5 group">
         <svg class="w-5 h-5 text-emerald-200 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
         <span>🎓 Check Student Result</span>
         <span class="text-[10px] bg-white/20 text-white px-2 py-0.5 rounded-full border border-white/30 uppercase tracking-widest font-extrabold">Online</span>
        </a>
        <button type="button" data-open-demo-modal="true" id="ctaPrimary" class="btn-primary px-6 py-4 text-white font-black rounded-2xl text-base shadow-lg shadow-indigo-600/30 flex items-center justify-center gap-2">
         <span>Create Free Demo</span>
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
        </button>
       </div>
       
       <!-- Row 2: Secondary Quick Actions (Pills) -->
       <div class="flex flex-wrap items-center gap-2.5 pt-1">
        <button type="button" data-open-worker-modal="true" class="btn-secondary px-4 py-2.5 text-slate-800 text-xs sm:text-sm font-extrabold rounded-xl flex items-center gap-1.5 shadow-2xs">
         <span>💼 Work With Us (Commission)</span>
        </button>
        <a href="<?php echo e($hasDemoVideo ? $demoVideoUrl : '#'); ?>" id="ctaSecondary" class="btn-secondary px-4 py-2.5 text-slate-800 text-xs sm:text-sm font-extrabold rounded-xl flex items-center gap-1.5 shadow-2xs <?php echo !$hasDemoVideo ? 'opacity-60 cursor-not-allowed' : ''; ?>" <?php echo $hasDemoVideo ? 'target="_blank" rel="noopener noreferrer"' : 'aria-disabled="true"'; ?>>
         <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
         <span>View Demo Video</span>
        </a>
        <a href="<?php echo e($hasDemoReportsPdf ? $demoReportsPdf : '#'); ?>" class="btn-secondary px-4 py-2.5 text-slate-800 text-xs sm:text-sm font-extrabold rounded-xl flex items-center gap-1.5 shadow-2xs <?php echo !$hasDemoReportsPdf ? 'opacity-60 cursor-not-allowed' : ''; ?>" <?php echo $hasDemoReportsPdf ? 'target="_blank" rel="noopener noreferrer"' : 'aria-disabled="true"'; ?>>
         <svg class="w-4 h-4 text-cyan-600" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16.5V18a2 2 0 002 2h12a2 2 0 002-2v-1.5M7 4h7l5 5v3a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg>
         <span>Sample Reports</span>
        </a>
       </div>
      </div>
      <div class="mt-10 flex items-center gap-6">
       <div class="flex -space-x-3">
        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-400 to-cyan-600 border-2 border-white flex items-center justify-center text-white font-bold text-sm">
         A
        </div>
        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 border-2 border-white flex items-center justify-center text-white font-bold text-sm">
         B
        </div>
        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 border-2 border-white flex items-center justify-center text-white font-bold text-sm">
         C
        </div>
        <div class="w-10 h-10 rounded-full bg-gradient-to-br from-teal-400 to-teal-600 border-2 border-white flex items-center justify-center text-white font-bold text-sm">
         D
        </div>
       </div>
       <div>
        <div class="flex items-center gap-1">
         <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewbox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewbox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewbox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewbox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
         <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewbox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
         </svg>
        </div>
        <p class="text-sm text-gray-500 mt-1">Rated 4.9/5 by school admins</p>
       </div>
      </div>
     </div><!-- Right Dashboard Mock -->
     <div class="animate-fade-right delay-200 mt-8 lg:mt-0" style="animation-fill-mode: forwards;">
      <div class="relative max-w-lg mx-auto lg:max-w-none">
       <!-- Main Dashboard Card -->
       <div class="bg-white/95 backdrop-blur-md rounded-3xl shadow-2xl border border-slate-200/90 p-5 sm:p-7 animate-float relative z-10">
        <div class="flex items-center justify-between mb-6 pb-4 border-b border-slate-100">
         <div>
          <span class="text-xs font-extrabold text-indigo-600 uppercase tracking-widest block">Live Portal Preview</span>
          <h3 class="text-lg sm:text-xl font-black text-slate-900 mt-0.5">School Admin Control Center</h3>
         </div>
         <div class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-indigo-600 via-indigo-700 to-cyan-500 flex items-center justify-center text-white shadow-md shadow-indigo-500/20">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
          </svg>
         </div>
        </div><!-- Stats Grid -->
        <div class="grid grid-cols-2 gap-3 sm:gap-4 mb-5">
         <div class="bg-indigo-50/80 border border-indigo-100/90 rounded-2xl p-3.5 sm:p-4">
          <p class="text-2xl sm:text-3xl font-black text-indigo-900">2,458</p>
          <p class="text-xs font-bold text-indigo-700 mt-1">Total Students</p>
         </div>
         <div class="bg-cyan-50/80 border border-cyan-100/90 rounded-2xl p-3.5 sm:p-4">
          <p class="text-2xl sm:text-3xl font-black text-cyan-900">156</p>
          <p class="text-xs font-bold text-cyan-700 mt-1">Active Teachers</p>
         </div>
         <div class="bg-emerald-50/80 border border-emerald-100/90 rounded-2xl p-3.5 sm:p-4">
          <p class="text-2xl sm:text-3xl font-black text-emerald-900">95.8%</p>
          <p class="text-xs font-bold text-emerald-700 mt-1">Daily Attendance</p>
         </div>
         <div class="bg-slate-100/80 border border-slate-200/90 rounded-2xl p-3.5 sm:p-4">
          <p class="text-2xl sm:text-3xl font-black text-slate-900">Rs. 12.5M</p>
          <p class="text-xs font-bold text-slate-700 mt-1">Fee Recovered</p>
         </div>
        </div><!-- Activity Stream -->
        <div class="space-y-2.5">
         <div class="flex items-center gap-3 p-3 bg-slate-50/90 border border-slate-100 rounded-2xl">
          <div class="w-9 h-9 rounded-xl bg-cyan-100 text-cyan-700 flex items-center justify-center flex-shrink-0 font-black">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
           </svg>
          </div>
          <div class="flex-1 min-w-0">
           <p class="text-xs font-black text-slate-900 truncate">New Online Admission Request</p>
           <p class="text-[11px] text-slate-500 truncate">Ahmad Ali — Class 6 (Section A)</p>
          </div><span class="text-[10px] bg-cyan-100 text-cyan-800 font-black px-2 py-0.5 rounded-full whitespace-nowrap">Just Now</span>
         </div>
         <div class="flex items-center gap-3 p-3 bg-slate-50/90 border border-slate-100 rounded-2xl">
          <div class="w-9 h-9 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center flex-shrink-0 font-black">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
          </div>
          <div class="flex-1 min-w-0">
           <p class="text-xs font-black text-slate-900 truncate">Fee Challan Paid (JazzCash)</p>
           <p class="text-[11px] text-slate-500 truncate">Rs. 25,000 — Fatima Khan (Class 9)</p>
          </div><span class="text-[10px] bg-emerald-100 text-emerald-800 font-black px-2 py-0.5 rounded-full whitespace-nowrap">2m ago</span>
         </div>
        </div>
       </div><!-- Floating Pill 1 (System Uptime) - Protected against horizontal overflow -->
       <div class="absolute -top-3.5 sm:-top-5 right-2 sm:-right-4 bg-white/95 backdrop-blur-md rounded-2xl shadow-xl border border-slate-200/90 p-3 sm:p-3.5 animate-pulse-glow z-20">
        <div class="flex items-center gap-2.5">
         <div class="w-8 h-8 rounded-xl bg-emerald-500 flex items-center justify-center text-white font-bold">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
         </div>
         <div>
          <p class="text-xs sm:text-sm font-black text-slate-900">99.9% Uptime</p>
          <p class="text-[10px] text-slate-500 font-bold">Cloud Server</p>
         </div>
        </div>
       </div>
       <div class="absolute -bottom-3.5 sm:-bottom-5 left-2 sm:-left-4 bg-white/95 backdrop-blur-md rounded-2xl shadow-xl border border-slate-200/90 p-3 sm:p-3.5 z-20">
        <div class="flex items-center gap-2.5">
         <div class="w-8 h-8 rounded-xl bg-cyan-500 flex items-center justify-center text-white font-bold">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
         </div>
         <div>
          <p class="text-xs sm:text-sm font-black text-slate-900">WhatsApp &amp; SMS</p>
          <p class="text-[10px] text-slate-500 font-bold">Instant Parent Alerts</p>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </section><!-- Trusted By Schools -->
  <section class="py-10 bg-slate-50/70 border-y border-slate-200/70 relative z-10">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <p class="text-center text-xs sm:text-sm font-bold text-slate-500 uppercase tracking-widest mb-6">Trusted by 500+ leading schools across Pakistan</p>
    <div class="flex flex-wrap justify-center items-center gap-4 sm:gap-6 lg:gap-10">
     <div class="flex items-center gap-2.5 px-4 py-2 bg-white rounded-2xl border border-slate-200/80 shadow-xs">
      <div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-indigo-600 to-indigo-800 flex items-center justify-center font-black text-xs text-white">LC</div>
      <span class="font-bold text-xs sm:text-sm text-slate-800">Lahore College</span>
     </div>
     <div class="flex items-center gap-2.5 px-4 py-2 bg-white rounded-2xl border border-slate-200/80 shadow-xs">
      <div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-cyan-600 to-cyan-800 flex items-center justify-center font-black text-xs text-white">KA</div>
      <span class="font-bold text-xs sm:text-sm text-slate-800">Karachi Academy</span>
     </div>
     <div class="flex items-center gap-2.5 px-4 py-2 bg-white rounded-2xl border border-slate-200/80 shadow-xs">
      <div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-emerald-600 to-emerald-800 flex items-center justify-center font-black text-xs text-white">IG</div>
      <span class="font-bold text-xs sm:text-sm text-slate-800">Islamabad Grammar</span>
     </div>
     <div class="flex items-center gap-2.5 px-4 py-2 bg-white rounded-2xl border border-slate-200/80 shadow-xs">
      <div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-blue-600 to-blue-800 flex items-center justify-center font-black text-xs text-white">PS</div>
      <span class="font-bold text-xs sm:text-sm text-slate-800">Punjab Schools</span>
     </div>
     <div class="flex items-center gap-2.5 px-4 py-2 bg-white rounded-2xl border border-slate-200/80 shadow-xs">
      <div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-teal-600 to-teal-800 flex items-center justify-center font-black text-xs text-white">SM</div>
      <span class="font-bold text-xs sm:text-sm text-slate-800">Sindh Model</span>
     </div>
    </div>
   </div>
  </section>

  <!-- Testimonials -->
  <section id="testimonials" class="py-20 lg:py-28 bg-white relative">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-16 reveal">
     <span class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-indigo-50 border border-indigo-150 text-indigo-700 rounded-full font-bold text-xs uppercase tracking-wider mb-4">
      <span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span>TESTIMONIALS
     </span>
     <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-slate-950 tracking-tight mb-4">What School Leaders Say</h2>
     <p class="text-base sm:text-lg text-slate-600 max-w-2xl mx-auto">Real reviews from school directors and principals running on <?php echo e($systemName); ?> daily</p>
    </div>
    <div class="grid md:grid-cols-3 gap-6 lg:gap-8">
      <?php
      try {
          $dbTestimonials = [];
          $pdo = getDbConnection();
          $tStmt = $pdo->query("SELECT payload_json FROM app_records WHERE item_type = 'testimonial' ORDER BY id DESC");
          foreach ($tStmt->fetchAll() as $tRow) {
              $tData = json_decode((string)$tRow['payload_json'], true);
              if (is_array($tData)) {
                  $dbTestimonials[] = $tData;
              }
          }
      } catch (Throwable $e) {
          $dbTestimonials = [];
      }
      
      foreach ($dbTestimonials as $tItem):
          $logoPath = trim((string)($tItem['logo_path'] ?? ''));
          if (strpos($logoPath, '../') === 0) {
              $logoPath = substr($logoPath, 3);
          }
          $schoolName = trim((string)($tItem['school_name'] ?? ''));
          $adminName = trim((string)($tItem['admin_name'] ?? ''));
          $text = trim((string)($tItem['testimonial_text'] ?? ''));
          
          $initials = '';
          if ($schoolName !== '') {
              $words = explode(' ', $schoolName);
              $initials = strtoupper(substr($words[0], 0, 1) . (isset($words[1]) ? substr($words[1], 0, 1) : ''));
          } else {
              $initials = 'SM';
          }
      ?>
      <div class="reveal card-hover bg-white rounded-3xl p-7 lg:p-8 border border-slate-200/90 shadow-sm flex flex-col justify-between">
       <div>
         <div class="flex items-center gap-1 mb-4 text-amber-400">
          <?php for ($i = 0; $i < 5; $i++): ?>
          <svg class="w-5 h-5 fill-current" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
          <?php endfor; ?>
         </div>
         <p class="text-slate-700 mb-6 leading-relaxed font-medium">"<?php echo htmlspecialchars($text, ENT_QUOTES, 'UTF-8'); ?>"</p>
       </div>
       <div class="flex items-center gap-3.5 pt-4 border-t border-slate-100">
        <?php if ($logoPath !== ''): ?>
         <img src="<?php echo htmlspecialchars($logoPath, ENT_QUOTES, 'UTF-8'); ?>" alt="School Logo" class="w-11 h-11 rounded-2xl object-cover border border-slate-200 shadow-sm">
        <?php else: ?>
         <div class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-indigo-600 via-indigo-700 to-cyan-500 flex items-center justify-center text-white font-extrabold text-sm shadow-sm">
          <?php echo htmlspecialchars($initials, ENT_QUOTES, 'UTF-8'); ?>
         </div>
        <?php endif; ?>
        <div>
         <p class="font-extrabold text-slate-900"><?php echo htmlspecialchars($adminName, ENT_QUOTES, 'UTF-8'); ?></p>
         <p class="text-xs text-slate-500 font-semibold">Principal / Admin, <?php echo htmlspecialchars($schoolName, ENT_QUOTES, 'UTF-8'); ?></p>
        </div>
       </div>
      </div>
      <?php endforeach; ?>
      <!-- Testimonial 1 -->
      <div class="reveal card-hover bg-white rounded-3xl p-7 lg:p-8 border border-slate-200/90 shadow-sm flex flex-col justify-between">
       <div>
        <div class="flex items-center gap-1 mb-4 text-amber-400">
         <?php for ($i = 0; $i < 5; $i++): ?>
         <svg class="w-5 h-5 fill-current" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
         <?php endfor; ?>
        </div>
        <p class="text-slate-700 mb-6 leading-relaxed font-medium">"<?php echo e($systemName); ?> has transformed how we manage our school. Fee collection is now 40% faster, and parents love the SMS updates about their children's attendance."</p>
       </div>
       <div class="flex items-center gap-3.5 pt-4 border-t border-slate-100">
        <div class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-cyan-600 to-indigo-600 flex items-center justify-center text-white font-extrabold text-sm shadow-sm">MK</div>
        <div>
         <p class="font-extrabold text-slate-900">Muhammad Khalid</p>
         <p class="text-xs text-slate-500 font-semibold">Principal, Lahore Model School</p>
        </div>
       </div>
      </div>
      <!-- Testimonial 2 -->
      <div class="reveal card-hover bg-white rounded-3xl p-7 lg:p-8 border border-slate-200/90 shadow-sm flex flex-col justify-between">
       <div>
        <div class="flex items-center gap-1 mb-4 text-amber-400">
         <?php for ($i = 0; $i < 5; $i++): ?>
         <svg class="w-5 h-5 fill-current" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
         <?php endfor; ?>
        </div>
        <p class="text-slate-700 mb-6 leading-relaxed font-medium">"The exam and result module is fantastic! We can generate report cards and online DMC verification in minutes. Parents check marks anytime without visiting the branch."</p>
       </div>
       <div class="flex items-center gap-3.5 pt-4 border-t border-slate-100">
        <div class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-emerald-600 to-cyan-600 flex items-center justify-center text-white font-extrabold text-sm shadow-sm">SA</div>
        <div>
         <p class="font-extrabold text-slate-900">Sadia Ahmed</p>
         <p class="text-xs text-slate-500 font-semibold">Director, Karachi International School</p>
        </div>
       </div>
      </div>
      <!-- Testimonial 3 -->
      <div class="reveal card-hover bg-white rounded-3xl p-7 lg:p-8 border border-slate-200/90 shadow-sm flex flex-col justify-between">
       <div>
        <div class="flex items-center gap-1 mb-4 text-amber-400">
         <?php for ($i = 0; $i < 5; $i++): ?>
         <svg class="w-5 h-5 fill-current" viewbox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg>
         <?php endfor; ?>
        </div>
        <p class="text-slate-700 mb-6 leading-relaxed font-medium">"We were using paper registers for years. <?php echo e($systemName); ?> made our school fully digital. Even our senior teachers found it remarkably easy to use."</p>
       </div>
       <div class="flex items-center gap-3.5 pt-4 border-t border-slate-100">
        <div class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-indigo-700 to-purple-600 flex items-center justify-center text-white font-extrabold text-sm shadow-sm">AR</div>
        <div>
         <p class="font-extrabold text-slate-900">Abdul Rehman</p>
         <p class="text-xs text-slate-500 font-semibold">Administrator, Islamabad Public School</p>
        </div>
       </div>
      </div>
    </div>
   </div>
  </section>

  <!-- Core Features -->
  <section id="features" class="py-20 lg:py-28 bg-slate-50/70 border-t border-slate-200/70 relative">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-16 reveal">
     <span class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-cyan-50 border border-cyan-150 text-cyan-700 rounded-full font-bold text-xs uppercase tracking-wider mb-4">
      <span class="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>POWERFUL FEATURES
     </span>
     <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-slate-950 tracking-tight mb-4">Everything You Need to Run Your School</h2>
     <p class="text-base sm:text-lg text-slate-600 max-w-2xl mx-auto">Comprehensive tools designed specifically for Pakistani educational institutions</p>
    </div>
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6">
     <!-- Feature 1 -->
     <div class="reveal card-hover bg-white rounded-3xl p-6 border border-slate-200/90 shadow-xs flex flex-col justify-between">
      <div>
       <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-cyan-600 to-cyan-500 flex items-center justify-center mb-5 text-white shadow-md shadow-cyan-500/20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>
       </div>
       <h3 class="text-lg font-black text-slate-900 mb-2">Student Management</h3>
       <p class="text-sm text-slate-600 leading-relaxed">Complete student profiles, enrollment, promotion, and multi-year academic history tracking.</p>
      </div>
     </div>
     <!-- Feature 2 -->
     <div class="reveal card-hover bg-white rounded-3xl p-6 border border-slate-200/90 shadow-xs flex flex-col justify-between">
      <div>
       <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-emerald-600 to-emerald-500 flex items-center justify-center mb-5 text-white shadow-md shadow-emerald-500/20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
       </div>
       <h3 class="text-lg font-black text-slate-900 mb-2">Smart Attendance</h3>
       <p class="text-sm text-slate-600 leading-relaxed">Digital attendance with biometric machine sync, automated SMS alerts to parents, and monthly registers.</p>
      </div>
     </div>
     <!-- Feature 3 -->
     <div class="reveal card-hover bg-white rounded-3xl p-6 border border-slate-200/90 shadow-xs flex flex-col justify-between">
      <div>
       <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-indigo-600 to-indigo-500 flex items-center justify-center mb-5 text-white shadow-md shadow-indigo-500/20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
       </div>
       <h3 class="text-lg font-black text-slate-900 mb-2">Fee Management</h3>
       <p class="text-sm text-slate-600 leading-relaxed">Automated fee challans, JazzCash &amp; Easypaisa recovery, defaulters tracking, and print-ready receipts.</p>
      </div>
     </div>
     <!-- Feature 4 -->
     <div class="reveal card-hover bg-white rounded-3xl p-6 border border-slate-200/90 shadow-xs flex flex-col justify-between">
      <div>
       <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-teal-600 to-teal-500 flex items-center justify-center mb-5 text-white shadow-md shadow-teal-500/20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
       </div>
       <h3 class="text-lg font-black text-slate-900 mb-2">Exam &amp; Results</h3>
       <p class="text-sm text-slate-600 leading-relaxed">Exam scheduling, fast mark entry, official DMC certificates with QR verification, and merit analytics.</p>
      </div>
     </div>
     <!-- Feature 5 -->
     <div class="reveal card-hover bg-white rounded-3xl p-6 border border-slate-200/90 shadow-xs flex flex-col justify-between">
      <div>
       <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-cyan-600 to-blue-600 flex items-center justify-center mb-5 text-white shadow-md shadow-cyan-500/20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /></svg>
       </div>
       <h3 class="text-lg font-black text-slate-900 mb-2">Parent Communication</h3>
       <p class="text-sm text-slate-600 leading-relaxed">SMS, WhatsApp notices, and portal updates for fees, exams, holidays, and student announcements.</p>
      </div>
     </div>
     <!-- Feature 6 -->
     <div class="reveal card-hover bg-white rounded-3xl p-6 border border-slate-200/90 shadow-xs flex flex-col justify-between">
      <div>
       <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-rose-600 to-rose-500 flex items-center justify-center mb-5 text-white shadow-md shadow-rose-500/20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
       </div>
       <h3 class="text-lg font-black text-slate-900 mb-2">Timetable &amp; Schedule</h3>
       <p class="text-sm text-slate-600 leading-relaxed">Conflict-free class timetables, subject teacher assignments, and period breakdown schedules.</p>
      </div>
     </div>
     <!-- Feature 7 -->
     <div class="reveal card-hover bg-white rounded-3xl p-6 border border-slate-200/90 shadow-xs flex flex-col justify-between">
      <div>
       <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-amber-600 to-amber-500 flex items-center justify-center mb-5 text-white shadow-md shadow-amber-500/20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
       </div>
       <h3 class="text-lg font-black text-slate-900 mb-2">Transport &amp; Vans</h3>
       <p class="text-sm text-slate-600 leading-relaxed">Van routes, driver contact log, student seat allocation, and automated van fee generation.</p>
      </div>
     </div>
     <!-- Feature 8 -->
     <div class="reveal card-hover bg-white rounded-3xl p-6 border border-slate-200/90 shadow-xs flex flex-col justify-between">
      <div>
       <div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-purple-600 to-indigo-600 flex items-center justify-center mb-5 text-white shadow-md shadow-purple-500/20">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
       </div>
       <h3 class="text-lg font-black text-slate-900 mb-2">Audit &amp; Finance</h3>
       <p class="text-sm text-slate-600 leading-relaxed">Real-time revenue charts, expense tracking, staff salaries, profit &amp; loss statements, and Excel exports.</p>
      </div>
     </div>
    </div>
   </div>
  </section>

  <!-- Modules Section -->
  <section id="modules" class="py-20 lg:py-28 bg-[#0a0f1d] relative overflow-hidden text-white">
   <div class="ambient-glow-indigo top-0 left-0 -translate-x-1/3 -translate-y-1/3 opacity-30"></div>
   <div class="ambient-glow-cyan bottom-0 right-0 translate-x-1/3 translate-y-1/3 opacity-30"></div>
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-16 reveal">
     <span class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-indigo-500/10 border border-indigo-400/20 text-cyan-300 rounded-full font-bold text-xs uppercase tracking-wider mb-4">
      <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></span>COMPREHENSIVE PORTALS
     </span>
     <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-white tracking-tight mb-4">Dedicated Portals for Every Role</h2>
     <p class="text-base sm:text-lg text-slate-400 max-w-2xl mx-auto">Tailored high-speed interfaces for administrators, teachers, parents, and students</p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
     <!-- Module 1: Admin Portal -->
     <div class="reveal card-hover bg-slate-900/90 backdrop-blur-md rounded-3xl p-7 sm:p-8 border border-slate-800 flex flex-col justify-between">
      <div>
       <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-indigo-600 to-cyan-500 flex items-center justify-center mb-6 text-white shadow-lg shadow-indigo-500/20">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
       </div>
       <h3 class="text-xl font-black text-white mb-3">School Admin Portal</h3>
       <p class="text-sm text-slate-400 mb-6 leading-relaxed">Central command deck with financial reporting, staff permissions, and campus configuration.</p>
       <ul class="space-y-2.5 text-xs sm:text-sm text-slate-300">
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-cyan-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Instant campus revenue metrics</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-cyan-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Staff &amp; payroll management</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-cyan-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Multi-user role permissions</li>
       </ul>
      </div>
     </div>
     <!-- Module 2: Teacher Portal -->
     <div class="reveal card-hover bg-slate-900/90 backdrop-blur-md rounded-3xl p-7 sm:p-8 border border-slate-800 flex flex-col justify-between">
      <div>
       <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-emerald-600 to-teal-500 flex items-center justify-center mb-6 text-white shadow-lg shadow-emerald-500/20">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
       </div>
       <h3 class="text-xl font-black text-white mb-3">Teacher Portal</h3>
       <p class="text-sm text-slate-400 mb-6 leading-relaxed">Dedicated dashboard for class teachers to mark attendance, record marks, and publish homework.</p>
       <ul class="space-y-2.5 text-xs sm:text-sm text-slate-300">
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> 1-click attendance entry</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Direct term exam grading</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-emerald-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Digital diary &amp; assignments</li>
       </ul>
      </div>
     </div>
     <!-- Module 3: Student & Parent Result Portal -->
     <div class="reveal card-hover bg-slate-900/90 backdrop-blur-md rounded-3xl p-7 sm:p-8 border border-slate-800 flex flex-col justify-between">
      <div>
       <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-cyan-600 to-blue-500 flex items-center justify-center mb-6 text-white shadow-lg shadow-cyan-500/20">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
       </div>
       <h3 class="text-xl font-black text-white mb-3">Online Result Portal</h3>
       <p class="text-sm text-slate-400 mb-6 leading-relaxed">Public &amp; secure student verification with official Detailed Marks Certificates (DMC).</p>
       <ul class="space-y-2.5 text-xs sm:text-sm text-slate-300">
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-cyan-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Search by Roll No or Phone</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-cyan-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Official A4 DMC PDF download</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-cyan-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Instant QR code verification</li>
       </ul>
      </div>
     </div>
     <!-- Module 4: WhatsApp & Alerts -->
     <div class="reveal card-hover bg-slate-900/90 backdrop-blur-md rounded-3xl p-7 sm:p-8 border border-slate-800 flex flex-col justify-between">
      <div>
       <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-teal-600 to-emerald-500 flex items-center justify-center mb-6 text-white shadow-lg shadow-teal-500/20">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
       </div>
       <h3 class="text-xl font-black text-white mb-3">Parent Alerts &amp; SMS</h3>
       <p class="text-sm text-slate-400 mb-6 leading-relaxed">Automated messaging triggers for attendance absences, fee reminders, and announcements.</p>
       <ul class="space-y-2.5 text-xs sm:text-sm text-slate-300">
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-teal-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Urdu &amp; English SMS templates</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-teal-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> WhatsApp integration ready</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-teal-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Instant emergency broadcasts</li>
       </ul>
      </div>
     </div>
     <!-- Module 5: Fee & Finance Engine -->
     <div class="reveal card-hover bg-slate-900/90 backdrop-blur-md rounded-3xl p-7 sm:p-8 border border-slate-800 flex flex-col justify-between">
      <div>
       <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-amber-600 to-amber-500 flex items-center justify-center mb-6 text-white shadow-lg shadow-amber-500/20">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
       </div>
       <h3 class="text-xl font-black text-white mb-3">Fee &amp; Accounts Engine</h3>
       <p class="text-sm text-slate-400 mb-6 leading-relaxed">Full lifecycle accounting with 3-part bank challans, discount rules, and collection logs.</p>
       <ul class="space-y-2.5 text-xs sm:text-sm text-slate-300">
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-amber-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Batch challan printing in PDF</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-amber-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Concession &amp; sibling discounts</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-amber-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Defaulter alert notifications</li>
       </ul>
      </div>
     </div>
     <!-- Module 6: Exams & Analytics -->
     <div class="reveal card-hover bg-slate-900/90 backdrop-blur-md rounded-3xl p-7 sm:p-8 border border-slate-800 flex flex-col justify-between">
      <div>
       <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-rose-600 to-indigo-600 flex items-center justify-center mb-6 text-white shadow-lg shadow-rose-500/20">
        <svg class="w-7 h-7" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
       </div>
       <h3 class="text-xl font-black text-white mb-3">Exam Sheets &amp; Positions</h3>
       <p class="text-sm text-slate-400 mb-6 leading-relaxed">Fast term grading, automated positions (1st, 2nd, 3rd), and board-style result sheets.</p>
       <ul class="space-y-2.5 text-xs sm:text-sm text-slate-300">
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-rose-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Date sheet creator</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-rose-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Tabulation sheet compilation</li>
        <li class="flex items-center gap-2"><svg class="w-4 h-4 text-rose-400" fill="currentColor" viewbox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> Performance graphs</li>
       </ul>
      </div>
     </div>
    </div>
   </div>
  </section>

  <!-- How It Works -->
  <section class="py-20 lg:py-28 bg-white relative">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-16 reveal">
     <span class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-emerald-50 border border-emerald-150 text-emerald-700 rounded-full font-bold text-xs uppercase tracking-wider mb-4">
      <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>SIMPLE ONBOARDING
     </span>
     <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-slate-950 tracking-tight mb-4">Get Started in 4 Easy Steps</h2>
     <p class="text-base sm:text-lg text-slate-600 max-w-2xl mx-auto">Implement <?php echo e($systemName); ?> in your school within 24 hours, not weeks</p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
     <!-- Step 1 -->
     <div class="reveal text-center bg-slate-50/70 border border-slate-200/80 rounded-3xl p-6 relative">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-indigo-600 to-indigo-700 flex items-center justify-center mx-auto mb-5 text-white font-black text-xl shadow-md shadow-indigo-600/20">1</div>
      <h3 class="text-lg font-black text-slate-900 mb-2">Create Free Demo</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Sign up instantly without credit card. Full portal access is created automatically in seconds.</p>
     </div>
     <!-- Step 2 -->
     <div class="reveal text-center bg-slate-50/70 border border-slate-200/80 rounded-3xl p-6 relative">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-cyan-600 to-cyan-700 flex items-center justify-center mx-auto mb-5 text-white font-black text-xl shadow-md shadow-cyan-600/20">2</div>
      <h3 class="text-lg font-black text-slate-900 mb-2">Import Existing Data</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Upload Excel sheets of students, classes, and teachers or have our team migrate it seamlessly.</p>
     </div>
     <!-- Step 3 -->
     <div class="reveal text-center bg-slate-50/70 border border-slate-200/80 rounded-3xl p-6 relative">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-emerald-600 to-emerald-700 flex items-center justify-center mx-auto mb-5 text-white font-black text-xl shadow-md shadow-emerald-600/20">3</div>
      <h3 class="text-lg font-black text-slate-900 mb-2">Staff &amp; Mobile Setup</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Free training videos &amp; live WhatsApp onboarding for your administrator and teachers.</p>
     </div>
     <!-- Step 4 -->
     <div class="reveal text-center bg-slate-50/70 border border-slate-200/80 rounded-3xl p-6 relative">
      <div class="w-14 h-14 rounded-2xl bg-gradient-to-tr from-teal-600 to-teal-700 flex items-center justify-center mx-auto mb-5 text-white font-black text-xl shadow-md shadow-teal-600/20">4</div>
      <h3 class="text-lg font-black text-slate-900 mb-2">Go Live &amp; Recover Fees</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Collect fees with auto challans, send attendance SMS, and print computerized report cards.</p>
     </div>
    </div>
   </div>
  </section>

  <!-- Platform Preview -->
  <section class="py-20 lg:py-28 bg-slate-50/70 border-y border-slate-200/70 relative">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-16 reveal">
     <span class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-blue-50 border border-blue-150 text-blue-700 rounded-full font-bold text-xs uppercase tracking-wider mb-4">
      <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>PLATFORM PREVIEW
     </span>
     <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-slate-950 tracking-tight mb-4">Clean, Fast &amp; Modern UI</h2>
     <p class="text-base sm:text-lg text-slate-600 max-w-2xl mx-auto">Intuitive workflows engineered for non-technical staff and busy administrators</p>
    </div>
    <div class="grid md:grid-cols-3 gap-6 lg:gap-8">
     <!-- Screenshot 1 -->
     <div class="reveal card-hover bg-white rounded-3xl overflow-hidden border border-slate-200/90 shadow-sm flex flex-col justify-between">
      <div class="p-5 sm:p-6 bg-slate-100/70 border-b border-slate-200/80">
       <div class="bg-white rounded-2xl shadow-sm p-4 border border-slate-200/80">
        <div class="flex items-center gap-1.5 mb-3">
         <div class="w-2.5 h-2.5 rounded-full bg-rose-400"></div>
         <div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
         <div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
        </div>
        <div class="space-y-2.5">
         <div class="h-3.5 bg-indigo-100 rounded-full w-2/3"></div>
         <div class="h-16 bg-gradient-to-r from-indigo-50 to-cyan-50 rounded-xl p-2.5 flex items-center justify-between">
          <div class="w-1/2 space-y-1.5">
           <div class="h-3 bg-indigo-200 rounded-full w-3/4"></div>
           <div class="h-2 bg-indigo-100 rounded-full w-1/2"></div>
          </div>
          <div class="w-10 h-10 rounded-xl bg-indigo-600 text-white flex items-center justify-center font-black text-xs">Rs</div>
         </div>
         <div class="grid grid-cols-2 gap-2">
          <div class="h-10 bg-slate-50 border border-slate-100 rounded-xl"></div>
          <div class="h-10 bg-slate-50 border border-slate-100 rounded-xl"></div>
         </div>
        </div>
       </div>
      </div>
      <div class="p-6">
       <h3 class="text-lg font-black text-slate-900 mb-1">Campus Admin Deck</h3>
       <p class="text-sm text-slate-600">Unified overview of daily admissions, attendance, and revenue.</p>
      </div>
     </div>
     <!-- Screenshot 2 -->
     <div class="reveal card-hover bg-white rounded-3xl overflow-hidden border border-slate-200/90 shadow-sm flex flex-col justify-between">
      <div class="p-5 sm:p-6 bg-slate-100/70 border-b border-slate-200/80">
       <div class="bg-white rounded-2xl shadow-sm p-4 border border-slate-200/80">
        <div class="flex items-center gap-1.5 mb-3">
         <div class="w-2.5 h-2.5 rounded-full bg-rose-400"></div>
         <div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
         <div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
        </div>
        <div class="space-y-2.5">
         <div class="h-3.5 bg-cyan-100 rounded-full w-1/2"></div>
         <div class="space-y-2">
          <div class="flex items-center gap-2 p-2 bg-slate-50 rounded-xl">
           <div class="w-6 h-6 bg-cyan-200 rounded-lg"></div>
           <div class="flex-1 h-2.5 bg-slate-200 rounded-full"></div>
          </div>
          <div class="flex items-center gap-2 p-2 bg-slate-50 rounded-xl">
           <div class="w-6 h-6 bg-emerald-200 rounded-lg"></div>
           <div class="flex-1 h-2.5 bg-slate-200 rounded-full"></div>
          </div>
         </div>
        </div>
       </div>
      </div>
      <div class="p-6">
       <h3 class="text-lg font-black text-slate-900 mb-1">Fee Challan Generator</h3>
       <p class="text-sm text-slate-600">1-click 3-part bank voucher generation with custom dues.</p>
      </div>
     </div>
     <!-- Screenshot 3 -->
     <div class="reveal card-hover bg-white rounded-3xl overflow-hidden border border-slate-200/90 shadow-sm flex flex-col justify-between">
      <div class="p-5 sm:p-6 bg-slate-100/70 border-b border-slate-200/80">
       <div class="bg-white rounded-2xl shadow-sm p-4 border border-slate-200/80">
        <div class="flex items-center gap-1.5 mb-3">
         <div class="w-2.5 h-2.5 rounded-full bg-rose-400"></div>
         <div class="w-2.5 h-2.5 rounded-full bg-amber-400"></div>
         <div class="w-2.5 h-2.5 rounded-full bg-emerald-400"></div>
        </div>
        <div class="space-y-2.5">
         <div class="h-3.5 bg-emerald-100 rounded-full w-2/3"></div>
         <div class="h-16 bg-slate-50 border border-slate-100 rounded-xl flex items-end p-2 gap-1.5">
          <div class="w-1/6 h-2/5 bg-indigo-400 rounded-t-sm"></div>
          <div class="w-1/6 h-3/5 bg-cyan-400 rounded-t-sm"></div>
          <div class="w-1/6 h-4/5 bg-emerald-400 rounded-t-sm"></div>
          <div class="w-1/6 h-full bg-indigo-500 rounded-t-sm"></div>
          <div class="w-1/6 h-3/4 bg-cyan-500 rounded-t-sm"></div>
          <div class="w-1/6 h-1/2 bg-emerald-500 rounded-t-sm"></div>
         </div>
        </div>
       </div>
      </div>
      <div class="p-6">
       <h3 class="text-lg font-black text-slate-900 mb-1">DMC &amp; Performance Cards</h3>
       <p class="text-sm text-slate-600">Official Detailed Mark Certificates with QR code scanner.</p>
      </div>
     </div>
    </div>
   </div>
  </section>

  <!-- Pricing -->
  <section id="pricing" class="py-20 lg:py-28 bg-white relative">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-16 reveal">
     <span class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-cyan-50 border border-cyan-150 text-cyan-700 rounded-full font-bold text-xs uppercase tracking-wider mb-4">
      <span class="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>FLEXIBLE PRICING
     </span>
     <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-slate-950 tracking-tight mb-4">Transparent Plans That Fit Your School</h2>
     <p class="text-base sm:text-lg text-slate-600 max-w-2xl mx-auto">Affordable pricing designed for Pakistani schools of every scale</p>
    </div>

    <!-- Custom Package Builder -->
    <div class="reveal mb-12">
     <div class="overflow-hidden rounded-3xl border border-indigo-900/60 bg-gradient-to-br from-slate-950 via-indigo-950 to-slate-900 shadow-2xl shadow-indigo-950/40 relative">
      <div class="grid gap-8 px-6 py-8 sm:px-8 sm:py-10 lg:grid-cols-[1.2fr_0.8fr] lg:p-12 items-center">
       <div class="text-white">
        <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3.5 py-1.5 text-xs font-bold text-cyan-300 border border-white/15">
         <span class="h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span> Instant Custom Package Builder
        </div>
        <h3 class="mt-4 text-2xl sm:text-3xl lg:text-4xl font-black leading-tight">Apni school limits likhein, fee foran dekhein, aur direct proceed karein.</h3>
        <p class="mt-3 text-slate-300 text-sm sm:text-base leading-relaxed">No hidden fees. Select your exact student count and teacher capacity for automatic calculation.</p>
        <div class="mt-6 grid gap-3 text-xs sm:text-sm text-cyan-100 sm:grid-cols-3">
         <div class="rounded-2xl border border-white/15 bg-white/10 px-4 py-3">Base Plan: <span class="font-extrabold text-white block text-base mt-0.5">Rs. <?php echo e(number_format($baseFeeCfg, 0)); ?></span></div>
         <div class="rounded-2xl border border-white/15 bg-white/10 px-4 py-3">Included: <span class="font-extrabold text-white block text-base mt-0.5"><?php echo e((string) $includedStudentsCfg); ?> Students</span></div>
         <div class="rounded-2xl border border-white/15 bg-white/10 px-4 py-3">Extra Student: <span class="font-extrabold text-white block text-base mt-0.5">Rs. <?php echo e(number_format($extraPerStudentCfg, 0)); ?></span></div>
        </div>
       </div>
       <div class="rounded-3xl bg-white p-6 sm:p-7 text-slate-900 shadow-2xl">
        <div class="grid grid-cols-2 gap-3 mb-5">
         <button type="button" class="custom-package-type rounded-xl border border-slate-200 px-4 py-3 text-xs sm:text-sm font-bold text-slate-600 transition-all data-[active=true]:border-indigo-600 data-[active=true]:bg-indigo-50 data-[active=true]:text-indigo-700" data-package-type="monthly" data-active="true">Monthly Plan</button>
         <button type="button" class="custom-package-type rounded-xl border border-slate-200 px-4 py-3 text-xs sm:text-sm font-bold text-slate-600 transition-all data-[active=true]:border-indigo-600 data-[active=true]:bg-indigo-50 data-[active=true]:text-indigo-700" data-package-type="yearly" data-active="false">Yearly Plan (Discounted)</button>
        </div>
        <div class="grid gap-4 sm:grid-cols-2 mb-4">
         <label class="block">
          <span class="mb-1.5 block text-xs font-bold text-slate-700">Students Limit</span>
          <input id="customPackageStudents" type="number" min="1" value="<?php echo e((string) $includedStudentsCfg); ?>" class="w-full rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-bold text-slate-900 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20">
         </label>
         <label class="block">
          <span class="mb-1.5 block text-xs font-bold text-slate-700">Teachers Limit</span>
          <input id="customPackageTeachers" type="number" min="1" value="30" class="w-full rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-bold text-slate-900 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20">
         </label>
        </div>
        <label class="block mb-4">
         <span class="mb-1.5 block text-xs font-bold text-slate-700">Package Label</span>
         <input id="customPackagePlanName" type="text" value="Custom Campus Plan" class="w-full rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-bold text-slate-900 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20">
        </label>
        <div class="rounded-2xl bg-slate-50 border border-slate-100 p-4 mb-5">
         <div class="flex items-center justify-between text-xs sm:text-sm text-slate-500 mb-1.5"><span>Billing Cycle</span><span id="customPackageLabel" class="font-extrabold text-slate-800">Monthly</span></div>
         <div class="flex items-center justify-between text-xs sm:text-sm text-slate-500 mb-2"><span>Auto Calculated Fee</span><span id="customPackageAutoFee" class="font-extrabold text-slate-800">Rs. 0</span></div>
         <div class="flex items-center justify-between border-t border-slate-200/80 pt-2"><span class="font-bold text-slate-700">Final Fee:</span><span id="customPackageFinalFee" class="text-2xl font-black text-indigo-700">Rs. 0</span></div>
         <p id="customPackageHelp" class="mt-2 text-[11px] leading-4 text-slate-500"></p>
        </div>
        <a id="customPackageCta" href="register.php" class="btn-primary inline-flex w-full items-center justify-center gap-2 px-5 py-3.5 text-center text-sm font-bold text-white">
         Continue to Register
         <svg class="h-4 w-4" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
        </a>
       </div>
      </div>
     </div>
    </div>

    <!-- Ready Plans Grid -->
    <div class="grid md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto">
     <?php foreach ($landingPlans as $planIndex => $plan): ?>
     <?php
     $isFeaturedPlan = $planIndex === 1;
     $planName = trim((string) ($plan['name'] ?? 'Plan'));
     $planSubtitle = trim((string) ($plan['subtitle'] ?? ''));
     $planPrice = trim((string) ($plan['price'] ?? ''));
     $planPeriod = trim((string) ($plan['period'] ?? ''));
     $planStudentsText = trim((string) ($plan['students_text'] ?? ''));
     $planCta = trim((string) ($plan['cta'] ?? 'Get Started'));
     $planFeatures = array_values(array_filter(array_map(static fn($feature) => trim((string) $feature), is_array($plan['features'] ?? null) ? $plan['features'] : []), static fn($feature) => $feature !== ''));
     ?>
     <div class="reveal card-hover <?php echo $isFeaturedPlan ? 'bg-gradient-to-br from-indigo-600 via-indigo-700 to-cyan-600 text-white relative transform lg:-translate-y-2 shadow-2xl shadow-indigo-600/25 border-0' : 'bg-white border border-slate-200/90 shadow-sm text-slate-900'; ?> rounded-3xl p-7 lg:p-8 flex flex-col justify-between">
      <?php if ($isFeaturedPlan): ?>
      <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-emerald-500 to-teal-500 text-white px-4 py-1 rounded-full text-xs font-black uppercase tracking-wider shadow-md">
       Most Popular
      </div>
      <?php endif; ?>
      <div>
       <div class="text-center mb-8">
        <h3 class="text-xl font-black <?php echo $isFeaturedPlan ? 'text-white' : 'text-slate-900'; ?> mb-2"><?php echo e($planName); ?></h3>
        <p class="<?php echo $isFeaturedPlan ? 'text-indigo-100' : 'text-slate-500'; ?> text-xs sm:text-sm mb-4"><?php echo e($planSubtitle); ?></p>
        <div class="flex items-baseline justify-center gap-1">
         <span class="text-3xl sm:text-4xl font-black <?php echo $isFeaturedPlan ? 'text-white' : 'text-slate-900'; ?>"><?php echo e($planPrice); ?></span>
         <span class="<?php echo $isFeaturedPlan ? 'text-indigo-200' : 'text-slate-500'; ?> text-xs font-bold"><?php echo e($planPeriod); ?></span>
        </div>
        <p class="text-xs font-bold <?php echo $isFeaturedPlan ? 'text-cyan-200' : 'text-indigo-600'; ?> mt-2"><?php echo e($planStudentsText); ?></p>
       </div>
       <ul class="space-y-3.5 mb-8 text-xs sm:text-sm">
        <?php foreach ($planFeatures as $feature): ?>
        <li class="flex items-center gap-2.5">
         <svg class="w-4 h-4 <?php echo $isFeaturedPlan ? 'text-cyan-300' : 'text-indigo-600'; ?> flex-shrink-0" fill="currentColor" viewbox="0 0 20 20">
          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
         </svg>
         <span class="<?php echo $isFeaturedPlan ? 'text-slate-100 font-medium' : 'text-slate-700'; ?>"><?php echo e($feature); ?></span>
        </li>
        <?php endforeach; ?>
       </ul>
      </div>
      <div>
       <a href="register.php" class="w-full <?php echo $isFeaturedPlan ? 'bg-white text-indigo-700 hover:bg-slate-50 shadow-lg' : 'btn-secondary text-slate-800'; ?> py-3.5 font-bold rounded-2xl transition-all inline-block text-center text-sm">
        <?php echo e($planCta); ?>
       </a>
      </div>
     </div>
     <?php endforeach; ?>
    </div>
   </div>
  </section>

  <!-- Commission Section -->
  <section id="get-commission" class="py-20 lg:py-28 bg-slate-50/70 border-t border-slate-200/70 relative">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid gap-10 lg:grid-cols-[1.1fr_0.9fr] items-start">
     <div class="reveal">
      <span class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-emerald-50 border border-emerald-150 text-emerald-700 rounded-full font-bold text-xs uppercase tracking-wider mb-4">
       <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>PARTNER &amp; EARN
      </span>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-slate-950 tracking-tight mb-5">Schools Refer Karein, Recurring Monthly Income Banayein</h2>
      <p class="text-sm sm:text-base text-slate-600 leading-relaxed mb-6">Agar aap education network, school owners, teachers ya computer consultants ke sath connect hain, to aap <?php echo e($systemName); ?> ke partner program ka hissa ban sakte hain. Aap ke referral se onboard hone wale har active school se monthly subscription ka <span class="font-black text-emerald-600">35% recurring commission</span> aap ko milta hai.</p>
      
      <div class="grid sm:grid-cols-3 gap-4 mb-6">
       <div class="rounded-3xl border border-emerald-200 bg-white p-5 shadow-xs">
        <div class="text-xs font-bold text-emerald-700 mb-1 uppercase tracking-wider">1 Active School</div>
        <div class="text-2xl sm:text-3xl font-black text-slate-950"><?php echo e(number_format($commissionRatePct)); ?>%</div>
        <p class="mt-2 text-xs text-slate-600 leading-relaxed">Rs. <?php echo e(number_format($commissionExamplePlanRs, 0)); ?>/mo plan par aap ko <span class="font-bold text-emerald-600">Rs. <?php echo e(number_format($commissionOneSchoolRs, 0)); ?></span> har mahine recurring milenge.</p>
       </div>
       <div class="rounded-3xl border border-cyan-200 bg-white p-5 shadow-xs">
        <div class="text-xs font-bold text-cyan-700 mb-1 uppercase tracking-wider">2 Active Schools</div>
        <div class="text-2xl sm:text-3xl font-black text-slate-950">70%</div>
        <p class="mt-2 text-xs text-slate-600 leading-relaxed">2 active schools se around <span class="font-bold text-cyan-600">Rs. <?php echo e(number_format($commissionTwoSchoolsRs, 0)); ?></span> monthly continuous cashflow banta hai.</p>
       </div>
       <div class="rounded-3xl border border-indigo-200 bg-white p-5 shadow-xs">
        <div class="text-xs font-bold text-indigo-700 mb-1 uppercase tracking-wider">5 Active Schools</div>
        <div class="text-2xl sm:text-3xl font-black text-slate-950">175%</div>
        <p class="mt-2 text-xs text-slate-600 leading-relaxed">5 schools par monthly earning <span class="font-bold text-indigo-600">Rs. <?php echo e(number_format($commissionFiveSchoolsRs, 0)); ?></span>/month tak continuous flow build karti hai.</p>
       </div>
      </div>
      <div class="rounded-3xl bg-[#0a0f1d] text-white p-6 sm:p-7 border border-slate-800 shadow-xl">
       <h3 class="text-lg sm:text-xl font-black mb-2 flex items-center gap-2"><span>📈</span> Compounding Recurring Model</h3>
       <p class="text-xs sm:text-sm text-slate-300 leading-relaxed">Pehle school se continuous income shuru hoti hai. Agla school uske upar nayi stream add karta hai. Jab tak school active rehta hai, aap ka commission har mahine account me transfer hota rehta hai.</p>
      </div>
     </div>
     <div class="reveal">
      <div class="rounded-3xl border border-slate-200/90 bg-white p-6 sm:p-8 shadow-xl">
       <div class="inline-flex items-center gap-2 rounded-full bg-indigo-50 border border-indigo-150 px-3.5 py-1 text-xs font-bold text-indigo-700">Commission Partner Form 🤝</div>
       <h3 class="mt-4 text-2xl font-black text-slate-900">Apni details submit karein</h3>
       <p class="mt-2 text-sm text-slate-600 leading-relaxed">Form save hote hi aap ka worker profile live ho jata hai aur reference schools aap ke profile ke sath link ho jate hain.</p>
       <div class="mt-5 space-y-3 text-xs sm:text-sm text-slate-600">
        <div class="flex items-center gap-3"><span class="text-base">📍</span><span>City &amp; Area based proper worker tracking.</span></div>
        <div class="flex items-center gap-3"><span class="text-base">📲</span><span>Direct WhatsApp updates &amp; support desk.</span></div>
        <div class="flex items-center gap-3"><span class="text-base">🏫</span><span>Referred school links directly to your commission balance.</span></div>
       </div>
       <button type="button" data-open-worker-modal="true" class="btn-primary mt-6 inline-flex w-full items-center justify-center gap-2 px-6 py-4 text-base font-bold text-white">Open Commission Worker Form ✍️</button>
       <?php if ($workerFormSuccess): ?>
         <div class="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-xs font-bold text-emerald-800">Application submit ho gayi hai. Hamari team aap ko contact karegi, InshaAllah. 🌟</div>
       <?php endif; ?>
      </div>
     </div>
    </div>
   </div>
  </section>

  <!-- FAQ Section -->
  <section class="py-20 lg:py-28 bg-white relative">
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-16 reveal">
     <span class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-cyan-50 border border-cyan-150 text-cyan-700 rounded-full font-bold text-xs uppercase tracking-wider mb-4">
      <span class="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>HELP &amp; FAQ
     </span>
     <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-slate-950 tracking-tight mb-4">Frequently Asked Questions</h2>
     <p class="text-base sm:text-lg text-slate-600">Common questions about <?php echo e($systemName); ?></p>
    </div>
    <div class="space-y-4" id="faqContainer">
     <!-- FAQ Item 1 -->
     <div class="reveal bg-slate-50/70 rounded-2xl border border-slate-200/90 overflow-hidden">
      <button class="faq-btn w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
       <span class="font-extrabold text-slate-900 text-base sm:text-lg">How long does it take to implement the system?</span>
       <svg class="faq-icon w-5 h-5 text-indigo-600 transform transition-transform" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
      </button>
      <div class="faq-content px-5 sm:px-6 pb-6">
       <p class="text-sm text-slate-600 leading-relaxed">Most schools are operational in under 24 hours. Data import from Excel takes 1-2 hours, and our team provides live assistance over WhatsApp &amp; screen share.</p>
      </div>
     </div>
     <!-- FAQ Item 2 -->
     <div class="reveal bg-slate-50/70 rounded-2xl border border-slate-200/90 overflow-hidden">
      <button class="faq-btn w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
       <span class="font-extrabold text-slate-900 text-base sm:text-lg">Is our school data secure and private?</span>
       <svg class="faq-icon w-5 h-5 text-indigo-600 transform transition-transform" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
      </button>
      <div class="faq-content px-5 sm:px-6 pb-6">
       <p class="text-sm text-slate-600 leading-relaxed">Yes. We use 256-bit SSL encryption, automated daily off-site backups, and strict database isolation so only authorized administrators from your campus can access it.</p>
      </div>
     </div>
     <!-- FAQ Item 3 -->
     <div class="reveal bg-slate-50/70 rounded-2xl border border-slate-200/90 overflow-hidden">
      <button class="faq-btn w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
       <span class="font-extrabold text-slate-900 text-base sm:text-lg">Can we import our existing student &amp; fee records?</span>
       <svg class="faq-icon w-5 h-5 text-indigo-600 transform transition-transform" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
      </button>
      <div class="faq-content px-5 sm:px-6 pb-6">
       <p class="text-sm text-slate-600 leading-relaxed">Yes! You can easily upload Excel/CSV sheets, and our free migration support guarantees all your students, parents' phone numbers, and past balances are intact.</p>
      </div>
     </div>
     <!-- FAQ Item 4 -->
     <div class="reveal bg-slate-50/70 rounded-2xl border border-slate-200/90 overflow-hidden">
      <button class="faq-btn w-full flex items-center justify-between p-5 sm:p-6 text-left" onclick="toggleFaq(this)">
       <span class="font-extrabold text-slate-900 text-base sm:text-lg">Can students or parents verify results online?</span>
       <svg class="faq-icon w-5 h-5 text-indigo-600 transform transition-transform" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
      </button>
      <div class="faq-content px-5 sm:px-6 pb-6">
       <p class="text-sm text-slate-600 leading-relaxed">Yes! The portal features a dedicated public Result Verification section where parents can enter their registered phone number or roll number to view and print official A4 DMC certificates with QR validation.</p>
      </div>
     </div>
    </div>
   </div>
  </section>

  <!-- Final CTA -->
  <section class="py-20 lg:py-24 bg-gradient-to-r from-indigo-900 via-indigo-950 to-slate-950 text-white relative overflow-hidden border-t border-indigo-900/40">
   <div class="ambient-glow-indigo top-0 left-1/4 opacity-40"></div>
   <div class="ambient-glow-cyan bottom-0 right-1/4 opacity-30"></div>
   <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
    <div class="reveal">
     <h2 class="text-3xl sm:text-4xl lg:text-5xl font-black text-white tracking-tight mb-4">Ready to Modernize Your School?</h2>
     <p class="text-base sm:text-lg text-slate-300 mb-8 max-w-2xl mx-auto">Join 500+ schools across Pakistan. Start your instant demo account in less than 60 seconds.</p>
     <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
      <button type="button" data-open-demo-modal="true" class="btn-result-portal px-8 py-4 text-base font-black rounded-2xl flex items-center justify-center gap-2 shadow-xl shadow-teal-500/20">
       Create Instant Demo Account 🚀
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
      </button>
      <a href="check_result.php" class="btn-secondary px-8 py-4 text-base font-bold rounded-2xl flex items-center justify-center gap-2">
       Online Result Portal 📄
      </a>
     </div>
     <p class="text-slate-400 mt-6 text-xs font-semibold">No credit card required • Instant automated setup • Full Urdu/English support</p>
    </div>
   </div>
  </section>
<footer id="contact" class="bg-[#080c17] pt-16 pb-8 border-t border-slate-800/80">
   <?php
     $footerCompanyName = (string) ($footerSettings['company_name'] ?? 'School Markaz');
     $footerTagline = (string) ($footerSettings['company_tagline'] ?? '');
     $footerQuickLinks = is_array($footerSettings['quick_links'] ?? null) ? $footerSettings['quick_links'] : [];
     $footerSupportLinks = is_array($footerSettings['support_links'] ?? null) ? $footerSettings['support_links'] : [];
     $footerSocial = is_array($footerSettings['social_links'] ?? null) ? $footerSettings['social_links'] : [];
     $footerAddress = (string) ($footerSettings['contact_address'] ?? '');
     $footerPhone = (string) ($footerSettings['contact_phone'] ?? '');
     $footerEmail = (string) ($footerSettings['contact_email'] ?? '');
     $footerWhatsapp = (string) ($footerSettings['contact_whatsapp'] ?? '');
     $footerCopyright = (string) ($footerSettings['copyright_text'] ?? '');
     $footerMadeWith = (string) ($footerSettings['made_with_text'] ?? '');
     $twitterHref = trim((string) ($footerSocial['twitter'] ?? '#'));
     $facebookHref = trim((string) ($footerSocial['facebook'] ?? '#'));
     $linkedinHref = trim((string) ($footerSocial['linkedin'] ?? '#'));
     $whatsappHref = trim((string) ($footerSocial['whatsapp'] ?? '#'));
   ?>
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12"><!-- Company Info -->
     <div><a href="#" class="flex items-center gap-3 mb-6">
       <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 via-indigo-700 to-cyan-500 flex items-center justify-center shadow-md shadow-indigo-500/20 group-hover:scale-105 transition-transform">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
        </svg>
       </div><span class="text-xl font-bold text-white"><?php echo e($footerCompanyName); ?></span> </a>
      <p class="text-gray-400 mb-6"><?php echo e($footerTagline); ?></p>
      <div class="flex gap-4"><a href="<?php echo e($twitterHref !== '' ? $twitterHref : '#'); ?>" class="w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-cyan-600 hover:text-white transition-colors">
        <svg class="w-5 h-5" fill="currentColor" viewbox="0 0 24 24">
         <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
        </svg></a> <a href="<?php echo e($facebookHref !== '' ? $facebookHref : '#'); ?>" class="w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-cyan-600 hover:text-white transition-colors">
        <svg class="w-5 h-5" fill="currentColor" viewbox="0 0 24 24">
         <path d="M22.675 0h-21.35c-.732 0-1.325.593-1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-1.325-1.325z" />
        </svg></a> <a href="<?php echo e($linkedinHref !== '' ? $linkedinHref : '#'); ?>" class="w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-cyan-600 hover:text-white transition-colors">
        <svg class="w-5 h-5" fill="currentColor" viewbox="0 0 24 24">
         <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667h-3.554v-11.452h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zm-15.11-13.019c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019h-3.564v-11.452h3.564v11.452zm15.106-20.452h-20.454c-.979 0-1.771.774-1.771 1.729v20.542c0 .956.792 1.729 1.771 1.729h20.451c.978 0 1.778-.773 1.778-1.729v-20.542c0-.955-.8-1.729-1.778-1.729z" />
        </svg></a> <a href="<?php echo e($whatsappHref !== '' ? $whatsappHref : '#'); ?>" class="w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center text-gray-400 hover:bg-green-600 hover:text-white transition-colors">
        <svg class="w-5 h-5" fill="currentColor" viewbox="0 0 24 24">
         <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-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297c-2.198-2.2-5.126-3.411-8.235-3.414-6.423 0-11.65 5.224-11.653 11.647 0 2.052.534 4.053 1.548 5.822l-1.647 6.011 6.155-1.614a11.6 11.6 0 005.568 1.42h.005c6.42 0 11.649-5.225 11.652-11.648 0-3.107-1.21-6.032-3.393-8.224" />
        </svg></a>
      </div>
     </div><!-- Quick Links -->
     <div>
      <h4 class="font-bold text-white text-lg mb-6">Quick Links</h4>
      <ul class="space-y-3">
       <?php foreach ($footerQuickLinks as $lnk): ?>
       <?php if (!is_array($lnk)) continue; $lbl = trim((string) ($lnk['label'] ?? '')); $url = trim((string) ($lnk['url'] ?? '#')); if ($lbl === '') continue; ?>
       <li><a href="<?php echo e($url !== '' ? $url : '#'); ?>" class="text-gray-400 hover:text-cyan-400 transition-colors"><?php echo e($lbl); ?></a></li>
       <?php endforeach; ?>
      </ul>
     </div><!-- Support -->
     <div>
      <h4 class="font-bold text-white text-lg mb-6">Support</h4>
      <ul class="space-y-3">
       <?php foreach ($footerSupportLinks as $lnk): ?>
       <?php if (!is_array($lnk)) continue; $lbl = trim((string) ($lnk['label'] ?? '')); $url = trim((string) ($lnk['url'] ?? '#')); if ($lbl === '') continue; ?>
       <li><a href="<?php echo e($url !== '' ? $url : '#'); ?>" class="text-gray-400 hover:text-cyan-400 transition-colors"><?php echo e($lbl); ?></a></li>
       <?php endforeach; ?>
      </ul>
     </div><!-- Contact -->
     <div>
      <h4 class="font-bold text-white text-lg mb-6">Contact Us</h4>
      <ul class="space-y-4">
       <li class="flex items-start gap-3">
        <svg class="w-5 h-5 text-cyan-500 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg><span class="text-gray-400"><?php echo e($footerAddress); ?></span></li>
       <li class="flex items-center gap-3">
        <svg class="w-5 h-5 text-cyan-500 flex-shrink-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
        </svg><span class="text-gray-400"><?php echo e($footerPhone); ?></span></li>
       <li class="flex items-center gap-3">
        <svg class="w-5 h-5 text-cyan-500 flex-shrink-0" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg><span class="text-gray-400"><?php echo e($footerEmail); ?></span></li>
       <li class="flex items-center gap-3">
        <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="currentColor" viewbox="0 0 24 24"><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-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297c-2.198-2.2-5.126-3.411-8.235-3.414-6.423 0-11.65 5.224-11.653 11.647 0 2.052.534 4.053 1.548 5.822l-1.647 6.011 6.155-1.614a11.6 11.6 0 005.568 1.42h.005c6.42 0 11.649-5.225 11.652-11.648 0-3.107-1.21-6.032-3.393-8.224" />
        </svg><span class="text-gray-400"><?php echo e($footerWhatsapp); ?></span></li>
      </ul>
     </div>
    </div>
    <div class="border-t border-gray-800 pt-8">
     <div class="flex flex-col md:flex-row justify-between items-center gap-4">
      <p class="text-gray-500 text-sm"><?php echo e($footerCopyright); ?></p>
      <p class="text-gray-500 text-sm"><?php echo e($footerMadeWith); ?></p>
     </div>
    </div>
   </div>
  </footer>
  <div id="commissionWorkerModal" class="fixed inset-0 z-[80] hidden overflow-y-auto bg-slate-900/65 p-4">
   <div class="flex min-h-full items-center justify-center py-4">
    <div class="w-full max-w-2xl max-h-[calc(100vh-2rem)] overflow-y-auto rounded-[2rem] bg-white shadow-2xl shadow-slate-950/30">
     <div class="flex items-start justify-between gap-4 border-b border-slate-100 px-6 py-5">
      <div>
       <p class="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-600">Commission Worker</p>
       <h3 class="mt-1 text-2xl font-extrabold text-slate-900">Work With Us as a Commission Worker 💼</h3>
       <p class="mt-2 text-sm text-slate-500">Apni basic details bhejein. Team aap ko super admin panel se manage karegi.</p>
      </div>
      <button type="button" data-close-worker-modal="true" class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 text-slate-500 hover:bg-slate-50">X</button>
     </div>
     <form method="post" class="px-6 py-6 space-y-5">
      <input type="hidden" name="action" value="commission_worker_apply">
      <?php if ($workerFormError !== ''): ?>
        <div class="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700"><?php echo e($workerFormError); ?></div>
      <?php endif; ?>
      <div class="grid gap-5 sm:grid-cols-2">
       <label class="block">
        <span class="mb-2 block text-sm font-medium text-slate-700">Name *</span>
        <input type="text" name="name" value="<?php echo e($workerFormOld['name']); ?>" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20" required>
       </label>
       <label class="block">
        <span class="mb-2 block text-sm font-medium text-slate-700">WhatsApp Contact *</span>
        <input type="text" name="whatsapp" value="<?php echo e($workerFormOld['whatsapp']); ?>" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20" required>
       </label>
       <label class="block">
        <span class="mb-2 block text-sm font-medium text-slate-700">Area *</span>
        <input type="text" name="area" value="<?php echo e($workerFormOld['area']); ?>" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20" required>
       </label>
       <label class="block">
        <span class="mb-2 block text-sm font-medium text-slate-700">City *</span>
        <input type="text" name="city" value="<?php echo e($workerFormOld['city']); ?>" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20" required>
       </label>
      </div>
      <label class="block">
       <span class="mb-2 block text-sm font-medium text-slate-700">Experience / Network</span>
       <input type="text" name="experience" value="<?php echo e($workerFormOld['experience']); ?>" placeholder="e.g. private schools network, education consultant" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20">
      </label>
      <label class="block">
       <span class="mb-2 block text-sm font-medium text-slate-700">Message</span>
       <textarea name="message" rows="4" placeholder="Apni availability ya reference background likh dein..." class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20"><?php echo e($workerFormOld['message']); ?></textarea>
      </label>
      <div class="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-600">Har referred active school ke liye monthly 35% commission model ko track kiya jayega. 📊</div>
      <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
       <button type="button" data-close-worker-modal="true" class="rounded-2xl border border-slate-200 px-5 py-3 font-semibold text-slate-700 hover:bg-slate-50">Cancel</button>
       <button type="submit" class="btn-primary px-6 py-3.5 font-bold text-white text-sm">Submit Application 🚀</button>
      </div>
     </form>
    </div>
   </div>
  </div>
  <div id="createDemoModal" class="fixed inset-0 z-[90] hidden overflow-y-auto bg-slate-900/70 p-4">
   <div class="flex min-h-full items-start justify-center py-6 sm:items-center">
    <div class="w-full max-w-3xl max-h-[calc(100vh-2rem)] overflow-y-auto rounded-[2rem] bg-white shadow-2xl shadow-slate-950/30">
     <div class="sticky top-0 z-10 flex items-start justify-between gap-4 border-b border-slate-100 bg-white px-6 py-5">
      <div>
       <p class="text-sm font-semibold uppercase tracking-[0.2em] text-cyan-600"><?php echo ($demoDaysCfg === 1) ? '24 Hour Demo' : ($demoDaysCfg . ' Day Demo'); ?></p>
       <h3 class="mt-1 text-2xl font-extrabold text-slate-900">Create Demo Account</h3>
       <p class="mt-2 text-sm text-slate-500">Form fill karte hi demo account active ho jayega. Super admin activation ki zarurat nahi hogi.</p>
      </div>
      <button type="button" data-close-demo-modal="true" class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-slate-200 text-slate-500 hover:bg-slate-50">X</button>
     </div>
     <form method="post" class="px-6 py-6 space-y-5">
      <input type="hidden" name="action" value="create_landing_demo">
      <input type="hidden" id="device_previously_registered" name="device_previously_registered" value="0">
      <?php if ($demoFormError !== ''): ?>
        <div class="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-medium text-red-700"><?php echo e($demoFormError); ?></div>
      <?php endif; ?>
      <div class="rounded-2xl border border-cyan-100 bg-cyan-50 px-4 py-3 text-sm text-cyan-800">
       Demo mein core workflow open rahega, lekin backup/import, family wise system, bulk tools, branding aur data extractor jaise advanced features locked rahenge.
      </div>
      <div class="grid gap-5 sm:grid-cols-2">
       <label class="block sm:col-span-2">
        <span class="mb-2 block text-sm font-medium text-slate-700">School Name *</span>
        <input type="text" name="school_name" value="<?php echo e($demoFormOld['school_name']); ?>" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20" required>
       </label>
       <label class="block">
        <span class="mb-2 block text-sm font-medium text-slate-700">Admin Name *</span>
        <input type="text" name="admin_name" value="<?php echo e($demoFormOld['admin_name']); ?>" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20" required>
       </label>
       <label class="block">
        <span class="mb-2 block text-sm font-medium text-slate-700">WhatsApp Contact *</span>
        <input type="text" name="whatsapp" value="<?php echo e($demoFormOld['whatsapp']); ?>" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20" required>
       </label>
       <label class="block">
        <span class="mb-2 block text-sm font-medium text-slate-700">City *</span>
        <input type="text" name="city" value="<?php echo e($demoFormOld['city']); ?>" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20" required>
       </label>
       <label class="block">
        <span class="mb-2 block text-sm font-medium text-slate-700">Email</span>
        <input type="email" name="email" value="<?php echo e($demoFormOld['email']); ?>" class="w-full rounded-2xl border border-slate-200 px-4 py-3 text-slate-800 outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-500/20">
       </label>
      </div>
      <div class="grid gap-3 rounded-2xl bg-slate-50 px-4 py-4 text-sm text-slate-600 sm:grid-cols-3">
       <div><span class="block font-bold text-slate-900"><?php echo ($demoDaysCfg === 1) ? '24 hours' : ($demoDaysCfg . ' days'); ?></span>Live countdown dashboard par show hoga.</div>
       <div><span class="block font-bold text-slate-900"><?php echo (int) $demoStudentsCfg; ?> students</span>Demo student limit.</div>
       <div><span class="block font-bold text-slate-900"><?php echo (int) $demoTeachersCfg; ?> teachers</span>Demo teacher limit.</div>
      </div>
      <div class="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
       <button type="button" data-close-demo-modal="true" class="rounded-2xl border border-slate-200 px-5 py-3 font-semibold text-slate-700 hover:bg-slate-50">Cancel</button>
       <button type="submit" class="btn-result-portal px-6 py-3.5 font-bold text-white text-sm">Activate Demo 🚀</button>
      </div>
     </form>
    </div>
   </div>
  </div>
  <script type="application/json" id="school-markaz-landing-config"><?php echo json_encode(['openDemoModalOnLoad' => $demoFormError !== ''], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?></script>
  <script>var plans = <?php echo json_encode(array_values($landingPlans), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?>;</script>
  <script type="application/json" id="school-markaz-landing-pricing-config"><?php echo json_encode([
    'basePackageRs' => $baseFeeCfg,
    'includedStudents' => $includedStudentsCfg,
    'extraStudentRateRs' => $extraPerStudentCfg,
    'yearlyDiscountPct' => $yearlyDiscountPctCfg,
    'monthlyDefaultStudents' => $includedStudentsCfg,
    'monthlyDefaultTeachers' => 30,
    'yearlyDefaultStudents' => $includedStudentsCfg,
    'yearlyDefaultTeachers' => 30,
  ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?></script>
  <script type="application/json" id="school-markaz-landing-track-config"><?php echo json_encode([
    'enabled' => $shouldTrackVisit,
    'path' => trim((string) ($_SERVER['REQUEST_URI'] ?? '/')),
    'event_date' => $todayKey,
  ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); ?></script>
  <?php $landingJsVersion = is_file(__DIR__ . '/assets/js/landing.min.js') ? (string) filemtime(__DIR__ . '/assets/js/landing.min.js') : '1'; ?>
  <script src="assets/js/landing.min.js?v=<?php echo htmlspecialchars($landingJsVersion, ENT_QUOTES, 'UTF-8'); ?>"></script>
  <script>
     (function() {
         var cookieKey = '__sm_demo_registered';
         var hasCookie = document.cookie.split('; ').some(function(row) { return row.startsWith(cookieKey + '='); });
         var hasLocal = false;
         var hasSession = false;
         try { hasLocal = localStorage.getItem(cookieKey) === '1'; } catch(e) {}
         try { hasSession = sessionStorage.getItem(cookieKey) === '1'; } catch(e) {}

         if (hasCookie || hasLocal || hasSession) {
             try {
                 if (!hasCookie) {
                     var d = new Date();
                     d.setTime(d.getTime() + (10 * 365 * 24 * 60 * 60 * 1000)); // 10 years
                     document.cookie = cookieKey + "=1; expires=" + d.toUTCString() + "; path=/";
                 }
                 if (!hasLocal) localStorage.setItem(cookieKey, '1');
                 if (!hasSession) sessionStorage.setItem(cookieKey, '1');
             } catch(e) {}

             var prevField = document.getElementById('device_previously_registered');
             if (prevField) {
                 prevField.value = '1';
             }
         }
     })();
   </script>
 <?php require __DIR__ . '/includes/install_app_widget.php'; ?>
 </body>
</html>