<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RestPO — All-in-One Restaurant POS & Management Platform</title>
    <meta name="description" content="RestPO is a premium SaaS platform for restaurant management. POS, Kitchen Display, QR Ordering, Inventory, HR, and more. Get started today.">
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        *{font-family:'Outfit',sans-serif;margin:0;padding:0;box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{background:#f8fafc;color:#475569;overflow-x:hidden}

        /* ─── Light Mode Overrides ─── */
        h1, h2, h3, h4, h5, h6 { color: #0f172a !important; }
        .text-slate-400, .text-slate-300, .text-slate-500 { color: #64748b !important; }
        .text-slate-200 { color: #1e293b !important; }

        /* ─── Gradient Meshes ─── */
        .mesh{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
        .mesh-1{width:600px;height:600px;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%);top:-200px;left:-200px;animation:drift1 18s ease-in-out infinite alternate}
        .mesh-2{width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,.1),transparent 70%);top:100px;right:-150px;animation:drift2 22s ease-in-out infinite alternate}
        .mesh-3{width:700px;height:700px;background:radial-gradient(circle,rgba(236,72,153,.06),transparent 70%);bottom:-300px;left:30%;animation:drift1 20s ease-in-out infinite alternate-reverse}
        @keyframes drift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(60px,40px) scale(1.1)}}
        @keyframes drift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-40px,60px) scale(1.15)}}

        /* ─── Glass (Light Style) ─── */
        .glass{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,0.06) !important;box-shadow:0 10px 30px -10px rgba(0,0,0,0.04)}
        .glass-strong{background:rgba(255,255,255,0.9);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(0,0,0,0.08) !important;box-shadow:0 20px 40px -15px rgba(0,0,0,0.06)}

        /* ─── Grid Overlay ─── */
        .grid-bg {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(139,92,246,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(139,92,246,0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: center top;
            mask-image: radial-gradient(ellipse at center, black, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 80%);
            pointer-events: none;
            z-index: 1;
        }

        /* ─── 3D MacBook Simulation ─── */
        .macbook-3d-wrap {
            perspective: 2000px;
            perspective-origin: 50% 30%;
            position: relative;
            z-index: 10;
        }
        .macbook-3d {
            position: relative;
            width: 720px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transition: transform 0.5s ease;
        }
        @media (max-width: 768px) {
            .macbook-3d {
                width: 90%;
                max-width: 460px;
            }
        }
        @media (max-width: 480px) {
            .macbook-3d {
                width: 85%;
                max-width: 320px;
            }
        }

        /* Screen Lid */
        .macbook-lid {
            position: relative;
            width: 100%;
            transform-style: preserve-3d;
            transform: rotateX(-14deg);
            transform-origin: bottom center;
            z-index: 2;
            transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .macbook-screen-bezel {
            position: relative;
            width: 100%;
            aspect-ratio: 16/10;
            background: #0a0a0a;
            border-radius: 16px 16px 0 0;
            padding: 16px 16px 22px;
            box-shadow: 
                inset 0 0 0 1px rgba(255, 255, 255, 0.15),
                0 10px 30px rgba(0, 0, 0, 0.3);
            border: 1px solid #1a202c;
        }
        .macbook-webcam {
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #111;
            box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
        }
        .macbook-display {
            width: 100%;
            height: 100%;
            background: #000;
            border-radius: 4px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
        }
        .macbook-display iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        /* Keyboard Base */
        .macbook-base-3d {
            position: relative;
            width: 110%;
            height: 12px;
            left: -5%;
            background: linear-gradient(to bottom, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%);
            border-radius: 2px 2px 10px 10px;
            box-shadow: 
                inset 0 1px 0 rgba(255, 255, 255, 0.6),
                0 4px 8px rgba(0, 0, 0, 0.15),
                0 12px 24px rgba(0, 0, 0, 0.1);
            transform-style: preserve-3d;
            transform: rotateX(25deg);
            transform-origin: top center;
            border: 1px solid #cbd5e1;
        }
        .macbook-keyboard-area {
            position: absolute;
            top: 1px;
            left: 4%;
            width: 92%;
            height: 3px;
            background: #1a202c;
            border-radius: 1px 1px 3px 3px;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
        }
        .macbook-trackpad {
            position: absolute;
            top: 4px;
            left: 38%;
            width: 24%;
            height: 4px;
            background: rgba(255, 255, 255, 0.25);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 1px;
        }
        .macbook-front-indent {
            position: absolute;
            bottom: 3px;
            left: 45%;
            width: 10%;
            height: 3px;
            background: #64748b;
            border-radius: 1px 1px 0 0;
        }

        /* Shadow underneath the laptop */
        .macbook-shadow {
            position: absolute;
            bottom: -25px;
            left: -6%;
            width: 112%;
            height: 40px;
            background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.08) 50%, transparent 80%);
            filter: blur(6px);
            pointer-events: none;
            z-index: -1;
        }

        /* ─── Button Shimmer ─── */
        .btn-cta{position:relative;overflow:hidden;background:linear-gradient(135deg,#8b5cf6,#6d28d9);transition:all .3s ease}
        .btn-cta::after{content:'';position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:rotate(25deg);transition:left .6s ease}
        .btn-cta:hover::after{left:120%}
        .btn-cta:hover{transform:translateY(-2px);box-shadow:0 15px 30px rgba(139,92,246,.2);color:white !important}

        .btn-outline{border:1px solid rgba(139,92,246,.3);color:#7c3aed;transition:all .3s;background:transparent}
        .btn-outline:hover{background:rgba(139,92,246,.08);border-color:#8b5cf6;color:#6d28d9;transform:translateY(-2px)}

        /* ─── Feature Cards ─── */
        .feature-card{transition:all .4s cubic-bezier(.4,0,.2,1)}
        .feature-card:hover{transform:translateY(-8px);border-color:rgba(139,92,246,.2);box-shadow:0 25px 50px rgba(139,92,246,.05)}
        .feature-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .3s}
        .feature-card:hover .feature-icon{transform:scale(1.1) rotate(-5deg)}

        /* ─── Review Carousel ─── */
        .review-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:16px 4px}
        .review-track::-webkit-scrollbar{display:none}
        .review-card{min-width:380px;max-width:420px;scroll-snap-align:start;flex-shrink:0}

        /* ─── Premium Pricing Cards ─── */
        .pricing-card {
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(139, 92, 246, 0.08);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.03);
            backdrop-filter: blur(16px);
            position: relative;
            z-index: 1;
        }
        .pricing-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.03), transparent 70%);
            z-index: -1;
            pointer-events: none;
        }
        .pricing-card:hover {
            transform: translateY(-8px);
            border-color: rgba(139, 92, 246, 0.3);
            box-shadow: 
                0 20px 40px -15px rgba(139, 92, 246, 0.1),
                0 0 0 1px rgba(139, 92, 246, 0.1);
        }
        .pricing-card.popular {
            border: 1px solid rgba(139, 92, 246, 0.6) !important;
            box-shadow: 
                0 20px 45px -12px rgba(139, 92, 246, 0.18),
                0 0 0 2px rgba(139, 92, 246, 0.15) !important;
            background: rgba(255, 255, 255, 0.85);
        }
        .pricing-card.popular::before {
            background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.1), transparent 60%);
        }
        .pricing-card ul li {
            color: #475569 !important;
            font-size: 13.5px;
        }

        /* ─── FAQ ─── */
        .faq-item{border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden;transition:border-color .3s;background:rgba(255,255,255,0.5)}
        .faq-item:hover{border-color:rgba(139,92,246,.2)}

        /* ─── Section Fade-in ─── */
        .reveal{opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.4,0,.2,1)}
        .reveal.visible{opacity:1;transform:translateY(0)}

        /* ─── Nav ─── */
        .nav-glass{background:rgba(248,250,252,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.05);transition:background .3s}

        /* ─── Floating particles (Lighter) ─── */
        .particle{position:absolute;border-radius:50%;pointer-events:none;animation:float-particle linear infinite}
        @keyframes float-particle{0%{transform:translateY(0) scale(1);opacity:.4}50%{opacity:0.8}100%{transform:translateY(-100vh) scale(0);opacity:0}}

        /* ─── Form Inputs ─── */
        .form-input{background:rgba(0,0,0,0.02) !important;border:1px solid rgba(0,0,0,0.08) !important;color:#0f172a !important;border-radius:12px;padding:12px 16px;width:100%;font-size:14px;transition:all 0.3s ease;outline:none}
        .form-input:focus{border-color:#8b5cf6 !important;background:rgba(255,255,255,1) !important;box-shadow:0 0 0 3px rgba(139,92,246,0.1) !important;}
        .form-input::placeholder{color:#94a3b8 !important;}

        /* ─── Hamburger (Smooth Morphing) ─── */
        .hamburger {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 22px;
            height: 16px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            position: relative;
        }
        .hamburger span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: #0f172a;
            border-radius: 4px;
            transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
            transform-origin: left center;
        }
        .hamburger.open span:nth-child(1) {
            transform: rotate(45deg) translate(2px, -1px);
        }
        .hamburger.open span:nth-child(2) {
            width: 0%;
            opacity: 0;
        }
        .hamburger.open span:nth-child(3) {
            transform: rotate(-45deg) translate(2px, 1px);
        }
    </style>
</head>
<body>

<!-- ═══════════ NAVBAR ═══════════ -->
<nav class="nav-glass fixed top-0 left-0 right-0 z-50" x-data="{ mobileMenu: false }">
    <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
        <a href="/restpo/" class="flex items-center gap-3">
            <?php if (!empty($siteSettings['website_logo'])): ?>
                <img src="<?php echo htmlspecialchars($siteSettings['website_logo']); ?>" alt="Logo" class="h-9 object-contain rounded-lg">
            <?php else: ?>
                <div class="w-9 h-9 rounded-xl flex items-center justify-center animate-pulse" style="background:linear-gradient(135deg,#8b5cf6,#3b82f6)">
                    <i class="fas fa-utensils text-white text-sm"></i>
                </div>
            <?php endif; ?>
            <span class="text-xl font-bold text-slate-900 tracking-tight">Rest<span class="text-purple-600">PO</span></span>
        </a>
        <div class="hidden md:flex items-center gap-8">
            <a href="#features" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition">Features</a>
            <a href="#integrations" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition">Integrations</a>
            <a href="#reviews" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition">Reviews</a>
            <a href="#pricing" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition">Pricing</a>
            <a href="#faq" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition">FAQ</a>
            <a href="#contact" class="text-sm font-medium text-slate-600 hover:text-violet-600 transition">Contact</a>
        </div>
        <div class="hidden md:flex items-center gap-3">
            <a href="/restpo/login" class="btn-outline px-5 py-2.5 rounded-xl text-sm font-semibold inline-flex items-center gap-2">
                <i class="fas fa-sign-in-alt text-xs"></i> Login
            </a>
            <a href="/restpo/register" class="btn-cta px-5 py-2.5 rounded-xl text-sm font-semibold text-white inline-flex items-center gap-2">
                Get Started <i class="fas fa-arrow-right text-xs"></i>
            </a>
        </div>
        
        <!-- Animated Hamburger menu button -->
        <button @click="mobileMenu = !mobileMenu" class="md:hidden text-slate-600 hover:text-slate-900 focus:outline-none flex items-center justify-center w-8 h-8 rounded-lg hover:bg-slate-100/50 transition duration-200" aria-label="Toggle Menu">
            <div class="hamburger" :class="mobileMenu ? 'open' : ''">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
    </div>
    <!-- Mobile Menu -->
    <div x-show="mobileMenu" x-transition class="md:hidden px-6 pb-6 space-y-2 bg-white/95 rounded-2xl border border-slate-100 shadow-xl mt-2 p-4" style="display:none">
        <a href="#features" @click="mobileMenu = false" class="block text-sm font-semibold text-slate-700 hover:text-violet-600 py-2 px-3 rounded-lg hover:bg-slate-50">Features</a>
        <a href="#integrations" @click="mobileMenu = false" class="block text-sm font-semibold text-slate-700 hover:text-violet-600 py-2 px-3 rounded-lg hover:bg-slate-50">Integrations</a>
        <a href="#reviews" @click="mobileMenu = false" class="block text-sm font-semibold text-slate-700 hover:text-violet-600 py-2 px-3 rounded-lg hover:bg-slate-50">Reviews</a>
        <a href="#pricing" @click="mobileMenu = false" class="block text-sm font-semibold text-slate-700 hover:text-violet-600 py-2 px-3 rounded-lg hover:bg-slate-50">Pricing</a>
        <a href="#faq" @click="mobileMenu = false" class="block text-sm font-semibold text-slate-700 hover:text-violet-600 py-2 px-3 rounded-lg hover:bg-slate-50">FAQ</a>
        <a href="#contact" @click="mobileMenu = false" class="block text-sm font-semibold text-slate-700 hover:text-violet-600 py-2 px-3 rounded-lg hover:bg-slate-50">Contact</a>
        <div class="flex gap-3 pt-3 border-t border-slate-100 mt-2">
            <a href="/restpo/login" class="btn-outline px-5 py-2.5 rounded-xl text-sm font-semibold text-center flex-1">Login</a>
            <a href="/restpo/register" class="btn-cta px-5 py-2.5 rounded-xl text-sm font-semibold text-white text-center flex-1">Get Started</a>
        </div>
    </div>
</nav>


<!-- ═══════════ HERO ═══════════ -->
<section class="relative min-h-screen flex items-center pt-24 pb-20 overflow-hidden">
    <!-- Grid Overlay -->
    <div class="grid-bg"></div>

    <!-- Background meshes -->
    <div class="mesh mesh-1"></div>
    <div class="mesh mesh-2"></div>

    <!-- Floating particles -->
    <div id="particles" class="absolute inset-0 overflow-hidden pointer-events-none z-0"></div>

    <div class="max-w-7xl mx-auto px-6 relative z-10 w-full">
        <div class="text-center mb-14">
            <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-6" style="background:rgba(139,92,246,.12);color:#7c3aed;border:1px solid rgba(139,92,246,.2)">
                <i class="fas fa-bolt"></i> YOUR COMPLETE RESTURANT INTEGRATION PLATEFORM.
            </div>
            <h1 class="text-4xl sm:text-5xl lg:text-7xl font-extrabold leading-tight tracking-tight">
                <span class="text-slate-900">Run Your Restaurant</span><br>
                <span style="background:linear-gradient(135deg,#8b5cf6,#06b6d4,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Like Never Before</span>
            </h1>
            <p class="mt-6 text-lg sm:text-xl text-slate-600 max-w-2xl mx-auto leading-relaxed">
                All-in-one POS, kitchen display, QR ordering, inventory & HR management. 
                Built for modern restaurants that demand excellence.
            </p>
            <div class="flex flex-wrap justify-center gap-4 mt-10">
                <a href="/restpo/register" class="btn-cta px-8 py-4 rounded-2xl text-base font-bold text-white inline-flex items-center gap-3 shadow-2xl">
                    <i class="fas fa-rocket"></i> Get Started Free
                </a>
                <a href="#features" class="btn-outline px-8 py-4 rounded-2xl text-base font-semibold inline-flex items-center gap-3">
                    <i class="fas fa-play-circle"></i> See How It Works
                </a>
            </div>
        </div>

        <!-- MacBook 3D Simulation Mockup -->
        <div class="macbook-3d-wrap max-w-4xl mx-auto relative mb-6">
            <div class="macbook-3d">
                <!-- Screen Lid -->
                <div class="macbook-lid">
                    <div class="macbook-screen-bezel">
                        <div class="macbook-webcam"></div>
                        <div class="macbook-display">
                            <iframe src="<?php echo htmlspecialchars($heroVideoUrl); ?>" title="RestPO Demo" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
                        </div>
                    </div>
                </div>
                <!-- Keyboard Base -->
                <div class="macbook-base-3d">
                    <div class="macbook-keyboard-area"></div>
                    <div class="macbook-trackpad"></div>
                    <div class="macbook-front-indent"></div>
                </div>
                <!-- Ambient Shadow -->
                <div class="macbook-shadow"></div>
            </div>
        </div>

        <!-- Trust badges -->
        <div class="flex flex-wrap justify-center gap-8 mt-14 text-sm text-slate-500">
            <div class="flex items-center gap-2"><i class="fas fa-shield-halved text-purple-400"></i> SSL Encrypted</div>
            <div class="flex items-center gap-2"><i class="fas fa-cloud text-cyan-400"></i> Cloud-Based</div>
            <div class="flex items-center gap-2"><i class="fas fa-headset text-emerald-400"></i> 24/7 Support</div>
            <div class="flex items-center gap-2"><i class="fas fa-infinity text-pink-400"></i> Unlimited Orders</div>
        </div>
    </div>
</section>


<!-- ═══════════ FEATURES ═══════════ -->
<section id="features" class="py-24 relative overflow-hidden">
    <div class="mesh" style="width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,.12),transparent 70%);top:50%;left:-150px"></div>
    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="text-center mb-16 reveal">
            <span class="inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4" style="background:rgba(6,182,212,.12);color:#0891b2;border:1px solid rgba(6,182,212,.2)">
                <i class="fas fa-sparkles mr-1"></i> Features
            </span>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-slate-900">Everything You Need, <span style="color:#06b6d4">Nothing You Don't</span></h2>
            <p class="mt-4 text-lg text-slate-650 max-w-xl mx-auto">Powerful modules designed to streamline every aspect of your restaurant operations.</p>
        </div>

        <div class="grid lg:grid-cols-2 gap-12 items-center" x-data="{ 
            activeVideo: '<?php echo htmlspecialchars(!empty($siteSettings['feature_video_0']) ? $siteSettings['feature_video_0'] : 'https://www.youtube.com/embed/dQw4w9WgXcQ'); ?>',
            activeIndex: 0,
            setVideo(index, url) {
                this.activeIndex = index;
                this.activeVideo = url;
            }
        }">
            <!-- Video -->
            <div class="reveal rounded-3xl overflow-hidden glass-strong p-3 shadow-2xl relative">
                <div class="absolute inset-0 bg-gradient-to-tr from-violet-500/10 to-cyan-500/10 pointer-events-none"></div>
                <iframe :src="activeVideo" class="w-full aspect-video rounded-2xl transition-all duration-300 relative z-10" title="Features Overview" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
            </div>

            <!-- Feature List -->
            <div class="space-y-4 reveal">
                <?php
                $featureList = [
                    [
                        'icon' => 'fa-cash-register', 
                        'color' => '#8b5cf6', 
                        'bg' => 'rgba(139,92,246,.12)', 
                        'title' => 'Lightning-Fast POS', 
                        'desc' => 'Process orders in seconds with our intuitive cashier terminal. Supports dining, takeaway, and delivery.',
                        'video' => !empty($siteSettings['feature_video_0']) ? $siteSettings['feature_video_0'] : 'https://www.youtube.com/embed/dQw4w9WgXcQ'
                    ],
                    [
                        'icon' => 'fa-tv', 
                        'color' => '#06b6d4', 
                        'bg' => 'rgba(6,182,212,.12)', 
                        'title' => 'Kitchen Display System', 
                        'desc' => 'Real-time order queue for your kitchen staff. No more paper tickets — go fully digital.',
                        'video' => !empty($siteSettings['feature_video_1']) ? $siteSettings['feature_video_1'] : 'https://www.youtube.com/embed/p_Vf0bM5h40'
                    ],
                    [
                        'icon' => 'fa-qrcode', 
                        'color' => '#10b981', 
                        'bg' => 'rgba(16,185,129,.12)', 
                        'title' => 'QR Code Ordering', 
                        'desc' => 'Let customers scan, browse, and order from their own devices. Reduce wait times dramatically.',
                        'video' => !empty($siteSettings['feature_video_2']) ? $siteSettings['feature_video_2'] : 'https://www.youtube.com/embed/u32O8r1j-U0'
                    ],
                    [
                        'icon' => 'fa-boxes-stacked', 
                        'color' => '#f59e0b', 
                        'bg' => 'rgba(245,158,11,.12)', 
                        'title' => 'Inventory Management', 
                        'desc' => 'Track stock levels, suppliers, and waste. Get alerts before you run out of critical ingredients.',
                        'video' => !empty($siteSettings['feature_video_3']) ? $siteSettings['feature_video_3'] : 'https://www.youtube.com/embed/J72X3B7F1tU'
                    ],
                    [
                        'icon' => 'fa-users-gear', 
                        'color' => '#ec4899', 
                        'bg' => 'rgba(236,72,153,.12)', 
                        'title' => 'HR & Staff Management', 
                        'desc' => 'Attendance tracking, shift scheduling, payroll generation, and clock-in/out with geo-fencing.',
                        'video' => !empty($siteSettings['feature_video_4']) ? $siteSettings['feature_video_4'] : 'https://www.youtube.com/embed/2XlG21d5c48'
                    ],
                    [
                        'icon' => 'fa-chart-pie', 
                        'color' => '#3b82f6', 
                        'bg' => 'rgba(59,130,246,.12)', 
                        'title' => 'Reports & Analytics', 
                        'desc' => 'Daily sales, cashier performance, expense tracking, void logs — all at your fingertips.',
                        'video' => !empty($siteSettings['feature_video_5']) ? $siteSettings['feature_video_5'] : 'https://www.youtube.com/embed/KjLw7H4L7uE'
                    ],
                ];
                $idx = 0;
                foreach ($featureList as $f): ?>
                <div @click="setVideo(<?php echo $idx; ?>, '<?php echo htmlspecialchars($f['video']); ?>')" 
                     class="relative flex gap-5 p-5 rounded-2xl transition-all group cursor-pointer duration-300 overflow-hidden"
                     :class="activeIndex === <?php echo $idx; ?> ? 'bg-white shadow-xl scale-[1.02] border-l-4' : 'glass hover:bg-white/60 hover:scale-[1.01] border-l-4 border-transparent'"
                     :style="activeIndex === <?php echo $idx; ?> ? 'border-left-color: <?php echo $f['color']; ?>' : ''">
                     
                    <!-- Background gradient shimmer on active -->
                    <div class="absolute inset-0 opacity-0 group-hover:opacity-10 transition-opacity duration-300 pointer-events-none" :class="activeIndex === <?php echo $idx; ?> ? '!opacity-5' : ''" style="background: linear-gradient(90deg, <?php echo $f['color']; ?>, transparent);"></div>

                    <div class="feature-icon flex-shrink-0 transition-transform duration-300 z-10" 
                         :class="activeIndex === <?php echo $idx; ?> ? 'scale-110 shadow-lg' : ''"
                         style="background:<?php echo $f['bg']; ?>;color:<?php echo $f['color']; ?>">
                        <i class="fas <?php echo $f['icon']; ?>"></i>
                    </div>
                    <div class="flex-1 z-10">
                        <div class="flex items-center justify-between mb-1.5">
                            <h3 class="text-lg font-bold text-slate-900 transition-colors duration-300" :style="activeIndex === <?php echo $idx; ?> ? 'color: <?php echo $f['color']; ?>' : ''"><?php echo $f['title']; ?></h3>
                            <!-- Play Indicator -->
                            <div class="w-8 h-8 rounded-full flex items-center justify-center transition-all duration-300"
                                 :class="activeIndex === <?php echo $idx; ?> ? 'bg-slate-900 text-white shadow-md' : 'bg-slate-100 text-slate-400 group-hover:bg-slate-200 group-hover:text-slate-600'">
                                <i class="fas" :class="activeIndex === <?php echo $idx; ?> ? 'fa-play ml-0.5' : 'fa-play ml-0.5'"></i>
                            </div>
                        </div>
                        <p class="text-sm text-slate-600 leading-relaxed pr-4"><?php echo $f['desc']; ?></p>
                    </div>
                </div>
                <?php $idx++; endforeach; ?>
            </div>
        </div>
    </div>
</section>


<!-- ═══════════ INTEGRATIONS ═══════════ -->
<section id="integrations" class="py-24 relative overflow-hidden">
    <div class="mesh" style="width:600px;height:600px;background:radial-gradient(circle,rgba(139,92,246,.1),transparent 70%);bottom:-200px;right:-200px"></div>
    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="text-center mb-16 reveal">
            <span class="inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4" style="background:rgba(236,72,153,.12);color:#f9a8d4;border:1px solid rgba(236,72,153,.2)">
                <i class="fas fa-puzzle-piece mr-1"></i> Integrations
            </span>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white">Seamlessly <span style="color:#ec4899">Connected</span></h2>
            <p class="mt-4 text-lg text-slate-400 max-w-xl mx-auto">Every module works together. From the POS to the kitchen, from the waiter to inventory — it's all one ecosystem.</p>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 reveal mt-12 relative z-20">
            <?php
            $integrations = [
                ['icon' => 'fa-cash-register', 'gradient' => 'linear-gradient(135deg,#8b5cf6,#6d28d9)', 'title' => 'POS Terminal', 'desc' => 'Fast checkout with multi-payment support, coupon system, and KOT printing for seamless service.'],
                ['icon' => 'fa-bell-concierge', 'gradient' => 'linear-gradient(135deg,#06b6d4,#0891b2)', 'title' => 'Waiter System', 'desc' => 'Waiters take orders on any device. Orders flow to the kitchen and POS in real-time.'],
                ['icon' => 'fa-fire-burner', 'gradient' => 'linear-gradient(135deg,#f59e0b,#d97706)', 'title' => 'Kitchen Display', 'desc' => 'Digital order queue replaces paper tickets. Track order status: queued → preparing → ready.'],
                ['icon' => 'fa-mobile-screen', 'gradient' => 'linear-gradient(135deg,#10b981,#059669)', 'title' => 'QR Self-Ordering', 'desc' => 'Customers scan QR codes on tables, browse the menu, and place orders without waiting.'],
                ['icon' => 'fa-warehouse', 'gradient' => 'linear-gradient(135deg,#3b82f6,#2563eb)', 'title' => 'Inventory System', 'desc' => 'Stock-in, stock-out, waste tracking, supplier management, and automated low-stock alerts.'],
                ['icon' => 'fa-id-card-clip', 'gradient' => 'linear-gradient(135deg,#ec4899,#db2777)', 'title' => 'HR & Payroll', 'desc' => 'Attendance, shifts, payroll calculation, clock-in QR cards, and geofencing — all built in.'],
            ];
            foreach ($integrations as $i): ?>
            <!-- Animated Glow Card -->
            <div class="group relative rounded-3xl p-[2px] overflow-hidden cursor-default transform transition-all duration-500 hover:-translate-y-3 hover:scale-[1.03] shadow-lg hover:shadow-2xl">
                <!-- Rotating gradient border -->
                <div class="absolute inset-[-150%] bg-gradient-to-r from-violet-500 via-cyan-400 to-pink-500 opacity-20 group-hover:opacity-100 transition-opacity duration-500 animate-[spin_3s_linear_infinite]"></div>
                
                <!-- Inner Glass Box -->
                <div class="relative bg-white/95 backdrop-blur-2xl h-full w-full rounded-[22px] p-8 flex flex-col justify-between">
                    <div class="absolute inset-0 bg-gradient-to-br from-violet-50/50 to-transparent rounded-[22px] pointer-events-none"></div>
                    <div class="relative z-10">
                        <div class="w-16 h-16 rounded-2xl flex items-center justify-center text-white text-2xl mb-6 shadow-lg transform group-hover:scale-110 group-hover:rotate-[-5deg] transition duration-500" style="background:<?php echo $i['gradient']; ?>">
                            <i class="fas <?php echo $i['icon']; ?>"></i>
                        </div>
                        <h3 class="text-xl font-extrabold text-slate-900 mb-3"><?php echo $i['title']; ?></h3>
                        <p class="text-sm text-slate-600 leading-relaxed"><?php echo $i['desc']; ?></p>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>


<!-- ═══════════ CLIENT REVIEWS ═══════════ -->
<section id="reviews" class="py-24 relative overflow-hidden">
    <div class="mesh" style="width:500px;height:500px;background:radial-gradient(circle,rgba(245,158,11,.1),transparent 70%);top:50%;right:-100px"></div>
    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="text-center mb-12 reveal">
            <span class="inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4" style="background:rgba(245,158,11,.12);color:#fcd34d;border:1px solid rgba(245,158,11,.2)">
                <i class="fas fa-star mr-1"></i> Testimonials
            </span>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white">Loved by <span style="color:#f59e0b">Restaurants</span></h2>
            <p class="mt-4 text-lg text-slate-400">Hear what our customers have to say about RestPO.</p>
        </div>

        <?php if (!empty($reviews)): ?>
        <!-- Apple-style Full Bleed Snapping Carousel -->
        <div class="relative reveal mt-12 w-full full-bleed-carousel-container">
            <div class="flex gap-6 overflow-x-auto snap-x snap-mandatory hide-scrollbar pb-16 pt-6 px-6 md:px-[calc(50vw-min(50vw,40rem))] scroll-smooth w-full" style="-webkit-overflow-scrolling: touch;">
                <?php foreach ($reviews as $review): ?>
                <div class="snap-center shrink-0 w-[85vw] md:w-[700px] lg:w-[800px] bg-white/60 backdrop-blur-2xl border border-white shadow-xl rounded-[32px] overflow-hidden flex flex-col md:flex-row items-stretch transition-all duration-700 hover:scale-[1.02] hover:bg-white/80 group relative">
                    <!-- Subtle top highlight for realistic glass edge -->
                    <div class="absolute inset-0 rounded-[32px] pointer-events-none" style="box-shadow: inset 0 2px 4px rgba(255,255,255,0.8);"></div>
                    
                    <!-- Video Embed -->
                    <div class="w-full md:w-[55%] aspect-video md:aspect-auto relative bg-slate-900 shrink-0">
                        <iframe src="<?php echo htmlspecialchars($review['youtube_url']); ?>" class="absolute inset-0 w-full h-full" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>
                    </div>

                    <!-- Review Info -->
                    <div class="p-8 md:p-10 flex-1 flex flex-col justify-center relative z-10">
                        <div class="flex items-center gap-1.5 text-amber-500 text-xs md:text-sm mb-5">
                            <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                        </div>
                        <h4 class="text-slate-900 font-bold text-2xl md:text-3xl tracking-tight leading-tight mb-3"><?php echo htmlspecialchars($review['restaurant_name']); ?></h4>
                        <?php if (!empty($review['location'])): ?>
                        <p class="text-slate-500 text-sm mb-8 font-semibold tracking-wider uppercase text-[10px]"><i class="fas fa-map-marker-alt mr-2 opacity-60"></i><?php echo htmlspecialchars($review['location']); ?></p>
                        <?php endif; ?>
                        
                        <div class="mt-auto flex items-center gap-4 pt-6 border-t border-slate-200">
                            <?php if (!empty($review['logo'])): ?>
                            <img src="/restpo/public/uploads/logos/<?php echo htmlspecialchars($review['logo']); ?>" alt="<?php echo htmlspecialchars($review['restaurant_name']); ?>" class="w-12 h-12 rounded-full object-cover border-2 border-white shadow-md">
                            <?php else: ?>
                            <div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-lg border-2 border-white shadow-md" style="background:linear-gradient(135deg,#8b5cf6,#3b82f6)">
                                <?php echo strtoupper(substr($review['restaurant_name'], 0, 1)); ?>
                            </div>
                            <?php endif; ?>
                            <div>
                                <div class="text-xs text-slate-900 font-bold">Verified Partner</div>
                                <div class="text-[10px] text-slate-500 mt-0.5 font-medium">Using RestPO Ecosystem</div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            
            <style>
                .hide-scrollbar::-webkit-scrollbar { display: none; }
                .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
                .full-bleed-carousel-container {
                    width: 100vw;
                    margin-left: calc(-50vw + 50%);
                    margin-right: calc(-50vw + 50%);
                }
            </style>
        </div>
        <?php else: ?>
        <div class="text-center py-16 text-slate-500 reveal">
            <div class="w-16 h-16 rounded-full bg-white/5 mx-auto flex items-center justify-center mb-4 border border-white/10">
                <i class="fas fa-video text-xl opacity-50"></i>
            </div>
            <p class="font-medium text-sm tracking-wide uppercase">Reviews coming soon</p>
        </div>
        <?php endif; ?>
    </div>
</section>


<!-- ═══════════ PRICING ═══════════ -->
<section id="pricing" class="py-24 relative overflow-hidden" x-data="{ region: 'bangladesh' }">
    <div class="mesh" style="width:700px;height:700px;background:radial-gradient(circle,rgba(139,92,246,.08),transparent 70%);bottom:-300px;left:-200px"></div>
    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="text-center mb-10 reveal">
            <span class="inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4" style="background:rgba(139,92,246,.12);color:#8b5cf6;border:1px solid rgba(139,92,246,.2)">
                <i class="fas fa-tag mr-1"></i> Pricing
            </span>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-slate-900">Luxurious & Transparent <span class="text-violet-600">Pricing</span></h2>
            <p class="mt-4 text-lg text-slate-600">Choose the perfect plan tailored for your restaurant operations.</p>
        </div>

        <!-- Sliding Premium Toggle Switch -->
        <div class="flex justify-center mb-16 reveal">
            <div class="relative bg-slate-100 p-1 rounded-full inline-flex border border-slate-200/80 shadow-inner">
                <!-- Sliding Background -->
                <div class="absolute top-1 bottom-1 left-1 rounded-full bg-gradient-to-r from-violet-600 to-indigo-600 transition-all duration-300 shadow"
                     :style="region === 'bangladesh' ? 'width: 170px; transform: translateX(0px);' : 'width: 170px; transform: translateX(170px);'"></div>
                
                <!-- Bangladesh Button -->
                <button type="button" @click="region = 'bangladesh'" 
                        class="relative z-10 w-[170px] py-2.5 text-xs font-bold rounded-full transition-colors duration-300 focus:outline-none flex items-center justify-center gap-2"
                        :class="region === 'bangladesh' ? 'text-white' : 'text-slate-600 hover:text-slate-900'">
                    <span>🇧🇩</span> Bangladesh (BDT)
                </button>
                
                <!-- Global Button -->
                <button type="button" @click="region = 'global'" 
                        class="relative z-10 w-[170px] py-2.5 text-xs font-bold rounded-full transition-colors duration-300 focus:outline-none flex items-center justify-center gap-2"
                        :class="region === 'global' ? 'text-white' : 'text-slate-600 hover:text-slate-900'">
                    <span>🌍</span> Global (USD)
                </button>
            </div>
        </div>

        <div>
            <!-- USD Plans -->
            <div x-show="region === 'global'" class="grid sm:grid-cols-2 lg:grid-cols-<?php echo count($usdPackages); ?> gap-6" x-transition>
                <?php foreach ($usdPackages as $idx => $pkg):
                    $features = $pkg['features_decoded'];
                    $isTrial = !empty($features['is_trial']);
                    $isPopular = stripos($pkg['name'], 'premium') !== false;
                    $isAdvanced = stripos($pkg['name'], 'advanced') !== false || stripos($pkg['name'], 'pro') !== false;
                ?>
                <div class="pricing-card glass-strong rounded-3xl p-7 flex flex-col <?php echo $isPopular ? 'popular' : ''; ?> relative">
                    <?php if ($isPopular): ?>
                    <div class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold text-white flex items-center gap-1.5" style="background:linear-gradient(135deg,#8b5cf6,#6d28d9)">
                        <i class="fas fa-crown text-2xs"></i> Most Popular
                    </div>
                    <?php endif; ?>
                    <div class="mb-6">
                        <h3 class="text-xl font-bold text-slate-900"><?php echo htmlspecialchars($pkg['name']); ?></h3>
                        <div class="mt-3">
                            <span class="text-4xl font-extrabold text-slate-900">$<?php echo number_format($pkg['price'], 2); ?></span>
                            <span class="text-slate-500 text-sm">/ <?php echo !empty($features['is_lifetime']) ? 'lifetime' : $pkg['duration_days'] . ' days'; ?></span>
                        </div>
                    </div>
                    <ul class="space-y-3.5 flex-1 mb-8">
                        <li class="flex items-center gap-3 text-slate-700 font-medium">
                            <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-emerald-600 text-2xs"></i>
                            </div>
                            <span><?php echo ($features['max_floors'] ?? null) === null ? 'Unlimited' : $features['max_floors']; ?> Floor<?php echo ($features['max_floors'] ?? 0) !== 1 ? 's' : ''; ?></span>
                        </li>
                        <li class="flex items-center gap-3 text-slate-700 font-medium">
                            <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-emerald-600 text-2xs"></i>
                            </div>
                            <span><?php echo ($features['max_tables'] ?? null) === null ? 'Unlimited' : $features['max_tables']; ?> Tables</span>
                        </li>
                        <li class="flex items-center gap-3 text-slate-700 font-medium">
                            <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-emerald-600 text-2xs"></i>
                            </div>
                            <span><?php echo ($features['max_cashiers'] ?? null) === null ? 'Unlimited' : $features['max_cashiers']; ?> Cashier<?php echo ($features['max_cashiers'] ?? 0) !== 1 ? 's' : ''; ?></span>
                        </li>
                        <li class="flex items-center gap-3 text-slate-700 font-medium">
                            <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-emerald-600 text-2xs"></i>
                            </div>
                            <span><?php echo ($features['max_waiters'] ?? null) === null ? 'Unlimited' : $features['max_waiters']; ?> Waiters</span>
                        </li>
                        <li class="flex items-center gap-3 <?php echo !empty($features['qr_ordering']) ? 'text-slate-700 font-medium' : 'text-slate-400/80'; ?>">
                            <?php if (!empty($features['qr_ordering'])): ?>
                                <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-emerald-600 text-2xs"></i>
                                </div>
                            <?php else: ?>
                                <div class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0 border border-slate-200/40">
                                    <i class="fas fa-times text-slate-400 text-2xs"></i>
                                </div>
                            <?php endif; ?>
                            <span>QR Ordering</span>
                        </li>
                        <li class="flex items-center gap-3 <?php echo !empty($features['kitchen_display']) ? 'text-slate-700 font-medium' : 'text-slate-400/80'; ?>">
                            <?php if (!empty($features['kitchen_display'])): ?>
                                <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-emerald-600 text-2xs"></i>
                                </div>
                            <?php else: ?>
                                <div class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0 border border-slate-200/40">
                                    <i class="fas fa-times text-slate-400 text-2xs"></i>
                                </div>
                            <?php endif; ?>
                            <span>Kitchen Display</span>
                        </li>
                        <li class="flex items-center gap-3 <?php echo !empty($features['inventory']) ? 'text-slate-700 font-medium' : 'text-slate-400/80'; ?>">
                            <?php if (!empty($features['inventory'])): ?>
                                <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-emerald-600 text-2xs"></i>
                                </div>
                            <?php else: ?>
                                <div class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0 border border-slate-200/40">
                                    <i class="fas fa-times text-slate-400 text-2xs"></i>
                                </div>
                            <?php endif; ?>
                            <span>Inventory Management</span>
                        </li>
                        <li class="flex items-center gap-3 <?php echo !empty($features['staff_management']) ? 'text-slate-700 font-medium' : 'text-slate-400/80'; ?>">
                            <?php if (!empty($features['staff_management'])): ?>
                                <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-emerald-600 text-2xs"></i>
                                </div>
                            <?php else: ?>
                                <div class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0 border border-slate-200/40">
                                    <i class="fas fa-times text-slate-400 text-2xs"></i>
                                </div>
                            <?php endif; ?>
                            <span>Staff / HR Management</span>
                        </li>
                    </ul>
                    <a href="/restpo/register?package=<?php echo $pkg['id']; ?>" class="<?php echo $isPopular ? 'btn-cta' : 'btn-outline'; ?> block text-center px-6 py-3.5 rounded-xl font-bold text-sm">
                        <?php echo $isTrial ? 'Start Free Trial' : 'Get Started'; ?>
                    </a>
                </div>
                <?php endforeach; ?>
            </div>

            <!-- BDT Plans -->
            <div x-show="region === 'bangladesh'" class="grid sm:grid-cols-2 lg:grid-cols-<?php echo count($bdtPackages); ?> gap-6" x-transition>
                <?php foreach ($bdtPackages as $idx => $pkg):
                    $features = $pkg['features_decoded'];
                    $isTrial = !empty($features['is_trial']);
                    $isPopular = stripos($pkg['name'], 'premium') !== false;
                ?>
                <div class="pricing-card glass-strong rounded-3xl p-7 flex flex-col <?php echo $isPopular ? 'popular' : ''; ?> relative">
                    <?php if ($isPopular): ?>
                    <div class="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full text-xs font-bold text-white flex items-center gap-1.5" style="background:linear-gradient(135deg,#8b5cf6,#6d28d9)">
                        <i class="fas fa-crown text-2xs"></i> Most Popular
                    </div>
                    <?php endif; ?>
                    <div class="mb-6">
                        <h3 class="text-xl font-bold text-slate-900"><?php echo htmlspecialchars($pkg['name']); ?></h3>
                        <div class="mt-3">
                            <span class="text-4xl font-extrabold text-slate-900">৳<?php echo number_format($pkg['price'], 0); ?></span>
                            <span class="text-slate-500 text-sm">/ <?php echo !empty($features['is_lifetime']) ? 'lifetime' : $pkg['duration_days'] . ' days'; ?></span>
                        </div>
                    </div>
                    <ul class="space-y-3.5 flex-1 mb-8">
                        <li class="flex items-center gap-3 text-slate-700 font-medium">
                            <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-emerald-600 text-2xs"></i>
                            </div>
                            <span><?php echo ($features['max_floors'] ?? null) === null ? 'Unlimited' : $features['max_floors']; ?> Floor<?php echo ($features['max_floors'] ?? 0) !== 1 ? 's' : ''; ?></span>
                        </li>
                        <li class="flex items-center gap-3 text-slate-700 font-medium">
                            <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-emerald-600 text-2xs"></i>
                            </div>
                            <span><?php echo ($features['max_tables'] ?? null) === null ? 'Unlimited' : $features['max_tables']; ?> Tables</span>
                        </li>
                        <li class="flex items-center gap-3 text-slate-700 font-medium">
                            <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-emerald-600 text-2xs"></i>
                            </div>
                            <span><?php echo ($features['max_cashiers'] ?? null) === null ? 'Unlimited' : $features['max_cashiers']; ?> Cashier<?php echo ($features['max_cashiers'] ?? 0) !== 1 ? 's' : ''; ?></span>
                        </li>
                        <li class="flex items-center gap-3 text-slate-700 font-medium">
                            <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-emerald-600 text-2xs"></i>
                            </div>
                            <span><?php echo ($features['max_waiters'] ?? null) === null ? 'Unlimited' : $features['max_waiters']; ?> Waiters</span>
                        </li>
                        <li class="flex items-center gap-3 <?php echo !empty($features['qr_ordering']) ? 'text-slate-700 font-medium' : 'text-slate-400/80'; ?>">
                            <?php if (!empty($features['qr_ordering'])): ?>
                                <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-emerald-600 text-2xs"></i>
                                </div>
                            <?php else: ?>
                                <div class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0 border border-slate-200/40">
                                    <i class="fas fa-times text-slate-400 text-2xs"></i>
                                </div>
                            <?php endif; ?>
                            <span>QR Ordering</span>
                        </li>
                        <li class="flex items-center gap-3 <?php echo !empty($features['kitchen_display']) ? 'text-slate-700 font-medium' : 'text-slate-400/80'; ?>">
                            <?php if (!empty($features['kitchen_display'])): ?>
                                <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-emerald-600 text-2xs"></i>
                                </div>
                            <?php else: ?>
                                <div class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0 border border-slate-200/40">
                                    <i class="fas fa-times text-slate-400 text-2xs"></i>
                                </div>
                            <?php endif; ?>
                            <span>Kitchen Display</span>
                        </li>
                        <li class="flex items-center gap-3 <?php echo !empty($features['inventory']) ? 'text-slate-700 font-medium' : 'text-slate-400/80'; ?>">
                            <?php if (!empty($features['inventory'])): ?>
                                <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-emerald-600 text-2xs"></i>
                                </div>
                            <?php else: ?>
                                <div class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0 border border-slate-200/40">
                                    <i class="fas fa-times text-slate-400 text-2xs"></i>
                                </div>
                            <?php endif; ?>
                            <span>Inventory Management</span>
                        </li>
                        <li class="flex items-center gap-3 <?php echo !empty($features['staff_management']) ? 'text-slate-700 font-medium' : 'text-slate-400/80'; ?>">
                            <?php if (!empty($features['staff_management'])): ?>
                                <div class="w-5 h-5 rounded-full bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-emerald-600 text-2xs"></i>
                                </div>
                            <?php else: ?>
                                <div class="w-5 h-5 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0 border border-slate-200/40">
                                    <i class="fas fa-times text-slate-400 text-2xs"></i>
                                </div>
                            <?php endif; ?>
                            <span>Staff / HR Management</span>
                        </li>
                    </ul>
                    <a href="/restpo/register?package=<?php echo $pkg['id']; ?>" class="<?php echo $isPopular ? 'btn-cta' : 'btn-outline'; ?> block text-center px-6 py-3.5 rounded-xl font-bold text-sm">
                        <?php echo $isTrial ? 'Start Free Trial' : 'Get Started'; ?>
                    </a>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>


<!-- ═══════════ FAQ ═══════════ -->
<section id="faq" class="py-24 relative">
    <div class="max-w-3xl mx-auto px-6 relative z-10">
        <div class="text-center mb-12 reveal">
            <span class="inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4" style="background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.2)">
                <i class="fas fa-circle-question mr-1"></i> FAQ
            </span>
            <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900">Frequently Asked <span class="text-emerald-600">Questions</span></h2>
        </div>

        <div class="space-y-3 reveal" x-data="{ openFaq: null }">
            <?php
            $faqs = [
                ['q' => 'How do I get started with RestPO?', 'a' => 'Simply click "Get Started," fill in your restaurant details, and our team will review your application. Once approved, you\'ll receive login credentials via email and can start using the platform immediately.'],
                ['q' => 'Can I try before I buy?', 'a' => 'Absolutely! We offer a 14-day free trial with access to core features. No credit card required. After the trial, you can choose a plan that fits your needs.'],
                ['q' => 'Is my data secure?', 'a' => 'Yes. All data is encrypted with SSL, stored on secure cloud servers, and backed up daily. We follow industry-standard security practices to protect your restaurant data.'],
                ['q' => 'Can I upgrade or downgrade my plan?', 'a' => 'Yes, you can change your plan anytime from your admin dashboard. Upgrades take effect immediately, and downgrades apply at the end of your current billing cycle.'],
                ['q' => 'Do I need special hardware?', 'a' => 'No! RestPO is entirely web-based. It works on any device with a modern web browser — laptops, tablets, smartphones, and even smart TVs for the kitchen display.'],
                ['q' => 'What payment methods do you accept?', 'a' => 'We accept bank transfers, mobile banking (bKash, Nagad for Bangladesh), and international card payments. Contact our team for more options.'],
                ['q' => 'Can I use RestPO for multiple restaurant branches?', 'a' => 'Yes! Each branch gets its own separate account with independent menus, staff, and reporting. Contact our sales team for multi-branch pricing.'],
            ];
            foreach ($faqs as $i => $faq): ?>
            <div class="faq-item" style="background:rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 12px rgba(0,0,0,0.02)">
                <button @click="openFaq = openFaq === <?php echo $i; ?> ? null : <?php echo $i; ?>" class="w-full text-left px-6 py-5 flex items-center justify-between">
                    <span class="text-sm font-semibold text-slate-800 pr-4"><?php echo $faq['q']; ?></span>
                    <i class="fas fa-chevron-down text-xs text-slate-500 transition-transform duration-300" :class="openFaq === <?php echo $i; ?> ? 'rotate-180 text-purple-600' : ''"></i>
                </button>
                <div x-show="openFaq === <?php echo $i; ?>" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" class="px-6 pb-5" style="display:none">
                    <p class="text-sm text-slate-650 leading-relaxed"><?php echo $faq['a']; ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>


<!-- ═══════════ CONTACT ═══════════ -->
<section id="contact" class="py-24 relative">
    <div class="mesh" style="width:500px;height:500px;background:radial-gradient(circle,rgba(6,182,212,.1),transparent 70%);top:0;left:-100px"></div>
    <div class="max-w-5xl mx-auto px-6 relative z-10">
        <div class="text-center mb-12 reveal">
            <span class="inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase mb-4" style="background:rgba(59,130,246,.12);color:#2563eb;border:1px solid rgba(59,130,246,.2)">
                <i class="fas fa-paper-plane mr-1"></i> Contact Us
            </span>
            <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900">Get in <span style="color:#3b82f6">Touch</span></h2>
            <p class="mt-4 text-lg text-slate-600 font-medium">Have questions? We'd love to hear from you.</p>
        </div>

        <div class="grid lg:grid-cols-5 gap-8 reveal">
            <!-- Info -->
            <div class="lg:col-span-2 space-y-6">
                <div class="glass-strong rounded-2xl p-6">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center text-blue-500" style="background:rgba(59,130,246,.12)">
                            <i class="fas fa-envelope text-lg"></i>
                        </div>
                        <div>
                            <p class="text-xs text-slate-500 uppercase tracking-wider">Email</p>
                            <p class="text-sm text-slate-800 font-semibold"><?php echo htmlspecialchars($contactEmail); ?></p>
                        </div>
                    </div>
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center text-emerald-500" style="background:rgba(16,185,129,.12)">
                            <i class="fas fa-phone text-lg"></i>
                        </div>
                        <div>
                            <p class="text-xs text-slate-500 uppercase tracking-wider">Phone</p>
                            <p class="text-sm text-slate-800 font-semibold"><?php echo htmlspecialchars($contactPhone); ?></p>
                        </div>
                    </div>
                    <?php if ($contactAddress): ?>
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 rounded-xl flex items-center justify-center text-purple-500" style="background:rgba(139,92,246,.12)">
                            <i class="fas fa-location-dot text-lg"></i>
                        </div>
                        <div>
                            <p class="text-xs text-slate-500 uppercase tracking-wider">Address</p>
                            <p class="text-sm text-slate-800 font-semibold"><?php echo htmlspecialchars($contactAddress); ?></p>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Form -->
            <div class="lg:col-span-3">
                <form id="contactForm" class="glass-strong rounded-2xl p-8 space-y-5">
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-2">Name *</label>
                            <input type="text" name="name" required placeholder="Your Name" class="form-input">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-2">Email *</label>
                            <input type="email" name="email" required placeholder="you@email.com" class="form-input">
                        </div>
                    </div>
                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-2">Phone</label>
                            <input type="text" name="phone" placeholder="+880 ..." class="form-input">
                        </div>
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-2">Subject *</label>
                            <input type="text" name="subject" required placeholder="How can we help?" class="form-input">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-2">Message *</label>
                        <textarea name="message" required rows="4" placeholder="Tell us more..." class="form-input h-32 resize-none"></textarea>
                    </div>
                    <div class="flex items-center justify-between">
                        <div id="contactMsg" class="text-sm"></div>
                        <button type="submit" id="contactBtn" class="btn-cta px-8 py-3.5 rounded-xl text-sm font-bold text-white inline-flex items-center gap-2">
                            <i class="fas fa-paper-plane"></i> Send Message
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>


<!-- ═══════════ CTA BANNER ═══════════ -->
<section class="py-20 relative overflow-hidden">
    <div class="max-w-4xl mx-auto px-6 text-center reveal">
        <div class="glass-strong rounded-3xl p-12 md:p-16 relative overflow-hidden">
            <div class="absolute inset-0 opacity-20" style="background:linear-gradient(135deg,#8b5cf6,#06b6d4)"></div>
            <div class="relative z-10">
                <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4">Ready to Transform Your Restaurant?</h2>
                <p class="text-lg text-slate-650 mb-8 max-w-lg mx-auto">Join hundreds of restaurants already using RestPO. Start your free trial today — no credit card required.</p>
                <a href="/restpo/register" class="btn-cta px-10 py-4 rounded-2xl text-base font-bold text-white inline-flex items-center gap-3 shadow-2xl">
                    <i class="fas fa-rocket"></i> Get Started for Free
                </a>
            </div>
        </div>
    </div>
</section>


<!-- ═══════════ FOOTER ═══════════ -->
<footer class="border-t border-slate-200 py-16">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
            <div>
                <div class="flex items-center gap-3 mb-5">
                    <?php if (!empty($siteSettings['website_logo'])): ?>
                        <img src="<?php echo htmlspecialchars($siteSettings['website_logo']); ?>" alt="RestPO" class="h-10 object-contain rounded-lg">
                    <?php else: ?>
                        <div class="w-9 h-9 rounded-xl flex items-center justify-center" style="background:linear-gradient(135deg,#8b5cf6,#3b82f6)">
                            <i class="fas fa-utensils text-white text-sm"></i>
                        </div>
                        <span class="text-lg font-bold text-slate-900">Rest<span class="text-purple-600">PO</span></span>
                    <?php endif; ?>
                </div>
                <p class="text-sm text-slate-500 leading-relaxed"><?php echo htmlspecialchars($siteSettings['footer_text'] ?? 'All-in-one restaurant management platform. Built with love for restaurants that demand excellence.'); ?></p>
            </div>
            <div>
                <h4 class="text-sm font-bold text-slate-900 uppercase tracking-wider mb-4">Product</h4>
                <ul class="space-y-2.5 text-sm text-slate-500">
                    <li><a href="#features" class="hover:text-violet-600 transition">Features</a></li>
                    <li><a href="#pricing" class="hover:text-violet-600 transition">Pricing</a></li>
                    <li><a href="#integrations" class="hover:text-violet-600 transition">Integrations</a></li>
                    <li><a href="#reviews" class="hover:text-violet-600 transition">Reviews</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-sm font-bold text-slate-900 uppercase tracking-wider mb-4">Company</h4>
                <ul class="space-y-2.5 text-sm text-slate-500">
                    <li><a href="#contact" class="hover:text-violet-600 transition">Contact</a></li>
                    <li><a href="#faq" class="hover:text-violet-600 transition">FAQ</a></li>
                    <li><a href="/restpo/login" class="hover:text-violet-600 transition">Login</a></li>
                    <li><a href="/restpo/register" class="hover:text-violet-600 transition">Register</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-sm font-bold text-slate-900 uppercase tracking-wider mb-4">Connect</h4>
                <div class="flex gap-3">
                    <?php if (!empty($siteSettings['footer_facebook'])): ?>
                    <a href="<?php echo htmlspecialchars($siteSettings['footer_facebook']); ?>" target="_blank" class="w-10 h-10 rounded-xl glass flex items-center justify-center text-slate-400 hover:text-[#1877F2] hover:border-[#1877F2]/30 transition"><i class="fab fa-facebook-f"></i></a>
                    <?php endif; ?>
                    
                    <?php if (!empty($siteSettings['footer_twitter'])): ?>
                    <a href="<?php echo htmlspecialchars($siteSettings['footer_twitter']); ?>" target="_blank" class="w-10 h-10 rounded-xl glass flex items-center justify-center text-slate-400 hover:text-[#1DA1F2] hover:border-[#1DA1F2]/30 transition"><i class="fab fa-twitter"></i></a>
                    <?php endif; ?>
                    
                    <?php if (!empty($siteSettings['footer_instagram'])): ?>
                    <a href="<?php echo htmlspecialchars($siteSettings['footer_instagram']); ?>" target="_blank" class="w-10 h-10 rounded-xl glass flex items-center justify-center text-slate-400 hover:text-[#E4405F] hover:border-[#E4405F]/30 transition"><i class="fab fa-instagram"></i></a>
                    <?php endif; ?>
                    
                    <?php if (!empty($siteSettings['footer_linkedin'])): ?>
                    <a href="<?php echo htmlspecialchars($siteSettings['footer_linkedin']); ?>" target="_blank" class="w-10 h-10 rounded-xl glass flex items-center justify-center text-slate-400 hover:text-[#0A66C2] hover:border-[#0A66C2]/30 transition"><i class="fab fa-linkedin-in"></i></a>
                    <?php endif; ?>
                    
                    <?php if (empty($siteSettings['footer_facebook']) && empty($siteSettings['footer_twitter']) && empty($siteSettings['footer_instagram']) && empty($siteSettings['footer_linkedin'])): ?>
                    <div class="text-xs text-slate-400 italic">No social links configured.</div>
                    <?php endif; ?>
                </div>
                <p class="text-xs text-slate-600 mt-5">Email: <?php echo htmlspecialchars($contactEmail); ?></p>
                <p class="text-xs text-slate-600">Phone: <?php echo htmlspecialchars($contactPhone); ?></p>
            </div>
        </div>
        <div class="border-t border-slate-200 pt-6 flex flex-col sm:flex-row justify-between items-center gap-4">
            <p class="text-xs text-slate-600">&copy; <?php echo date('Y'); ?> RestPO. All rights reserved.</p>
            <div class="flex gap-4 text-xs text-slate-600">
                <a href="#" class="hover:text-slate-950 transition">Privacy Policy</a>
                <a href="#" class="hover:text-slate-950 transition">Terms of Service</a>
            </div>
        </div>
    </div>
</footer>


<script>
// ─── Scroll Reveal ───
const revealElements = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
revealElements.forEach(el => observer.observe(el));

// ─── Floating Particles ───
(function() {
    const container = document.getElementById('particles');
    if (!container) return;
    for (let i = 0; i < 20; i++) {
        const p = document.createElement('div');
        p.classList.add('particle');
        const size = Math.random() * 3 + 1;
        p.style.cssText = `
            width:${size}px;height:${size}px;
            left:${Math.random()*100}%;
            bottom:-10px;
            background:rgba(${Math.random()>0.5?'139,92,246':'6,182,212'},${Math.random()*0.4+0.2});
            animation-duration:${Math.random()*15+10}s;
            animation-delay:${Math.random()*10}s;
        `;
        container.appendChild(p);
    }
})();

// ─── Contact Form AJAX ───
document.getElementById('contactForm')?.addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('contactBtn');
    const msg = document.getElementById('contactMsg');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
    
    try {
        const formData = new FormData(this);
        const resp = await fetch('/restpo/contact/submit', { method: 'POST', body: formData });
        const data = await resp.json();
        msg.innerHTML = data.success 
            ? '<span class="text-emerald-400"><i class="fas fa-check-circle mr-1"></i>' + data.message + '</span>'
            : '<span class="text-red-400"><i class="fas fa-exclamation-circle mr-1"></i>' + data.message + '</span>';
        if (data.success) this.reset();
    } catch (err) {
        msg.innerHTML = '<span class="text-red-400">Something went wrong. Please try again.</span>';
    }
    
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-paper-plane"></i> Send Message';
});

// ─── Review Carousel ───
function reviewCarousel() {
    return {
        scrollLeft() {
            this.$refs.track.scrollBy({ left: -400, behavior: 'smooth' });
        },
        scrollRight() {
            this.$refs.track.scrollBy({ left: 400, behavior: 'smooth' });
        }
    };
}

// ─── Smooth scroll for nav links ───
document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', function(e) {
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            e.preventDefault();
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    });
});
</script>

</body>
</html>
