<?php
/**
 * ═══════════════════════════════════════════════════════════════════════════
 * صفحة الشراء والترويج — SmartLab نظام إدارة المختبرات
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * الوصف:
 *   صفحة ترويجية احترافية لشرح نظام المختبرات وتعريف الزوار بخطط الاشتراك.
 *   تعرض بشكل واضح وجذاب: Multi-Tenant، Multi-Branch، ومكونات النظام كاملة.
 *
 * المسار: index.php?page=purchase
 *
 * المميزات:
 *   • شرح مفصل لـ Multi-Tenant و Multi-Branch
 *   • دليل بصري لمسار العمل والإدارة
 *   • عرض خطط الاشتراك الديناميكية من قاعدة البيانات
 *   • تصميم متجاوب مع الخط العربي (تاجول)
 *
 * التبعيات: $db (PDO) — يجب أن يكون متاحاً من السكربت الرئيسي
 *
 * @author  نظام إدارة المختبرات
 * @version 1.0
 * @since   2025
 * ═══════════════════════════════════════════════════════════════════════════
 */

// ═══════════════════════════════════════════════════════════════════════════
// تحميل خطط الاشتراك من قاعدة البيانات
// ═══════════════════════════════════════════════════════════════════════════
$plans = [];
try {
    $stmt = $db->query('SELECT id, code, name, max_branches, max_users, COALESCE(price_monthly, 0) AS price_monthly FROM subscription_plans ORDER BY price_monthly ASC');
    $plans = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (Throwable $e) {
    // في حال الفشل: صفحة تعمل بدون خطط (تُظهر رابط التسجيل فقط)
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <!-- ─── Meta & Resources ─────────────────────────────────────────────── -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%230f766e'/%3E%3Ctext x='50%25' y='50%25' font-family='Arial' font-size='28' font-weight='bold' fill='white' text-anchor='middle' dominant-baseline='central'%3ESL%3C/text%3E%3C/svg%3E">
    <title>SmartLab | نظام إدارة المختبرات — منصة البرمجيات كخدمة</title>
    <meta name="description" content="SmartLab - نظام إدارة مختبرات طبية متكامل. Multi-Tenant و Multi-Branch. اشترك الآن واحصل على منصة البرمجيات كخدمة احترافية لمختبرك.">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /*
        ╔═══════════════════════════════════════════════════════════════════════╗
        ║  فهرس الأنماط (CSS Index)                                              ║
        ╠═══════════════════════════════════════════════════════════════════════╣
        ║  1.Variables 2.Body 3.Header 4.Hero 5.Sections 6.Multi/Plan            ║
        ║  7.Features 8.CTA 9.Footer 10.Detail 11.Explain 12.TOC/Flow 13.Responsive║
        ╚═══════════════════════════════════════════════════════════════════════╝
        */

        /* 1. متغيرات اللون والثيم */
        :root {
            --pro-primary: #0f766e;
            --pro-primary-light: #0d9488;
            --pro-slate: #334155;
            --pro-slate-light: #64748b;
            --pro-bg: #f8fafc;
            --pro-border: #e2e8f0;
            --pro-card: #ffffff;
            --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
            --shadow-lg: 0 12px 40px rgba(15,118,110,0.12);
        }
        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }

        /* شريط التقدم (Scroll Progress) */
        .scroll-progress {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--pro-primary), var(--pro-primary-light));
            transform-origin: 100% 0; /* من اليمين في RTL */
            transform: scaleX(0);
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .scroll-progress.visible { opacity: 1; }

        /* زر العودة للأعلى */
        .back-to-top {
            position: fixed;
            bottom: 28px;
            left: 28px;
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--pro-primary), var(--pro-primary-light));
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 1.3rem;
            box-shadow: 0 4px 20px rgba(15,118,110,0.4);
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.4s var(--ease-out-expo);
            z-index: 900;
        }
        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .back-to-top:hover {
            transform: translateY(-4px) scale(1.08);
            box-shadow: 0 8px 28px rgba(15,118,110,0.5);
            color: #fff;
        }

        /* شريط الثقة */
        .trust-bar {
            background: var(--pro-card);
            border-bottom: 1px solid var(--pro-border);
            padding: 28px 24px;
            margin-top: -1px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
        }
        .trust-bar-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 24px;
            text-align: center;
        }
        .trust-item {
            padding: 16px;
            border-radius: 12px;
            transition: all 0.35s var(--ease-out-expo);
        }
        .trust-item:hover {
            background: rgba(15,118,110,0.06);
            transform: translateY(-2px);
        }
        .trust-item { animation: fadeInUp 0.6s var(--ease-out-expo) both; }
        .trust-item:nth-child(1) { animation-delay: 0.1s; }
        .trust-item:nth-child(2) { animation-delay: 0.2s; }
        .trust-item:nth-child(3) { animation-delay: 0.3s; }
        .trust-item:nth-child(4) { animation-delay: 0.4s; }
        .trust-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; filter: grayscale(0.2); }
        .trust-value { display: block; font-weight: 800; color: var(--pro-slate); font-size: 1.05rem; }
        .trust-label { font-size: 0.85rem; color: var(--pro-slate-light); }

        /* 2. الهيكل العام والصفحة */
        body.purchase-page {
            font-family: 'Tajawal', sans-serif;
            min-height: 100vh;
            margin: 0;
            background: var(--pro-bg);
            color: var(--pro-slate);
            line-height: 1.6;
        }
        /* 3. الهيدر */
        .purchase-header {
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--pro-border);
            padding: 0 24px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            transition: box-shadow 0.4s var(--ease-out-expo), background 0.3s;
        }
        .purchase-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
        .purchase-header-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 72px;
        }
        .purchase-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--pro-primary);
        }
        .purchase-logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-primary-light) 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0.9rem;
            font-weight: 700;
            transition: transform 0.3s var(--ease-spring);
        }
        .purchase-logo:hover .purchase-logo-icon { transform: scale(1.05) rotate(-2deg); }
        .purchase-logo-text { font-weight: 800; font-size: 1.2rem; color: var(--pro-slate); }
        .purchase-nav { display: flex; gap: 8px; }
        .purchase-nav a {
            color: var(--pro-slate-light);
            text-decoration: none;
            padding: 10px 18px;
            font-weight: 600;
            font-size: 0.95rem;
            border-radius: 8px;
            transition: all 0.3s var(--ease-out-expo);
        }
        .purchase-nav a:hover { color: var(--pro-primary); background: rgba(15,118,110,0.08); transform: translateY(-1px); }
        .purchase-nav a.btn-nav-primary {
            background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-primary-light) 100%);
            color: #fff !important;
            box-shadow: 0 2px 8px rgba(15,118,110,0.3);
        }
        .purchase-nav a.btn-nav-primary:hover {
            background: linear-gradient(135deg, #0d5d57 0%, var(--pro-primary) 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(15,118,110,0.4);
        }
        .purchase-nav a:focus-visible,
        .back-to-top:focus-visible,
        .btn-plan:focus-visible,
        .btn-cta:focus-visible {
            outline: 2px solid var(--pro-primary);
            outline-offset: 3px;
        }

        /* 4. Hero */
        .purchase-hero {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #0f766e 0%, #0d9488 40%, #14b8a6 100%);
            background-size: 200% 200%;
            animation: heroGradient 8s ease infinite;
            color: #fff;
            text-align: center;
            padding: 80px 24px 100px;
        }
        .purchase-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.08) 0%, transparent 50%),
                        radial-gradient(circle at 80% 20%, rgba(153,246,228,0.1) 0%, transparent 40%);
            pointer-events: none;
        }
        /* جزيئات ديكورية في Hero */
        .hero-particles {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }
        .hero-particles span {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.15);
            animation: particleFloat 12s ease-in-out infinite;
        }
        .hero-particles span:nth-child(1) { width: 60px; height: 60px; top: 15%; right: 10%; animation-delay: 0s; }
        .hero-particles span:nth-child(2) { width: 40px; height: 40px; top: 60%; left: 15%; animation-delay: -3s; }
        .hero-particles span:nth-child(3) { width: 30px; height: 30px; top: 75%; right: 25%; animation-delay: -6s; }
        .hero-particles span:nth-child(4) { width: 50px; height: 50px; top: 25%; left: 60%; animation-delay: -2s; }
        .hero-particles span:nth-child(5) { width: 25px; height: 25px; top: 45%; right: 70%; animation-delay: -4s; }
        @keyframes particleFloat {
            0%, 100% { transform: translate(0,0) scale(1); opacity: 0.15; }
            33% { transform: translate(10px,-15px) scale(1.05); opacity: 0.2; }
            66% { transform: translate(-8px,10px) scale(0.95); opacity: 0.12; }
        }
        @keyframes heroGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .purchase-hero .hero-badge {
            display: inline-block;
            padding: 8px 18px;
            background: rgba(255,255,255,0.18);
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 24px;
            animation: fadeInDown 0.8s var(--ease-out-expo) both;
            border: 1px solid rgba(255,255,255,0.25);
            backdrop-filter: blur(4px);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .purchase-hero .hero-badge:hover { transform: scale(1.02); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        .purchase-hero h1 {
            font-size: 2.5rem;
            font-weight: 800;
            margin: 0 0 20px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            animation: fadeInUp 0.9s var(--ease-out-expo) 0.15s both;
        }
        .purchase-hero p {
            font-size: 1.1rem;
            opacity: 0.92;
            max-width: 560px;
            margin: 0 auto;
            line-height: 1.8;
            animation: fadeInUp 0.9s var(--ease-out-expo) 0.3s both;
        }
        .purchase-hero .hero-highlight {
            color: #99f6e4;
            font-weight: 700;
            text-shadow: 0 0 20px rgba(153,246,228,0.3);
        }

        /* Keyframes للحركة */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-in { animation: fadeInUp 0.7s var(--ease-out-expo) both; }
        .animate-in-delay-1 { animation-delay: 0.1s; }
        .animate-in-delay-2 { animation-delay: 0.2s; }
        .animate-in-delay-3 { animation-delay: 0.3s; }

        /* 5. الأقسام والمحتوى */
        .purchase-container { max-width: 1200px; margin: 0 auto; padding: 0 24px 60px; }
        .section-block {
            background: var(--pro-card);
            border-radius: 16px;
            padding: 48px 40px;
            margin-top: -40px;
            margin-bottom: 32px;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--pro-border);
            transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s;
            opacity: 0;
            transform: translateY(40px);
        }
        .section-block.in-view {
            opacity: 1;
            transform: translateY(0);
        }
        .section-block:first-of-type { margin-top: -40px; }
        .section-block h2 {
            color: var(--pro-slate);
            font-size: 1.5rem;
            font-weight: 800;
            margin: 0 0 8px;
            padding-bottom: 16px;
            border-bottom: 2px solid var(--pro-border);
        }
        .section-block .section-subtitle {
            color: var(--pro-slate-light);
            font-size: 1rem;
            margin: -4px 0 28px;
        }
        .section-block h3 { color: var(--pro-slate); font-size: 1.15rem; font-weight: 700; margin: 32px 0 12px; }
        .section-block p, .section-block li { color: var(--pro-slate-light); font-size: 1rem; margin-bottom: 10px; }
        .section-block ul { padding-right: 22px; margin: 12px 0; }
        .section-block li { margin-bottom: 8px; }

        /* 6. بطاقات الخطط والكروت */
        .multi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin-top: 32px; }
        .section-block.in-view .multi-card { animation: fadeInUp 0.6s var(--ease-out-expo) both; }
        .section-block.in-view .multi-grid .multi-card:nth-child(1) { animation-delay: 0.1s; }
        .section-block.in-view .multi-grid .multi-card:nth-child(2) { animation-delay: 0.2s; }
        .multi-card {
            background: var(--pro-card);
            border: 1px solid var(--pro-border);
            border-radius: 14px;
            padding: 32px 28px;
            transition: all 0.4s var(--ease-out-expo);
        }
        .multi-card:hover {
            border-color: var(--pro-primary-light);
            box-shadow: var(--shadow-lg);
            transform: translateY(-6px);
        }
        .multi-card .card-icon {
            width: 48px;
            height: 48px;
            background: rgba(15,118,110,0.12);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 16px;
            transition: transform 0.3s var(--ease-spring), background 0.3s;
        }
        .multi-card:hover .card-icon { transform: scale(1.1); background: rgba(15,118,110,0.18); }
        .multi-card h4 {
            color: var(--pro-slate);
            font-size: 1.2rem;
            font-weight: 700;
            margin: 0 0 12px;
        }
        .multi-card h4 .term { color: var(--pro-slate-light); font-weight: 500; font-size: 0.9rem; }
        .multi-card p { margin: 0; font-size: 0.95rem; line-height: 1.7; }

        .plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 36px; }
        .section-block.in-view .plan-card { animation: fadeInUp 0.6s var(--ease-out-expo) both; }
        .section-block.in-view .plan-cards .plan-card:nth-child(1) { animation-delay: 0.1s; }
        .section-block.in-view .plan-cards .plan-card:nth-child(2) { animation-delay: 0.2s; }
        .section-block.in-view .plan-cards .plan-card:nth-child(3) { animation-delay: 0.3s; }
        .section-block.in-view .plan-cards .plan-card:nth-child(4) { animation-delay: 0.4s; }
        .plan-card {
            border: 1px solid var(--pro-border);
            border-radius: 16px;
            padding: 32px 28px;
            text-align: center;
            transition: all 0.4s var(--ease-out-expo);
            position: relative;
            background: var(--pro-card);
        }
        .plan-card:hover {
            border-color: var(--pro-primary-light);
            box-shadow: var(--shadow-lg);
            transform: translateY(-8px) scale(1.02);
        }
        .plan-card.featured {
            border: 2px solid var(--pro-primary);
            box-shadow: 0 8px 32px rgba(15,118,110,0.2);
            animation: featuredPulse 3s ease-in-out infinite;
        }
        @keyframes featuredPulse {
            0%, 100% { box-shadow: 0 8px 32px rgba(15,118,110,0.2); }
            50% { box-shadow: 0 12px 40px rgba(15,118,110,0.28); }
        }
        .plan-card .plan-badge {
            position: absolute;
            top: -10px;
            right: 50%;
            transform: translateX(50%);
            background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-primary-light) 100%);
            color: #fff;
            padding: 5px 16px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 700;
            box-shadow: 0 2px 10px rgba(15,118,110,0.4);
            animation: badgeFloat 2.5s ease-in-out infinite;
        }
        @keyframes badgeFloat {
            0%, 100% { transform: translateX(50%) translateY(0); }
            50% { transform: translateX(50%) translateY(-3px); }
        }
        .plan-card .plan-name { font-size: 1.25rem; font-weight: 700; color: var(--pro-slate); margin-bottom: 6px; }
        .plan-card .plan-tagline { font-size: 0.85rem; color: var(--pro-slate-light); margin: 0 0 10px 0; line-height: 1.4; }
        .plan-card .plan-price { font-size: 2.25rem; font-weight: 800; color: var(--pro-primary); margin: 12px 0; }
        .plan-card .plan-price span { font-size: 0.9rem; font-weight: 500; color: var(--pro-slate-light); }
        .plan-card .plan-features { text-align: right; margin: 24px 0; padding: 0; list-style: none; }
        .plan-card .plan-features li {
            padding: 8px 0;
            color: var(--pro-slate-light);
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: flex-end;
            font-size: 0.95rem;
        }
        .plan-card .plan-features li::before { content: "✓"; color: #059669; font-weight: bold; }
        .plan-card .btn-plan {
            display: inline-block;
            padding: 12px 28px;
            background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-primary-light) 100%);
            color: #fff !important;
            text-decoration: none;
            border-radius: 10px;
            font-weight: 700;
            margin-top: 16px;
            transition: all 0.3s var(--ease-out-expo);
            font-size: 1rem;
            box-shadow: 0 2px 12px rgba(15,118,110,0.3);
        }
        .plan-card .btn-plan:hover {
            background: linear-gradient(135deg, #0d5d57 0%, var(--pro-primary) 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(15,118,110,0.4);
        }
        .plan-card.featured .btn-plan { padding: 14px 36px; }

        /* 7. شبكة المميزات */
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 28px; }
        .section-block.in-view .feature-item { animation: fadeInUp 0.5s var(--ease-out-expo) both; }
        .section-block.in-view .feature-item:nth-child(1) { animation-delay: 0.05s; }
        .section-block.in-view .feature-item:nth-child(2) { animation-delay: 0.1s; }
        .section-block.in-view .feature-item:nth-child(3) { animation-delay: 0.15s; }
        .section-block.in-view .feature-item:nth-child(4) { animation-delay: 0.2s; }
        .section-block.in-view .feature-item:nth-child(5) { animation-delay: 0.25s; }
        .section-block.in-view .feature-item:nth-child(6) { animation-delay: 0.3s; }
        .section-block.in-view .feature-item:nth-child(7) { animation-delay: 0.35s; }
        .section-block.in-view .feature-item:nth-child(8) { animation-delay: 0.4s; }
        .section-block.in-view .feature-item:nth-child(9) { animation-delay: 0.45s; }
        .feature-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 20px;
            background: var(--pro-bg);
            border: 1px solid var(--pro-border);
            border-radius: 12px;
            transition: all 0.35s var(--ease-out-expo);
        }
        .feature-item:hover {
            border-color: var(--pro-primary-light);
            background: #fff;
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }
        .feature-item .feat-icon {
            width: 40px;
            height: 40px;
            background: rgba(15,118,110,0.12);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            transition: transform 0.3s var(--ease-spring);
        }
        .feature-item:hover .feat-icon { transform: scale(1.15) rotate(5deg); }
        .feature-item .feat-text { font-weight: 600; color: var(--pro-slate); }

        /* 8. CTA */
        .cta-section {
            text-align: center;
            padding: 56px 40px;
            background: linear-gradient(135deg, #334155 0%, #475569 50%, #334155 100%);
            background-size: 200% 200%;
            animation: ctaGradient 6s ease infinite;
            color: #fff;
            border-radius: 16px;
            border: none;
            position: relative;
            overflow: hidden;
        }
        @keyframes ctaGradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .cta-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, rgba(15,118,110,0.2) 0%, transparent 60%);
            pointer-events: none;
        }
        .cta-section h2 { color: #fff !important; border: none !important; margin-bottom: 12px; font-size: 1.6rem !important; }
        .cta-section p { color: rgba(255,255,255,0.9) !important; font-size: 1.05rem; margin: 0; }
        .cta-section .btn-cta {
            display: inline-block;
            padding: 16px 44px;
            background: #fff;
            color: var(--pro-slate) !important;
            text-decoration: none;
            border-radius: 12px;
            font-weight: 700;
            font-size: 1.1rem;
            margin-top: 28px;
            transition: all 0.35s var(--ease-out-expo);
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
        .cta-section .btn-cta:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
        }

        /* 9. Footer */
        .purchase-footer {
            padding: 40px 24px 32px;
            color: var(--pro-slate-light);
            font-size: 0.9rem;
            background: linear-gradient(180deg, var(--pro-card) 0%, #f1f5f9 100%);
            border-top: 1px solid var(--pro-border);
        }
        .purchase-footer-inner {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }
        .purchase-footer-links {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .purchase-footer-links a {
            color: var(--pro-slate-light);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s;
        }
        .purchase-footer-links a:hover { color: var(--pro-primary); }
        /* 10. كروت التفاصيل */
        .detail-section { margin: 24px 0; }
        .detail-section h4 {
            color: var(--pro-primary);
            font-size: 1.1rem;
            margin: 0 0 8px;
            padding: 0;
            border: none;
        }
        .detail-section p { margin: 0 0 12px; font-size: 0.95rem; }
        .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
        .detail-card {
            border: 1px solid var(--pro-border);
            border-radius: 12px;
            padding: 20px;
            background: var(--pro-bg);
            transition: all 0.35s var(--ease-out-expo);
        }
        .detail-card:hover {
            border-color: var(--pro-primary-light);
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px);
        }
        .section-block.in-view .detail-card { animation: fadeInUp 0.5s var(--ease-out-expo) both; }
        .section-block.in-view .detail-grid .detail-card:nth-child(1) { animation-delay: 0.05s; }
        .section-block.in-view .detail-grid .detail-card:nth-child(2) { animation-delay: 0.1s; }
        .section-block.in-view .detail-grid .detail-card:nth-child(3) { animation-delay: 0.15s; }
        .section-block.in-view .detail-grid .detail-card:nth-child(4) { animation-delay: 0.2s; }
        .section-block.in-view .detail-grid .detail-card:nth-child(5) { animation-delay: 0.25s; }
        .section-block.in-view .detail-grid .detail-card:nth-child(6) { animation-delay: 0.3s; }
        .detail-card h5 { color: var(--pro-slate); font-size: 1rem; margin: 0 0 10px; }
        .detail-card ul { margin: 0; padding-right: 18px; }
        .detail-card li { margin-bottom: 6px; font-size: 0.9rem; }
        .toc-list { list-style: none; padding: 0; margin: 0; background: var(--pro-bg); padding: 20px; border-radius: 10px; border: 1px solid var(--pro-border); }
        .toc-list li { margin: 8px 0; }
        .toc-list a {
            color: var(--pro-primary);
            text-decoration: none;
            font-weight: 600;
        }
        .toc-list a:hover { text-decoration: underline; }

        /* 11. بلوكات الشرح (صور + نص) */
        .explain-block {
            display: flex;
            gap: 32px;
            align-items: center;
            margin: 40px 0;
            padding: 32px;
            background: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 100%);
            border-radius: 16px;
            border: 1px solid var(--pro-border);
            flex-wrap: wrap;
            transition: box-shadow 0.4s, transform 0.3s;
        }
        .explain-block:hover { box-shadow: 0 8px 32px rgba(15,118,110,0.1); }
        .explain-block.reverse { flex-direction: row-reverse; }
        .explain-block .explain-img { flex: 0 0 320px; min-width: 280px; }
        .explain-block .explain-img img {
            width: 100%;
            height: auto;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(15,118,110,0.15);
            transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s;
        }
        .explain-block:hover .explain-img img {
            transform: scale(1.02);
            box-shadow: 0 12px 40px rgba(15,118,110,0.2);
        }
        .explain-block .explain-content { flex: 1; min-width: 280px; }
        .explain-block .explain-content h4 { color: var(--pro-primary); font-size: 1.25rem; margin: 0 0 12px; }
        .explain-block .explain-content p { margin: 0 0 12px; }
        .explain-block .explain-content ul { margin: 0; padding-right: 20px; }
        .explain-block .explain-content li { margin-bottom: 6px; }
        .svg-illustration { width: 100%; max-width: 400px; height: auto; }
        .section-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-primary-light) 100%);
            color: #fff;
            border-radius: 10px;
            font-weight: 800;
            font-size: 1.1rem;
            margin-left: 12px;
            box-shadow: 0 2px 10px rgba(15,118,110,0.3);
            transition: transform 0.3s var(--ease-spring);
        }
        .section-block:hover .section-num { transform: scale(1.08); }
        .visual-toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; }
        .visual-toc a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 20px;
            background: var(--pro-card);
            border: 1px solid var(--pro-border);
            border-radius: 12px;
            text-decoration: none;
            color: var(--pro-slate);
            font-weight: 600;
            transition: all 0.35s var(--ease-out-expo);
        }
        .visual-toc a:hover {
            border-color: var(--pro-primary);
            background: #f0fdfa;
            color: var(--pro-primary);
            transform: translateY(-4px) translateX(-4px);
            box-shadow: var(--shadow-md);
        }
        .visual-toc .toc-num { width: 28px; height: 28px; background: rgba(15,118,110,0.15); color: var(--pro-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
        .section-block.in-view .visual-toc a { animation: fadeInUp 0.5s var(--ease-out-expo) both; }
        .section-block.in-view .visual-toc a:nth-child(1) { animation-delay: 0.05s; }
        .section-block.in-view .visual-toc a:nth-child(2) { animation-delay: 0.1s; }
        .section-block.in-view .visual-toc a:nth-child(3) { animation-delay: 0.15s; }
        .section-block.in-view .visual-toc a:nth-child(4) { animation-delay: 0.2s; }
        .section-block.in-view .visual-toc a:nth-child(5) { animation-delay: 0.25s; }
        .section-block.in-view .visual-toc a:nth-child(6) { animation-delay: 0.3s; }
        .flow-steps { display: flex; flex-wrap: wrap; gap: 16px; margin: 28px 0; justify-content: center; }
        .flow-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 120px; }
        .flow-step .step-circle {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, var(--pro-primary) 0%, var(--pro-primary-light) 100%);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.2rem;
            margin-bottom: 12px;
            box-shadow: 0 4px 20px rgba(15,118,110,0.35);
            transition: transform 0.3s var(--ease-spring);
        }
        .flow-step:hover .step-circle { transform: scale(1.1); }
        .flow-step .step-label { font-weight: 600; color: var(--pro-slate); text-align: center; font-size: 0.95rem; }
        .flow-arrow {
            display: flex;
            align-items: center;
            color: var(--pro-primary-light);
            font-size: 1.5rem;
            animation: arrowPulse 1.5s ease-in-out infinite;
        }

        /* الرسوم البيانية */
        .charts-section { margin: 48px 0; }
        .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; margin-top: 28px; }
        .chart-card {
            background: var(--pro-bg);
            border: 1px solid var(--pro-border);
            border-radius: 14px;
            padding: 24px;
            transition: all 0.35s var(--ease-out-expo);
        }
        .chart-card:hover { border-color: var(--pro-primary-light); box-shadow: var(--shadow-md); }
        .chart-card h4 { color: var(--pro-primary); font-size: 1.1rem; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--pro-border); }
        .chart-wrap { margin: 0 auto 16px; max-width: 100%; }
        .svg-chart { max-width: 280px; height: auto; display: block; margin: 0 auto; }
        .chart-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; margin-top: 12px; font-size: 0.85rem; }
        .chart-legend-item { display: flex; align-items: center; gap: 6px; }
        .chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
        .chart-desc { font-size: 0.9rem; color: var(--pro-slate-light); margin-top: 12px; line-height: 1.6; }
        @keyframes arrowPulse {
            0%, 100% { opacity: 0.7; transform: translateX(0); }
            50% { opacity: 1; transform: translateX(-4px); }
        }
        @keyframes arrowPulseV {
            0%, 100% { opacity: 0.7; transform: rotate(90deg) translateY(0); }
            50% { opacity: 1; transform: rotate(90deg) translateY(-4px); }
        }

        /* دعم تقليل الحركة (إمكانية الوصول) */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
            .hero-particles { display: none; }
            .section-block { opacity: 1; transform: none; }
        }

        /* 12. التصميم المتجاوب */
        @media (max-width: 768px) {
            .explain-block { flex-direction: column !important; padding: 20px; }
            .explain-block .explain-img { flex: none; width: 100%; }
            .flow-steps { flex-direction: column; }
            .flow-arrow { animation: arrowPulseV 1.5s ease-in-out infinite; }
            .purchase-header-inner { flex-direction: column; height: auto; padding: 16px 0; gap: 16px; }
            .purchase-hero { padding: 48px 20px 64px; }
            .purchase-hero h1 { font-size: 1.8rem; }
            .section-block { padding: 32px 24px; margin-top: -32px; }
            .trust-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
            .chart-card[style*="grid-column"] { grid-column: 1 !important; }
        }
    </style>
</head>
<body class="purchase-page">

    <div class="scroll-progress" id="scrollProgress" aria-hidden="true"></div>
    <a href="#" class="back-to-top" id="backToTop" title="العودة للأعلى" aria-label="العودة للأعلى">↑</a>

    <!--
    ╔═══════════════════════════════════════════════════════════════════════════╗
    ║  هيكل الصفحة (Page Structure)                                            ║
    ╠═══════════════════════════════════════════════════════════════════════════╣
    ║  1. Header  — شعار + روابط (تسجيل الدخول | بوابة المريض | تسجيل مختبر)     ║
    ║  2. Hero    — العنوان الرئيسي والعروض الترويجية                           ║
    ║  3. Section 1 — ما هو SmartLab؟ (Multi-Tenant + Multi-Branch)             ║
    ║  4. Section 2 — شرح كامل للنظام (معمارية، مسار عمل، عمليات، إدارة...)      ║
    ║  5. Section 3 — مميزات النظام (شبكة المميزات)                             ║
    ║  6. Section 4 — خطط الاشتراك (ديناميكية من DB)                             ║
    ║  7. CTA     — دعوة للتسجيل                                                 ║
    ║  8. Footer  — حقوق النشر                                                  ║
    ╚═══════════════════════════════════════════════════════════════════════════╝
    -->

    <!-- ═══════════════════════════════════════════════════════════════════
         الهيدر — شعار + روابط التنقل (تسجيل الدخول | بوابة المريض | التسجيل)
         ═══════════════════════════════════════════════════════════════════ -->
    <header class="purchase-header">
        <div class="purchase-header-inner">
            <a href="index.php?page=purchase" class="purchase-logo">
                <div class="purchase-logo-icon">SL</div>
                <span class="purchase-logo-text">نظام المختبرات</span>
            </a>
            <nav class="purchase-nav">
                <a href="index.php?page=login">تسجيل الدخول</a>
                <a href="index.php?page=patient_portal">بوابة المريض</a>
                <a href="index.php?page=signup" class="btn-nav-primary">تسجيل مختبر جديد</a>
            </nav>
        </div>
    </header>

    <!-- ═══════════════════════════════════════════════════════════════════
         Hero — العنوان الرئيسي والعروض الترويجية
         ═══════════════════════════════════════════════════════════════════ -->
    <section class="purchase-hero">
        <div class="hero-particles" aria-hidden="true">
            <span></span><span></span><span></span><span></span><span></span>
        </div>
        <div style="position:relative;z-index:1;">
            <span class="hero-badge">SmartLab — منصة البرمجيات كخدمة للمختبرات الطبية</span>
            <h1>SmartLab — نظام إدارة المختبرات Multi-Tenant و Multi-Branch</h1>
            <p>منصة متكاملة تدعم <span class="hero-highlight">Multi-Tenant</span> و<span class="hero-highlight">Multi-Branch</span>. كل مختبر في بيئته المعزولة، مع إدارة فروع متعددة.</p>
        </div>
    </section>

    <!-- شريط الثقة والإحصائيات -->
    <div class="trust-bar">
        <div class="trust-bar-inner">
            <div class="trust-item">
                <span class="trust-icon">🏥</span>
                <span class="trust-value">Multi-Tenant</span>
                <span class="trust-label">عزل كامل للبيانات</span>
            </div>
            <div class="trust-item">
                <span class="trust-icon">🏢</span>
                <span class="trust-value">فروع متعددة</span>
                <span class="trust-label">إدارة مركزية</span>
            </div>
            <div class="trust-item">
                <span class="trust-icon">🔒</span>
                <span class="trust-value">أمان عالي</span>
                <span class="trust-label">بيانات مشفرة</span>
            </div>
            <div class="trust-item">
                <span class="trust-icon">📞</span>
                <span class="trust-value">دعم فني</span>
                <span class="trust-label">متوفر دائماً</span>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════
         المحتوى الرئيسي — الأقسام التفسيرية وخطط الاشتراك
         ═══════════════════════════════════════════════════════════════════ -->
    <div class="purchase-container">

        <!-- ── القسم 1: ما هو SmartLab؟ (Multi-Tenant + Multi-Branch) ── -->
        <div class="section-block">
            <h2>ما هو SmartLab؟ <span class="section-num">1</span></h2>
            <p class="section-subtitle"><strong>SmartLab</strong> يجمع بين تقنيتين قويتين (Multi-Tenant و Multi-Branch) لجعل إدارة المختبرات أسهل وأكثر أماناً</p>
            
            <div class="explain-block">
                <div class="explain-img">
                    <?php if (file_exists(__DIR__ . '/../assets/multi-tenant-diagram.png')): ?>
                    <img src="assets/multi-tenant-diagram.png" alt="Multi-Tenant Architecture">
                    <?php else: ?>
                    <svg class="svg-illustration" viewBox="0 0 400 280" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="400" height="280" rx="16" fill="url(#g1)"/>
                        <defs><linearGradient id="g1" x1="0" y1="0" x2="400" y2="280"><stop stop-color="#f0fdfa"/><stop offset="1" stop-color="#e0f2fe"/></linearGradient></defs>
                        <rect x="40" y="40" width="100" height="80" rx="10" fill="#0f766e" opacity="0.9"/>
                        <text x="90" y="85" fill="white" font-size="12" font-weight="bold" text-anchor="middle">مختبر أ</text>
                        <rect x="150" y="40" width="100" height="80" rx="10" fill="#0d9488" opacity="0.9"/>
                        <text x="200" y="85" fill="white" font-size="12" font-weight="bold" text-anchor="middle">مختبر ب</text>
                        <rect x="260" y="40" width="100" height="80" rx="10" fill="#14b8a6" opacity="0.9"/>
                        <text x="310" y="85" fill="white" font-size="12" font-weight="bold" text-anchor="middle">مختبر ج</text>
                        <circle cx="200" cy="180" r="40" fill="#334155"/>
                        <text x="200" y="188" fill="white" font-size="11" text-anchor="middle">سحابة</text>
                        <line x1="90" y1="120" x2="180" y2="160" stroke="#64748b" stroke-width="2" stroke-dasharray="4"/>
                        <line x1="200" y1="120" x2="200" y2="140" stroke="#64748b" stroke-width="2" stroke-dasharray="4"/>
                        <line x1="310" y1="120" x2="220" y2="160" stroke="#64748b" stroke-width="2" stroke-dasharray="4"/>
                    </svg>
                    <?php endif; ?>
                </div>
                <div class="explain-content">
                    <h4>معمارية Multi-Tenant — عزل تام</h4>
                    <p>كل مختبر مستقل عن الآخر. البيانات، الإعدادات، والشعار كلها معزولة. السحابة المركزية تدير الجميع مع الحفاظ على الخصوصية.</p>
                </div>
            </div>
            
            <div class="multi-grid">
                <div class="multi-card">
                    <div class="card-icon">🔒</div>
                    <h4>Multi-Tenant</h4>
                    <p>عزل كامل للبيانات: مختبر أ لا يرى أبداً بيانات مختبر ب. كل مختبر له قاعدة بيانات منطقية مستقلة، شعاره، ألوانه، وإعداداته الخاصة.</p>
                </div>
                <div class="multi-card">
                    <div class="card-icon">🏢</div>
                    <h4>Multi-Branch</h4>
                    <p>المختبر الواحد يمكنه فتح عدة فروع. إدارة مركزية للفحوصات والمخزون مع توزيع العمل على الفروع بسلاسة.</p>
                </div>
            </div>

            <h3>كيف يعمل العزل؟</h3>
            <ul>
                <li><strong>عزل تلقائي:</strong> كل طلب، مريض، فاتورة، ونتيجة مرتبطة بمختبرها فقط</li>
                <li><strong>رابط فريد لكل مختبر:</strong> مثل mylab.yoursystem.com أو index.php?tenant=mylab</li>
                <li><strong>لوحة Super Admin:</strong> مدير المنصة يدير كل المختبرات من مكان واحد</li>
            </ul>

            <h3>لماذا Multi-Branch؟</h3>
            <ul>
                <li>المختبر الرئيسي + فرع المدينة + فرع الحي — كلهم في نظام واحد</li>
                <li>تقارير موحدة أو حسب الفرع</li>
                <li>صلاحيات للمستخدمين: مدير يراه الكل، أو موظف لفرع محدد</li>
            </ul>
        </div>

        <!-- ── القسم 2: شرح كامل للنظام — دليل بصري لكل المكونات ── -->
        <div class="section-block">
            <h2>شرح كامل للنظام بكل التفاصيل <span class="section-num">2</span></h2>
            <p class="section-subtitle">دليل بصري مبسط لكل مكونات النظام</p>

            <!-- جدول المحتويات البصري — روابط سريعة للأقسام -->
            <h3 style="margin-bottom:16px;">تصفح الأقسام</h3>
            <div class="visual-toc">
                <a href="#charts"><span class="toc-num">0</span> الرسوم البيانية</a>
                <a href="#arch"><span class="toc-num">1</span> المعمارية</a>
                <a href="#flow"><span class="toc-num">2</span> مسار العمل</a>
                <a href="#daily"><span class="toc-num">3</span> العمليات</a>
                <a href="#admin"><span class="toc-num">4</span> الإدارة</a>
                <a href="#quality"><span class="toc-num">5</span> الجودة</a>
                <a href="#patients"><span class="toc-num">6</span> خدمات المرضى</a>
            </div>

            <!-- 0. شرح مفصل ورسوم بيانية -->
            <div class="charts-section" id="charts">
                <h3>شرح مفصل عن النظام والرسوم البيانية</h3>
                <p class="section-subtitle" style="margin-bottom:24px;">تصورات بصرية توضح بنية النظام ومسار العمل وتوزيع المكونات</p>

                <div class="charts-grid">
                    <!-- مخطط دائري: توزيع مكونات النظام -->
                    <div class="chart-card">
                        <h4>توزيع مكونات النظام</h4>
                        <div class="chart-wrap">
                            <svg viewBox="0 0 200 200" class="svg-chart">
                                <defs>
                                    <linearGradient id="pie1" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#0f766e"/><stop offset="100%" stop-color="#14b8a6"/></linearGradient>
                                    <linearGradient id="pie2" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#0d9488"/><stop offset="100%" stop-color="#2dd4bf"/></linearGradient>
                                    <linearGradient id="pie3" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#334155"/><stop offset="100%" stop-color="#475569"/></linearGradient>
                                    <linearGradient id="pie4" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#64748b"/><stop offset="100%" stop-color="#94a3b8"/></linearGradient>
                                    <linearGradient id="pie5" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#475569"/><stop offset="100%" stop-color="#64748b"/></linearGradient>
                                </defs>
                                <circle cx="100" cy="100" r="70" fill="none" stroke="url(#pie1)" stroke-width="30" stroke-dasharray="88 500" stroke-dashoffset="0" transform="rotate(-90 100 100)"/>
                                <circle cx="100" cy="100" r="70" fill="none" stroke="url(#pie2)" stroke-width="30" stroke-dasharray="66 500" stroke-dashoffset="-88" transform="rotate(-90 100 100)"/>
                                <circle cx="100" cy="100" r="70" fill="none" stroke="url(#pie3)" stroke-width="30" stroke-dasharray="132 500" stroke-dashoffset="-154" transform="rotate(-90 100 100)"/>
                                <circle cx="100" cy="100" r="70" fill="none" stroke="url(#pie4)" stroke-width="30" stroke-dasharray="66 500" stroke-dashoffset="-286" transform="rotate(-90 100 100)"/>
                                <circle cx="100" cy="100" r="70" fill="none" stroke="url(#pie5)" stroke-width="30" stroke-dasharray="88 500" stroke-dashoffset="-352" transform="rotate(-90 100 100)"/>
                                <circle cx="100" cy="100" r="50" fill="var(--pro-card)"/>
                            </svg>
                        </div>
                        <div class="chart-legend">
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#0f766e"></span> المرضى 20%</span>
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#0d9488"></span> الطلبات 15%</span>
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#334155"></span> النتائج 30%</span>
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#64748b"></span> الفواتير 15%</span>
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#475569"></span> الإدارة 20%</span>
                        </div>
                        <p class="chart-desc">نسب تمثيلية لمكونات النظام: إدارة النتائج والفحوصات تشكل النسبة الأكبر، تليها إدارة المرضى والإعدادات.</p>
                    </div>

                    <!-- مخطط أعمدة: مراحل مسار العمل -->
                    <div class="chart-card">
                        <h4>مراحل مسار العمل (نسب زمنية تقريبية)</h4>
                        <div class="chart-wrap">
                            <svg viewBox="0 0 320 160" class="svg-chart">
                                <line x1="40" y1="140" x2="300" y2="140" stroke="#e2e8f0" stroke-width="1"/>
                                <rect x="50" y="115" width="36" height="25" rx="4" fill="url(#pie1)"/>
                                <text x="68" y="155" font-size="9" fill="#64748b" text-anchor="middle">تسجيل</text>
                                <rect x="105" y="75" width="36" height="65" rx="4" fill="url(#pie2)"/>
                                <text x="123" y="155" font-size="9" fill="#64748b" text-anchor="middle">طلب</text>
                                <rect x="160" y="10" width="36" height="130" rx="4" fill="url(#pie3)"/>
                                <text x="178" y="155" font-size="9" fill="#64748b" text-anchor="middle">نتائج</text>
                                <rect x="215" y="75" width="36" height="65" rx="4" fill="url(#pie4)"/>
                                <text x="233" y="155" font-size="9" fill="#64748b" text-anchor="middle">اعتماد</text>
                                <rect x="270" y="75" width="36" height="65" rx="4" fill="url(#pie5)"/>
                                <text x="288" y="155" font-size="9" fill="#64748b" text-anchor="middle">دفع</text>
                            </svg>
                        </div>
                        <div class="chart-legend">
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#0f766e"></span> 5%</span>
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#0d9488"></span> 15%</span>
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#334155"></span> 50%</span>
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#64748b"></span> 15%</span>
                            <span class="chart-legend-item"><span class="chart-legend-dot" style="background:#475569"></span> 15%</span>
                        </div>
                        <p class="chart-desc">مرحلة إدخال النتائج تشغل أكبر وقت في العملية، ثم الاعتماد والدفع معاً.</p>
                    </div>

                    <!-- مخطط تدفق البيانات -->
                    <div class="chart-card" style="grid-column: 1 / -1;">
                        <h4>تدفق البيانات في النظام</h4>
                        <div class="chart-wrap" style="max-width:100%;">
                            <svg viewBox="0 0 700 180" class="svg-chart" style="width:100%;max-width:600px;margin:0 auto;display:block;">
                                <defs>
                                    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"><polygon points="0 0, 10 3.5, 0 7" fill="#64748b"/></marker>
                                </defs>
                                <rect x="20" y="60" width="80" height="50" rx="8" fill="#0f766e" opacity="0.9"/>
                                <text x="60" y="92" fill="white" font-size="11" font-weight="bold" text-anchor="middle">المريض</text>
                                <rect x="150" y="60" width="80" height="50" rx="8" fill="#0d9488" opacity="0.9"/>
                                <text x="190" y="92" fill="white" font-size="11" font-weight="bold" text-anchor="middle">الطلب</text>
                                <rect x="280" y="60" width="80" height="50" rx="8" fill="#14b8a6" opacity="0.9"/>
                                <text x="320" y="92" fill="white" font-size="11" font-weight="bold" text-anchor="middle">الفحوصات</text>
                                <rect x="410" y="60" width="80" height="50" rx="8" fill="#334155" opacity="0.95"/>
                                <text x="450" y="92" fill="white" font-size="11" font-weight="bold" text-anchor="middle">النتائج</text>
                                <rect x="540" y="60" width="80" height="50" rx="8" fill="#475569" opacity="0.95"/>
                                <text x="580" y="92" fill="white" font-size="11" font-weight="bold" text-anchor="middle">الطباعة</text>
                                <line x1="100" y1="85" x2="150" y2="85" stroke="#64748b" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowhead)"/>
                                <line x1="230" y1="85" x2="280" y2="85" stroke="#64748b" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowhead)"/>
                                <line x1="360" y1="85" x2="410" y2="85" stroke="#64748b" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowhead)"/>
                                <line x1="490" y1="85" x2="540" y2="85" stroke="#64748b" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowhead)"/>
                            </svg>
                        </div>
                        <p class="chart-desc">مسار البيانات من تسجيل المريض → إنشاء الطلب → إضافة الفحوصات → إدخال النتائج → الطباعة والفاتورة. كل مرحلة تعتمد على السابقة.</p>
                    </div>
                </div>

                <!-- ملخص مفصل عن مكونات النظام -->
                <div class="detail-grid" style="margin-top:32px;">
                    <div class="detail-card">
                        <h5>الطبقة الأولى — واجهة المستخدم</h5>
                        <ul>
                            <li>لوحة تحكم المختبر (Dashboard)</li>
                            <li>بوابة المريض للاستعلام عن النتائج</li>
                            <li>واجهة الحجز أونلاين</li>
                            <li>قوالب الطباعة (نتائج، فواتير)</li>
                        </ul>
                    </div>
                    <div class="detail-card">
                        <h5>الطبقة الثانية — منطق الأعمال</h5>
                        <ul>
                            <li>إدارة المرضى والطلبات والنتائج</li>
                            <li>قواعد الفحوصات والقيم المرجعية</li>
                            <li>حساب الفواتير والخصومات</li>
                            <li>الصلاحيات والأدوار</li>
                        </ul>
                    </div>
                    <div class="detail-card">
                        <h5>الطبقة الثالثة — التخزين والتكامل</h5>
                        <ul>
                            <li>قاعدة بيانات منعزلة لكل مختبر</li>
                            <li>API للتكامل مع العيادات والأجهزة</li>
                            <li>استيراد/تصدير Excel</li>
                            <li>نسخ احتياطي تلقائي</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 2.1 المعمارية -->
            <h3 id="arch">المعمارية والبنية التحتية</h3>
            <div class="detail-grid">
                <div class="detail-card">
                    <h5>Multi-Tenant</h5>
                    <ul>
                        <li>عزل تام: كل مختبر في قاعدة بيانات منطقية مستقلة</li>
                        <li>رابط فريد: مثل mylab.domain.com أو ?tenant=mylab</li>
                        <li>شعار ولون خاص لكل مختبر</li>
                        <li>إعدادات مستقلة (اسم المختبر، الهاتف، العملة)</li>
                        <li>خطط اشتراك: Basic، Pro، Enterprise</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>Multi-Branch</h5>
                    <ul>
                        <li>إضافة فروع لا محدودة (حسب الخطة)</li>
                        <li>كل فرع: عنوان، هاتف، بريد</li>
                        <li>صلاحيات المستخدمين لكل فرع أو كل الفروع</li>
                        <li>لوحة مركزية لمقارنة أداء الفروع</li>
                        <li>تقارير حسب الفرع أو موحدة</li>
                    </ul>
                </div>
            </div>

            <!-- 2.2 مسار العمل -->
            <h3 id="flow">مسار العمل في المختبر</h3>
            <div class="flow-steps">
                <div class="flow-step"><div class="step-circle">1</div><span class="step-label">تسجيل مريض</span></div>
                <span class="flow-arrow">←</span>
                <div class="flow-step"><div class="step-circle">2</div><span class="step-label">إنشاء طلب</span></div>
                <span class="flow-arrow">←</span>
                <div class="flow-step"><div class="step-circle">3</div><span class="step-label">إدخال النتائج</span></div>
                <span class="flow-arrow">←</span>
                <div class="flow-step"><div class="step-circle">4</div><span class="step-label">الاعتماد والطباعة</span></div>
                <span class="flow-arrow">←</span>
                <div class="flow-step"><div class="step-circle">5</div><span class="step-label">الدفع</span></div>
            </div>

            <div class="explain-block reverse">
                <div class="explain-img">
                    <?php if (file_exists(__DIR__ . '/../assets/lab-dashboard-ui.png')): ?>
                    <img src="assets/lab-dashboard-ui.png" alt="لوحة تحكم المختبر">
                    <?php else: ?>
                    <svg class="svg-illustration" viewBox="0 0 400 220" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="400" height="220" rx="12" fill="#f8fafc"/>
                        <rect x="20" y="20" width="60" height="40" rx="6" fill="#0f766e" opacity="0.2"/>
                        <rect x="20" y="70" width="120" height="50" rx="6" fill="#e2e8f0"/>
                        <rect x="20" y="130" width="180" height="35" rx="6" fill="#e2e8f0"/>
                        <rect x="20" y="175" width="100" height="25" rx="4" fill="#0d9488"/>
                        <text x="35" y="35" font-size="10" fill="#334155">الرئيسية</text>
                        <text x="35" y="100" font-size="10" fill="#64748b">المرضى | الطلبات</text>
                        <text x="35" y="152" font-size="10" fill="#64748b">النتائج | الفواتير</text>
                        <text x="70" y="192" font-size="9" fill="white">طباعة</text>
                    </svg>
                    <?php endif; ?>
                </div>
                <div class="explain-content">
                    <h4>لوحة التحكم</h4>
                    <p>واجهة موحدة لإدارة كل العمليات: من تسجيل المريض حتى الطباعة والدفع. شريط جانبي للتنقل، وصول سريع، ودعم الوضع الداكن.</p>
                </div>
            </div>

            <!-- 2.3 العمليات اليومية (مرضى، أطباء، طلبات، فحوصات، نتائج، فواتير) -->
            <h3 id="daily">العمليات اليومية</h3>
            <div class="detail-grid">
                <div class="detail-card">
                    <h5>إدارة المرضى</h5>
                    <ul>
                        <li>سجل كامل: الاسم، الهاتف، البريد، الجنس، تاريخ الميلاد</li>
                        <li>كود مريض فريد لكل مختبر</li>
                        <li>رمز بوابة للمريض لاستعراض النتائج أونلاين</li>
                        <li>QR Code للدخول السريع للبوابة</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>إدارة الأطباء</h5>
                    <ul>
                        <li>سجل الأطباء والعيادات المحولة</li>
                        <li>ربط الطبيب بكل طلب</li>
                        <li>تقارير حسب الطبيب المحول</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>الطلبات (Orders)</h5>
                    <ul>
                        <li>إنشاء طلب جديد بربط مريض وطبيب وفرع</li>
                        <li>إضافة فحوصات أو حزم جاهزة</li>
                        <li>حالات: جديد، قيد التنفيذ، مكتمل، ملغى</li>
                        <li>خصم وملاحظات على الطلب</li>
                        <li>رقم طلب فريد تلقائي</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>الفحوصات (Tests)</h5>
                    <ul>
                        <li>كتالوج الفحوصات: الاسم، الكود، السعر، الوحدة</li>
                        <li>تصنيفات للفحوصات</li>
                        <li>قيم مرجعية (حد أدنى/أعلى)</li>
                        <li>تحذير خارج النطاق عند إدخال النتيجة</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>النتائج (Results)</h5>
                    <ul>
                        <li>إدخال النتائج يدوياً لكل فحص</li>
                        <li>اعتماد/تحقق النتيجة</li>
                        <li>استيراد نتائج من ملف Excel</li>
                        <li>طباعة نتيجة واحدة أو مع الفاتورة</li>
                        <li>رابط مشاركة آمن للنتيجة</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>الفواتير والدفع</h5>
                    <ul>
                        <li>إنشاء فاتورة لكل طلب</li>
                        <li>حالات: غير مدفوع، جزئي، مدفوع</li>
                        <li>دفع أونلاين: رابط مخصص، Stripe، زين كاش، آسيا باي</li>
                        <li>طباعة فاتورة</li>
                        <li>عملة قابلة للتخصيص</li>
                    </ul>
                </div>
            </div>

            <!-- 2.4 قائمة العمل والزيارات -->
            <h3 id="work">قائمة العمل والزيارات</h3>
            <div class="detail-grid">
                <div class="detail-card">
                    <h5>قائمة العمل (Worklist)</h5>
                    <ul>
                        <li>عرض الطلبات حسب الحالة</li>
                        <li>فلترة بالفرع والتاريخ</li>
                        <li>متابعة الفحوصات المعلقة</li>
                        <li>تسريع إدخال النتائج</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>الزيارات المنزلية</h5>
                    <ul>
                        <li>طلب زيارة منزلية من المريض</li>
                        <li>إدارة الطلبات والمتابعة</li>
                        <li>ربط مع الطلبات والنتائج</li>
                    </ul>
                </div>
            </div>

            <!-- 2.5 الإدارة والموارد -->
            <h3 id="admin">الإدارة والموارد</h3>
            <div class="detail-grid">
                <div class="detail-card">
                    <h5>المخزون</h5>
                    <ul>
                        <li>مواد وكواشف المختبر</li>
                        <li>كميات وحدود إنذار</li>
                        <li>تتبع الاستهلاك</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>حزم الفحوصات (Packages)</h5>
                    <ul>
                        <li>تجمع عدة فحوصات كحزمة واحدة</li>
                        <li>سعر خاص للحزمة</li>
                        <li>تسريع إنشاء الطلبات</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>إدارة العينات (Samples)</h5>
                    <ul>
                        <li>إدارة العينات لكل طلب</li>
                        <li>نوع العينة وتواريخ الاستلام</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>العروض الموسمية</h5>
                    <ul>
                        <li>عروض على فحوصات أو حزم</li>
                        <li>خصومات موقتة</li>
                    </ul>
                </div>
            </div>

            <!-- 2.6 الجودة والتكامل -->
            <h3 id="quality">الجودة والتكامل</h3>
            <div class="detail-grid">
                <div class="detail-card">
                    <h5>ضبط الجودة (QC)</h5>
                    <ul>
                        <li>إعداد فحوصات ضبط الجودة</li>
                        <li>إدخال قيم QC ومقارنتها بالأهداف</li>
                        <li>مراقبة الاستقرار</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>تكامل الأجهزة</h5>
                    <ul>
                        <li>ربط أجهزة التحليل الآلي</li>
                        <li>استقبال النتائج تلقائياً</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>API العيادات</h5>
                    <ul>
                        <li>مفاتيح API للعيادات الخارجية</li>
                        <li>إرسال الطلبات ونتائج الفحوصات</li>
                        <li>Webhook للتنبيهات</li>
                        <li>حد معدل الطلبات (Rate Limit)</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>استيراد النتائج</h5>
                    <ul>
                        <li>استيراد من Excel</li>
                        <li>ربط تلقائي بالطلبات</li>
                    </ul>
                </div>
            </div>

            <!-- 2.7 التقارير -->
            <h3 id="reports">التقارير ولوحة الفروع</h3>
            <div class="detail-grid">
                <div class="detail-card">
                    <h5>التقارير</h5>
                    <ul>
                        <li>إيرادات يومية/شهرية</li>
                        <li>عدد الطلبات والمرضى</li>
                        <li>تقارير حسب الفرع أو الطبيب</li>
                        <li>تصدير CSV</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>لوحة الفروع</h5>
                    <ul>
                        <li>مقارنة أداء الفروع</li>
                        <li>إحصائيات مركزية</li>
                    </ul>
                </div>
            </div>

            <!-- 2.8 الخدمات للمرضى -->
            <h3 id="patients">الخدمات للمرضى</h3>
            <div class="explain-block">
                <div class="explain-img">
                    <?php if (file_exists(__DIR__ . '/../assets/patient-portal.png')): ?>
                    <img src="assets/patient-portal.png" alt="بوابة المريض">
                    <?php else: ?>
                    <svg class="svg-illustration" viewBox="0 0 280 400" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect width="280" height="400" rx="24" fill="#fff" stroke="#e2e8f0" stroke-width="2"/>
                        <rect x="90" y="20" width="100" height="20" rx="10" fill="#e2e8f0"/>
                        <rect x="20" y="60" width="240" height="50" rx="12" fill="#f0fdfa"/>
                        <text x="140" y="92" font-size="12" fill="#0f766e" text-anchor="middle" font-weight="bold">بوابة المريض</text>
                        <rect x="20" y="130" width="240" height="45" rx="8" fill="#f8fafc"/>
                        <rect x="20" y="190" width="240" height="45" rx="8" fill="#f8fafc"/>
                        <rect x="20" y="250" width="240" height="80" rx="8" fill="#e0f2fe"/>
                        <text x="140" y="280" font-size="11" fill="#0d9488" text-anchor="middle">النتائج • الطلبات</text>
                        <rect x="40" y="350" width="200" height="40" rx="20" fill="#0f766e"/>
                        <text x="140" y="375" font-size="12" fill="white" text-anchor="middle">عرض النتائج</text>
                    </svg>
                    <?php endif; ?>
                </div>
                <div class="explain-content">
                    <h4>بوابة المريض — استعلام آمن</h4>
                    <p>المريض يدخل برقم الهاتف ورمز البوابة ليرى طلباته ونتائجه. يدعم QR Code للدخول السريع، وتقييم الخدمة.</p>
                    <ul>
                        <li>دخول بدون حساب</li>
                        <li>عرض النتائج والطلبات</li>
                        <li>حجز موعد أونلاين</li>
                    </ul>
                </div>
            </div>
            <div class="detail-grid">
                <div class="detail-card">
                    <h5>بوابة المريض</h5>
                    <ul>
                        <li>دخول برقم الهاتف + رمز البوابة</li>
                        <li>عرض الطلبات والنتائج</li>
                        <li>تقييم الخدمة</li>
                        <li>دخول سريع بـ QR Code</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>الحجز أونلاين (Booking)</h5>
                    <ul>
                        <li>حجز موعد بدون تسجيل دخول</li>
                        <li>اختيار التاريخ والفحوصات</li>
                        <li>إنشاء مريض وطلب تلقائياً</li>
                    </ul>
                </div>
            </div>

            <!-- 2.9 الإعدادات والأمان -->
            <h3 id="security">الإعدادات والأمان</h3>
            <div class="detail-grid">
                <div class="detail-card">
                    <h5>الإعدادات</h5>
                    <ul>
                        <li>اسم المختبر، الهاتف، البريد</li>
                        <li>العملة واللغة</li>
                        <li>إعدادات الدفع (بوابات الدفع)</li>
                        <li>واتساب، SMS</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>الطباعة والعلامة التجارية</h5>
                    <ul>
                        <li>قوالب طباعة النتائج والفواتير</li>
                        <li>شعار ولون المختبر</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>المستخدمون والصلاحيات</h5>
                    <ul>
                        <li>أدوار: مدير، محاسب، فني</li>
                        <li>صلاحيات دقيقة لكل صفحة</li>
                        <li>تخصيص الفرع للمستخدم</li>
                    </ul>
                </div>
                <div class="detail-card">
                    <h5>سجل التدقيق والدعم</h5>
                    <ul>
                        <li>سجل كامل للإجراءات</li>
                        <li>تذاكر الدعم الفني</li>
                    </ul>
                </div>
            </div>

            <!-- 2.10 Super Admin -->
            <h3 id="superadmin">لوحة Super Admin (مدير المنصة)</h3>
            <p>لمستخدم tenant_id=1 و role_id=1 فقط:</p>
            <ul>
                <li><strong>إدارة المختبرات:</strong> إنشاء مختبرات جديدة، تعديل، تعليق، تغيير الخطة</li>
                <li><strong>التبديل بين المختبرات:</strong> الدخول لأي مختبر لمتابعة أو دعم</li>
                <li><strong>إحصائيات المنصة:</strong> عدد المختبرات، المستخدمين، الطلبات</li>
            </ul>
        </div>

        <!-- ── القسم 3: ملخص المميزات (إدارة المرضى، الطلبات، النتائج، إلخ) ── -->
        <div class="section-block">
            <h2>مميزات النظام <span class="section-num">3</span></h2>
            <p class="section-subtitle">أدوات متكاملة لإدارة مختبرك بكفاءة</p>
            <div class="features-grid">
                <div class="feature-item"><span class="feat-icon">👥</span> <span class="feat-text">إدارة المرضى والأطباء</span></div>
                <div class="feature-item"><span class="feat-icon">📋</span> <span class="feat-text">الطلبات وقائمة العمل</span></div>
                <div class="feature-item"><span class="feat-icon">🧪</span> <span class="feat-text">النتائج والتحقق التلقائي</span></div>
                <div class="feature-item"><span class="feat-icon">💰</span> <span class="feat-text">الفواتير والدفع أونلاين</span></div>
                <div class="feature-item"><span class="feat-icon">📦</span> <span class="feat-text">حزم الفحوصات والعروض</span></div>
                <div class="feature-item"><span class="feat-icon">🖨️</span> <span class="feat-text">طباعة النتائج والفواتير</span></div>
                <div class="feature-item"><span class="feat-icon">🔌</span> <span class="feat-text">API للتكامل مع العيادات</span></div>
                <div class="feature-item"><span class="feat-icon">🏠</span> <span class="feat-text">الزيارات المنزلية</span></div>
                <div class="feature-item"><span class="feat-icon">📊</span> <span class="feat-text">التقارير ولوحة الفروع</span></div>
            </div>
        </div>

        <!-- ── القسم 4: خطط الاشتراك (ديناميكية من جدول subscription_plans) ── -->
        <div class="section-block">
            <h2>خطط الاشتراك <span class="section-num">4</span></h2>
            <p class="section-subtitle">اختر الخطة المناسبة لحجم مختبرك. تجربة مجانية ثم ترقية عند الحاجة.</p>
            
            <div class="plan-cards">
                <?php
                // عرض كل خطة: تمييز Pro، السعر، الرابط حسب الدفع
                $planTaglines = ['basic' => 'ابدأ صغيراً، انطلق بسرعة', 'pro' => 'التوازن الأمثل بين السعر والقيمة', 'enterprise' => 'للمختبرات الكبيرة — لا حدود للنمو'];
                foreach ($plans as $i => $p) {
                    $isPro = ($p['code'] ?? '') === 'pro';
                    $price = (float)($p['price_monthly'] ?? 0);
                    $code = strtolower(trim($p['code'] ?? ''));
                    $tagline = $planTaglines[$code] ?? '';
                ?>
                <div class="plan-card<?php echo $isPro ? ' featured' : ''; ?>">
                    <?php if ($isPro): ?><span class="plan-badge">الخطة الأقوى — الأكثر طلباً</span><?php endif; ?>
                    <div class="plan-name"><?php echo htmlspecialchars($p['name'] ?? '', ENT_QUOTES, 'UTF-8'); ?></div>
                    <?php if ($tagline): ?><p class="plan-tagline"><?php echo htmlspecialchars($tagline, ENT_QUOTES, 'UTF-8'); ?></p><?php endif; ?>
                    <div class="plan-price"><?php echo $price > 0 ? number_format($price, 2) . ' <span>USD/شهر</span>' : 'تجربة مجانية'; ?></div>
                    <ul class="plan-features">
                        <li>حتى <?php echo (int)($p['max_branches'] ?? 1); ?> فرع</li>
                        <li>حتى <?php echo (int)($p['max_users'] ?? 5); ?> مستخدم</li>
                        <li>بيانات معزولة وآمنة</li>
                        <li>دعم فني</li>
                    </ul>
                    <a href="index.php?page=signup<?php echo $price > 0 ? '&plan=' . (int)$p['id'] : ''; ?>" class="btn-plan"><?php echo $price > 0 ? 'اشترك الآن' : 'ابدأ مجاناً'; ?></a>
                </div>
                <?php } ?>
            </div>

            <?php if (empty($plans)): ?>
            <p style="color:var(--text-muted);">خطط الاشتراك متاحة بعد تهيئة النظام.</p>
            <a href="index.php?page=signup" class="btn-plan" style="display:inline-block;margin-top:16px;">تسجيل مختبر جديد</a>
            <?php endif; ?>
        </div>

        <!-- ── CTA النهائي — دعوة للتسجيل ── -->
        <div class="section-block cta-section">
            <h2>ابدأ مختبرك الرقمي اليوم</h2>
            <p>سجّل مختبرك في دقائق. تجربة مجانية، بدون بطاقة ائتمان.</p>
            <a href="index.php?page=signup" class="btn-cta">تسجيل مختبر جديد</a>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════
         Footer — حقوق النشر وروابط سريعة
         ═══════════════════════════════════════════════════════════════════ -->
    <footer class="purchase-footer">
        <div class="purchase-footer-inner">
            <nav class="purchase-footer-links">
                <a href="index.php?page=login">تسجيل الدخول</a>
                <a href="index.php?page=signup">تسجيل مختبر</a>
                <a href="index.php?page=patient_portal">بوابة المريض</a>
                <a href="index.php?page=purchase">الشراء والخطط</a>
            </nav>
            <p>SmartLab — نظام إدارة المختبرات © <?php echo date('Y'); ?></p>
        </div>
    </footer>

    <script>
    (function() {
        'use strict';
        var header = document.querySelector('.purchase-header');
        var progressBar = document.getElementById('scrollProgress');
        var backToTop = document.getElementById('backToTop');

        function onScroll() {
            var y = window.scrollY;
            var docHeight = document.documentElement.scrollHeight - window.innerHeight;
            if (header) header.classList.toggle('scrolled', y > 50);
            if (progressBar) {
                var pct = docHeight > 0 ? Math.min(y / docHeight, 1) : 0;
                progressBar.style.transform = 'scaleX(' + pct + ')';
                progressBar.classList.toggle('visible', y > 100);
            }
            if (backToTop) backToTop.classList.toggle('visible', y > 400);
        }
        window.addEventListener('scroll', onScroll, { passive: true });
        onScroll();

        if (backToTop) backToTop.addEventListener('click', function(e) {
            e.preventDefault();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        var blocks = document.querySelectorAll('.section-block');
        if (typeof IntersectionObserver !== 'undefined') {
            var observer = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) entry.target.classList.add('in-view');
                });
            }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
            blocks.forEach(function(b) { observer.observe(b); });
        } else {
            blocks.forEach(function(b) { b.classList.add('in-view'); });
        }
        if (blocks.length) {
            var rect = blocks[0].getBoundingClientRect();
            if (rect.top < window.innerHeight) blocks[0].classList.add('in-view');
        }
    })();
    </script>
</body>
</html>
<?php
/**
 * نهاية وحدة purchase — يُرجع للتحكم بالسكربت الرئيسي
 */
return;
