<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
if (!defined('BASE_PATH')) {
    require_once __DIR__ . '/../config/database.php';
    require_once __DIR__ . '/../config/config.php';
}

$db = Database::getInstance()->getConnection();

$settingsStmt = $db->query("SELECT setting_key, setting_value FROM website_settings");
$settings = [];
while ($row = $settingsStmt->fetch()) {
    $settings[$row['setting_key']] = $row['setting_value'];
}

$plansStmt = $db->query("SELECT * FROM pricing_plans WHERE is_active = 1 ORDER BY sort_order ASC");
$plans = $plansStmt->fetchAll();

$testimonialsStmt = $db->query("SELECT * FROM testimonials WHERE is_active = 1 ORDER BY sort_order ASC");
$testimonials = $testimonialsStmt->fetchAll();

$faqsStmt = $db->query("SELECT * FROM faqs WHERE is_active = 1 ORDER BY sort_order ASC");
$faqs = $faqsStmt->fetchAll();

$csrf = new CSRF();
$csrfToken = $csrf->getToken();

$siteName = sanitize($settings['site_name'] ?? 'Tap2Order');
$heroTitle = sanitize($settings['meta_title'] ?? 'Tap2Order - QR Menu & Ordering Platform for Restaurants');
$heroDesc = sanitize($settings['site_description'] ?? 'Transform your restaurant with Tap2Order - the all-in-one QR menu and ordering platform. Go digital in minutes.');
$contactPhone = sanitize($settings['contact_phone'] ?? '+1 (555) 123-4567');
$contactEmail = sanitize($settings['contact_email'] ?? 'support@tap2order.com');
$contactWhatsapp = sanitize($settings['contact_whatsapp'] ?? '+15551234567');
$contactAddress = sanitize($settings['contact_address'] ?? '123 Business Ave, Tech City, TC 10001');
$facebookUrl = sanitize($settings['social_facebook'] ?? '#');
$instagramUrl = sanitize($settings['social_instagram'] ?? '#');
$twitterUrl = sanitize($settings['social_twitter'] ?? '#');
$copyrightText = sanitize($settings['copyright_text'] ?? '© 2026 Tap2Order. All rights reserved.');
$siteTagline = sanitize($settings['site_tagline'] ?? 'Smart QR Menu & Ordering Platform for Restaurants');
$metaTitle = sanitize($settings['meta_title'] ?? 'Tap2Order - QR Menu & Ordering Platform for Restaurants');
$metaDesc = sanitize($settings['meta_description'] ?? 'Transform your restaurant with smart QR menus and online ordering.');
$metaKeywords = sanitize($settings['meta_keywords'] ?? 'QR menu, restaurant ordering, digital menu, online ordering');

$whatsappLink = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $contactWhatsapp);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $metaTitle; ?></title>
    <meta name="description" content="<?php echo $metaDesc; ?>">
    <meta name="keywords" content="<?php echo $metaKeywords; ?>">
    <meta property="og:title" content="<?php echo $metaTitle; ?>">
    <meta property="og:description" content="<?php echo $metaDesc; ?>">
    <meta property="og:type" content="website">
    <meta property="og:url" content="<?php echo APP_URL; ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/assets/css/public.css">
    <link rel="stylesheet" href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/assets/css/tap2order-landing.css">
</head>
<body class="tap2order-landing">

<!-- Navigation -->
<header class="t2o-header" id="t2o-header">
    <div class="t2o-container">
        <a href="#home" class="t2o-brand">
            <i class="fas fa-mobile-screen-button"></i> Tap<span>2</span>Order
        </a>
        <button class="t2o-menu-toggle" type="button" aria-label="Open navigation" aria-expanded="false">
            <i class="fas fa-bars"></i>
        </button>
        <nav class="t2o-nav-menu">
            <a href="#home">Home</a>
            <a href="#features">Features</a>
            <a href="#how-it-works">How It Works</a>
            <a href="#demo">Demo</a>
            <a href="#faq">FAQ</a>
            <a href="#contact">Contact</a>
        </nav>
        <div class="t2o-nav-actions">
            <a href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/login.php" class="t2o-login-btn">Restaurant Login</a>
            <a href="#contact" class="t2o-start-btn">Get Started</a>
        </div>
    </div>
</header>

<!-- Hero Section -->
<section class="hero" id="home">
    <div class="container">
        <div class="hero-content">
            <div class="hero-badge">
                <i class="fas fa-bolt"></i> Smart QR Menu & Ordering
            </div>
            <h1>Turn Every Table into a <span class="highlight">Smart Ordering</span> Experience</h1>
            <p>Let customers scan, browse, order, and enjoy — with Tap2Order. The all-in-one digital menu and ordering platform built for modern restaurants.</p>
            <div class="hero-actions">
                <a href="#contact" class="btn btn-primary btn-lg">
                    <i class="fas fa-rocket"></i> Request a Demo
                </a>
                <a href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/menu.php?r=ocean-spice" class="btn btn-outline btn-lg">
                    <i class="fas fa-eye"></i> View Demo Menu
                </a>
                <a href="#contact" class="btn btn-outline btn-lg">
                    <i class="fas fa-envelope"></i> Contact Us
                </a>
            </div>
            <div class="hero-stats">
                <div class="hero-stat">
                    <div class="stat-number">500+</div>
                    <div class="stat-label">Restaurants</div>
                </div>
                <div class="hero-stat">
                    <div class="stat-number">50K+</div>
                    <div class="stat-label">Orders Processed</div>
                </div>
                <div class="hero-stat">
                    <div class="stat-number">98%</div>
                    <div class="stat-label">Satisfaction Rate</div>
                </div>
            </div>
        </div>
        <div class="hero-image">
            <div class="phone-mockup">
                <div class="phone-frame">
                    <div class="phone-notch"></div>
                    <div class="phone-screen">
                        <div class="mock-header">
                            <div class="mock-restaurant-name">Ocean Spice</div>
                            <div class="mock-tagline">Seafood & Grill</div>
                        </div>
                        <div class="mock-category">
                            <span class="mock-cat active">Starters</span>
                            <span class="mock-cat">Mains</span>
                            <span class="mock-cat">Drinks</span>
                        </div>
                        <div class="mock-item">
                            <div class="mock-item-info">
                                <div class="mock-item-name">Grilled Calamari</div>
                                <div class="mock-item-desc">Fresh squid with lemon butter</div>
                                <div class="mock-item-price">$12.99</div>
                            </div>
                        </div>
                        <div class="mock-item">
                            <div class="mock-item-info">
                                <div class="mock-item-name">Prawn Cocktail</div>
                                <div class="mock-item-desc">Tiger prawns with cocktail sauce</div>
                                <div class="mock-item-price">$14.50</div>
                            </div>
                        </div>
                        <div class="mock-item">
                            <div class="mock-item-info">
                                <div class="mock-item-name">Crab Cakes</div>
                                <div class="mock-item-desc">Pan-seared with aioli</div>
                                <div class="mock-item-price">$16.00</div>
                            </div>
                        </div>
                        <div class="mock-qr-hint">
                            <i class="fas fa-qrcode"></i> Scan to Order
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="section" id="features">
    <div class="container">
        <div class="section-title animate-on-scroll">
            <h2>Powerful Features for Modern Restaurants</h2>
            <p>Everything you need to digitize your restaurant operations and delight your customers.</p>
        </div>
        <div class="features-grid">
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-red"><i class="fas fa-qrcode"></i></div>
                <h3>QR Digital Menu</h3>
                <p>Generate unique QR codes for each table. Customers scan and instantly view your full menu with images and prices.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-blue"><i class="fas fa-book-open"></i></div>
                <h3>Menu View Only</h3>
                <p>Perfect for restaurants that want a digital menu without ordering. Let customers browse at their own pace.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-green"><i class="fas fa-cart-shopping"></i></div>
                <h3>QR Ordering</h3>
                <p>Full ordering system where customers select items, customize, and place orders directly from their phone.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-orange"><i class="fas fa-table-cells"></i></div>
                <h3>Table-Based Ordering</h3>
                <p>Each QR code is tied to a specific table. Orders are automatically linked to the correct table for easy service.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-red"><i class="fas fa-tag"></i></div>
                <h3>Offers & Promotions</h3>
                <p>Create and display special offers, discounts, and combo deals. Promote daily specials to attract more customers.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-blue"><i class="fas fa-building"></i></div>
                <h3>Multi-Restaurant Management</h3>
                <p>Manage multiple restaurant branches from a single dashboard. Centralized control with branch-specific settings.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-green"><i class="fas fa-gauge-high"></i></div>
                <h3>Restaurant Dashboard</h3>
                <p>Powerful admin dashboard with real-time overview of orders, revenue, popular items, and customer analytics.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-orange"><i class="fas fa-fire-burner"></i></div>
                <h3>Kitchen Order Management</h3>
                <p>Dedicated kitchen display system for receiving, preparing, and updating order statuses in real-time.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-red"><i class="fas fa-clock-rotate-left"></i></div>
                <h3>Real-Time Order Status</h3>
                <p>Customers can track their order status from placed to preparing to ready — all updated in real-time.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-blue"><i class="fas fa-chart-line"></i></div>
                <h3>Menu Analytics</h3>
                <p>Track which items are viewed most, best sellers, peak hours, and customer preferences with detailed analytics.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-green"><i class="fas fa-palette"></i></div>
                <h3>Custom Branding</h3>
                <p>Customize colors, fonts, and layouts to match your restaurant's identity. Make the menu truly yours.</p>
            </div>
            <div class="feature-card animate-on-scroll">
                <div class="feature-icon icon-orange"><i class="fas fa-mobile-screen"></i></div>
                <h3>Mobile-Friendly</h3>
                <p>Fully responsive design that looks stunning on any device. No app download required for your customers.</p>
            </div>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section class="section section-gray" id="how-it-works">
    <div class="container">
        <div class="section-title animate-on-scroll">
            <h2>How It Works</h2>
            <p>Get started with Tap2Order in six simple steps.</p>
        </div>
        <div class="steps-grid">
            <div class="step-card animate-on-scroll">
                <div class="step-number">1</div>
                <h3>Register Your Restaurant</h3>
                <p>Sign up and create your restaurant profile on Tap2Order in just a few minutes.</p>
            </div>
            <div class="step-card animate-on-scroll">
                <div class="step-number">2</div>
                <h3>Add Your Menu</h3>
                <p>Upload your menu items with photos, prices, descriptions, and categories.</p>
            </div>
            <div class="step-card animate-on-scroll">
                <div class="step-number">3</div>
                <h3>Generate QR Codes</h3>
                <p>Auto-generate unique QR codes for each table. Print and place them on your tables.</p>
            </div>
            <div class="step-card animate-on-scroll">
                <div class="step-number">4</div>
                <h3>Customer Scans QR</h3>
                <p>Customers scan the QR code with their phone camera — no app needed.</p>
            </div>
            <div class="step-card animate-on-scroll">
                <div class="step-number">5</div>
                <h3>Browse & Order</h3>
                <p>Customers view the digital menu, customize selections, and place their order.</p>
            </div>
            <div class="step-card animate-on-scroll">
                <div class="step-number">6</div>
                <h3>Receive & Serve</h3>
                <p>Your team receives the order instantly, prepares it, and serves the customer.</p>
            </div>
        </div>
    </div>
</section>

<!-- Demo Section -->
<section class="section" id="demo">
    <div class="container">
        <div class="section-title animate-on-scroll">
            <h2>See It in Action</h2>
            <p>Try our interactive demos to experience Tap2Order firsthand.</p>
        </div>
        <div class="features-grid">
            <div class="feature-card animate-on-scroll" style="text-align:center;">
                <div class="feature-icon icon-blue" style="margin:0 auto 20px;"><i class="fas fa-book-open"></i></div>
                <h3>Menu View Only Demo</h3>
                <p>Experience a beautiful digital menu without ordering functionality. Perfect for restaurants wanting to go digital with their menu.</p>
                <a href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/menu.php?r=ocean-spice" class="btn btn-primary" style="margin-top:16px;">
                    <i class="fas fa-eye"></i> Try Menu View
                </a>
            </div>
            <div class="feature-card animate-on-scroll" style="text-align:center;">
                <div class="feature-icon icon-green" style="margin:0 auto 20px;"><i class="fas fa-cart-shopping"></i></div>
                <h3>Ordering Demo</h3>
                <p>Full ordering experience — browse the menu, add items to cart, customize orders, and place them. See how customers order.</p>
                <a href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/menu.php?r=urban-taste" class="btn btn-primary" style="margin-top:16px;">
                    <i class="fas fa-shopping-bag"></i> Try Ordering
                </a>
            </div>
            <div class="feature-card animate-on-scroll" style="text-align:center;">
                <div class="feature-icon icon-red" style="margin:0 auto 20px;"><i class="fas fa-gauge-high"></i></div>
                <h3>Restaurant Admin Demo</h3>
                <p>Explore the restaurant dashboard — manage menu, view orders, track analytics, and configure settings.</p>
                <a href="../login.php" class="btn btn-primary" style="margin-top:16px;">
                    <i class="fas fa-right-to-bracket"></i> Try Admin Panel
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Benefits Section -->
<section class="section section-gray" id="benefits">
    <div class="container">
        <div class="section-title animate-on-scroll">
            <h2>Why Choose Tap2Order?</h2>
            <p>Discover the benefits that make us the preferred choice for modern restaurants.</p>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;" class="animate-on-scroll">
            <div>
                <div class="contact-method">
                    <div class="method-icon"><i class="fas fa-piggy-bank"></i></div>
                    <div>
                        <div class="method-label" style="font-weight:600;color:var(--gray-800);font-size:0.95rem;">Reduce Printing Costs</div>
                        <div class="method-text">No more reprinting menus for every price change. Update your digital menu instantly.</div>
                    </div>
                </div>
                <div class="contact-method">
                    <div class="method-icon"><i class="fas fa-bolt"></i></div>
                    <div>
                        <div class="method-label" style="font-weight:600;color:var(--gray-800);font-size:0.95rem;">Update Prices Instantly</div>
                        <div class="method-text">Change prices, add new items, or remove unavailable dishes in real-time.</div>
                    </div>
                </div>
                <div class="contact-method">
                    <div class="method-icon"><i class="fas fa-bullhorn"></i></div>
                    <div>
                        <div class="method-label" style="font-weight:600;color:var(--gray-800);font-size:0.95rem;">Promote Daily Offers</div>
                        <div class="method-text">Highlight daily specials, combo deals, and promotions to boost sales.</div>
                    </div>
                </div>
                <div class="contact-method">
                    <div class="method-icon"><i class="fas fa-clock"></i></div>
                    <div>
                        <div class="method-label" style="font-weight:600;color:var(--gray-800);font-size:0.95rem;">Reduce Waiting Time</div>
                        <div class="method-text">Customers order as soon as they sit down. Faster service, happier guests.</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="contact-method">
                    <div class="method-icon"><i class="fas fa-arrow-trend-up"></i></div>
                    <div>
                        <div class="method-label" style="font-weight:600;color:var(--gray-800);font-size:0.95rem;">Increase Average Order Value</div>
                        <div class="method-text">Suggestive selling and upselling features help increase order size by up to 35%.</div>
                    </div>
                </div>
                <div class="contact-method">
                    <div class="method-icon"><i class="fas fa-face-smile"></i></div>
                    <div>
                        <div class="method-label" style="font-weight:600;color:var(--gray-800);font-size:0.95rem;">Improve Customer Experience</div>
                        <div class="method-text">Modern, intuitive interface that customers love. Multi-language support included.</div>
                    </div>
                </div>
                <div class="contact-method">
                    <div class="method-icon"><i class="fas fa-check-double"></i></div>
                    <div>
                        <div class="method-label" style="font-weight:600;color:var(--gray-800);font-size:0.95rem;">Reduce Ordering Errors</div>
                        <div class="method-text">Eliminate miscommunication. Customers select exactly what they want with clear descriptions.</div>
                    </div>
                </div>
                <div class="contact-method">
                    <div class="method-icon"><i class="fas fa-network-wired"></i></div>
                    <div>
                        <div class="method-label" style="font-weight:600;color:var(--gray-800);font-size:0.95rem;">Manage All Branches Digitally</div>
                        <div class="method-text">Control multiple locations from one centralized dashboard with unified reporting.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Pricing Section -->
<section class="section" id="pricing">
    <div class="container">
        <div class="section-title animate-on-scroll">
            <h2>Simple, Transparent Pricing</h2>
            <p>Choose the plan that fits your restaurant. Upgrade or downgrade anytime.</p>
        </div>
        <div style="text-align:center;margin-bottom:32px;" class="animate-on-scroll">
            <div style="display:inline-flex;background:var(--gray-100);border-radius:10px;padding:4px;" class="pricing-toggle-wrap">
                <button class="btn btn-sm pricing-toggle active" data-period="monthly" style="border-radius:8px;">Monthly</button>
                <button class="btn btn-sm pricing-toggle" data-period="annual" style="border-radius:8px;">Annual <span style="color:var(--success);font-weight:700;">Save 20%</span></button>
            </div>
        </div>
        <div class="pricing-grid">
            <?php if (!empty($plans)): ?>
                <?php foreach ($plans as $plan): ?>
                    <div class="pricing-card animate-on-scroll <?php echo $plan['is_recommended'] ? 'popular' : ''; ?>">
                        <?php if ($plan['is_recommended']): ?>
                            <div class="popular-badge">Most Popular</div>
                        <?php endif; ?>
                        <div class="plan-name"><?php echo sanitize($plan['plan_name']); ?></div>
                        <div class="plan-price" data-monthly="<?php echo (float)$plan['monthly_price']; ?>" data-annual="<?php echo (float)$plan['annual_price']; ?>">
                            <span class="currency">$</span><span class="price-value"><?php echo number_format((float)$plan['monthly_price'], 0, '.', ''); ?></span>
                        </div>
                        <div class="plan-period" data-monthly="per month" data-annual="per year">per month</div>
                        <p style="font-size:0.88rem;color:var(--gray-600);margin-bottom:20px;"><?php echo sanitize($plan['description'] ?? ''); ?></p>
                        <ul class="plan-features">
                            <?php
                            $features = json_decode($plan['features'], true);
                            if (is_array($features)):
                                foreach ($features as $feature): ?>
                                    <li><i class="fas fa-check-circle"></i> <?php echo sanitize($feature); ?></li>
                                <?php endforeach;
                            endif; ?>
                        </ul>
                        <a href="#contact" class="btn <?php echo $plan['is_recommended'] ? 'btn-primary' : 'btn-outline-dark'; ?>" style="width:100%;">Get Started</a>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="pricing-card animate-on-scroll">
                    <div class="plan-name">Basic</div>
                    <div class="plan-price"><span class="currency">$</span>29</div>
                    <div class="plan-period">per month</div>
                    <p style="font-size:0.88rem;color:var(--gray-600);margin-bottom:20px;">Perfect for small restaurants getting started.</p>
                    <ul class="plan-features">
                        <li><i class="fas fa-check-circle"></i> Digital Menu</li>
                        <li><i class="fas fa-check-circle"></i> QR Codes</li>
                        <li><i class="fas fa-check-circle"></i> Up to 50 Items</li>
                        <li><i class="fas fa-check-circle"></i> Basic Analytics</li>
                        <li><i class="fas fa-check-circle"></i> Email Support</li>
                    </ul>
                    <a href="#contact" class="btn btn-outline-dark" style="width:100%;">Get Started</a>
                </div>
                <div class="pricing-card popular animate-on-scroll">
                    <div class="popular-badge">Most Popular</div>
                    <div class="plan-name">Professional</div>
                    <div class="plan-price"><span class="currency">$</span>79</div>
                    <div class="plan-period">per month</div>
                    <p style="font-size:0.88rem;color:var(--gray-600);margin-bottom:20px;">For growing restaurants needing more features.</p>
                    <ul class="plan-features">
                        <li><i class="fas fa-check-circle"></i> Everything in Basic</li>
                        <li><i class="fas fa-check-circle"></i> Online Ordering</li>
                        <li><i class="fas fa-check-circle"></i> Up to 200 Items</li>
                        <li><i class="fas fa-check-circle"></i> Table Management</li>
                        <li><i class="fas fa-check-circle"></i> Offers & Coupons</li>
                        <li><i class="fas fa-check-circle"></i> Priority Support</li>
                    </ul>
                    <a href="#contact" class="btn btn-primary" style="width:100%;">Get Started</a>
                </div>
                <div class="pricing-card animate-on-scroll">
                    <div class="plan-name">Enterprise</div>
                    <div class="plan-price"><span class="currency">$</span>199</div>
                    <div class="plan-period">per month</div>
                    <p style="font-size:0.88rem;color:var(--gray-600);margin-bottom:20px;">Complete solution for restaurant chains.</p>
                    <ul class="plan-features">
                        <li><i class="fas fa-check-circle"></i> Everything in Professional</li>
                        <li><i class="fas fa-check-circle"></i> Unlimited Everything</li>
                        <li><i class="fas fa-check-circle"></i> White Label Domain</li>
                        <li><i class="fas fa-check-circle"></i> Custom Branding</li>
                        <li><i class="fas fa-check-circle"></i> API Access</li>
                        <li><i class="fas fa-check-circle"></i> Dedicated Support</li>
                    </ul>
                    <a href="#contact" class="btn btn-outline-dark" style="width:100%;">Get Started</a>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="section section-gray" id="testimonials">
    <div class="container">
        <div class="section-title animate-on-scroll">
            <h2>Loved by Restaurant Owners</h2>
            <p>See what our customers have to say about Tap2Order.</p>
        </div>
        <?php if (!empty($testimonials)): ?>
            <div class="testimonials-grid">
                <?php foreach ($testimonials as $testimonial): ?>
                    <div class="testimonial-card animate-on-scroll">
                        <div class="testimonial-stars">
                            <?php for ($i = 1; $i <= 5; $i++): ?>
                                <?php if ($i <= (int)$testimonial['rating']): ?>
                                    <i class="fas fa-star"></i>
                                <?php else: ?>
                                    <i class="far fa-star"></i>
                                <?php endif; ?>
                            <?php endfor; ?>
                        </div>
                        <div class="testimonial-text">"<?php echo sanitize($testimonial['content']); ?>"</div>
                        <div class="testimonial-author">
                            <div class="testimonial-avatar">
                                <?php echo strtoupper(substr($testimonial['name'], 0, 1)); ?>
                            </div>
                            <div class="testimonial-info">
                                <div class="author-name"><?php echo sanitize($testimonial['name']); ?></div>
                                <div class="author-title"><?php echo sanitize(($testimonial['role'] ?? '') . ($testimonial['restaurant_name'] ? ' at ' . $testimonial['restaurant_name'] : '')); ?></div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="testimonials-grid">
                <div class="testimonial-card animate-on-scroll">
                    <div class="testimonial-stars"><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>
                    <div class="testimonial-text">"Tap2Order transformed our restaurant. We went from paper menus to a sleek digital experience in just one day. Our customers love it!"</div>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">M</div>
                        <div class="testimonial-info">
                            <div class="author-name">Marco Rossi</div>
                            <div class="author-title">Owner at Bella Italia</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card animate-on-scroll">
                    <div class="testimonial-stars"><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>
                    <div class="testimonial-text">"The best investment we made this year. Table management and online ordering have streamlined our operations completely."</div>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">S</div>
                        <div class="testimonial-info">
                            <div class="author-name">Sarah Chen</div>
                            <div class="author-title">Manager at Dragon Palace</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card animate-on-scroll">
                    <div class="testimonial-stars"><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>
                    <div class="testimonial-text">"Very easy to set up and use. Our customers appreciate the modern touch, and we save so much on printing costs."</div>
                    <div class="testimonial-author">
                        <div class="testimonial-avatar">A</div>
                        <div class="testimonial-info">
                            <div class="author-name">Ahmed Hassan</div>
                            <div class="author-title">Owner at Spice Garden</div>
                        </div>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- FAQ Section -->
<section class="section" id="faq">
    <div class="container">
        <div class="section-title animate-on-scroll">
            <h2>Frequently Asked Questions</h2>
            <p>Find answers to common questions about Tap2Order.</p>
        </div>
        <div class="faq-list animate-on-scroll">
            <?php if (!empty($faqs)): ?>
                <?php foreach ($faqs as $index => $faq): ?>
                    <div class="faq-item <?php echo $index === 0 ? 'active' : ''; ?>">
                        <button class="faq-question" onclick="toggleFaq(this)">
                            <?php echo sanitize($faq['question']); ?>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="faq-answer" <?php echo $index === 0 ? 'style="max-height:400px;"' : ''; ?>>
                            <div class="faq-answer-inner">
                                <?php echo nl2br(sanitize($faq['answer'])); ?>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="faq-item active">
                    <button class="faq-question" onclick="toggleFaq(this)">
                        What is Tap2Order?
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="faq-answer" style="max-height:400px;">
                        <div class="faq-answer-inner">Tap2Order is a smart QR menu and ordering platform that lets restaurants go digital. Customers can scan a QR code, browse your menu, and place orders directly from their phones.</div>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question" onclick="toggleFaq(this)">
                        Do customers need to install an app?
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="faq-answer">
                        <div class="faq-answer-inner">No! Tap2Order is completely web-based. Customers simply scan the QR code with their phone's camera and the menu opens in their browser. No app download required.</div>
                    </div>
                </div>
                <div class="faq-item">
                    <button class="faq-question" onclick="toggleFaq(this)">
                        Is there a free trial?
                        <i class="fas fa-chevron-down"></i>
                    </button>
                    <div class="faq-answer">
                        <div class="faq-answer-inner">Yes! We offer a 14-day free trial on all plans. No credit card required. You can explore all features before committing to a subscription.</div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="section section-gray contact-section" id="contact">
    <div class="container">
        <div class="contact-info animate-on-scroll">
            <h3>Get in Touch</h3>
            <p>Ready to transform your restaurant? Fill out the form and our team will get back to you within 24 hours.</p>
            <div class="contact-method">
                <div class="method-icon"><i class="fas fa-phone"></i></div>
                <div>
                    <div class="method-label">Call Us</div>
                    <div class="method-text"><?php echo $contactPhone; ?></div>
                </div>
            </div>
            <div class="contact-method">
                <div class="method-icon"><i class="fas fa-envelope"></i></div>
                <div>
                    <div class="method-label">Email Us</div>
                    <div class="method-text"><?php echo $contactEmail; ?></div>
                </div>
            </div>
            <div class="contact-method">
                <div class="method-icon" style="background:#eafaf1;color:var(--whatsapp);"><i class="fab fa-whatsapp"></i></div>
                <div>
                    <div class="method-label">WhatsApp</div>
                    <div class="method-text"><?php echo $contactPhone; ?></div>
                </div>
            </div>
            <div class="contact-method">
                <div class="method-icon"><i class="fas fa-location-dot"></i></div>
                <div>
                    <div class="method-label">Visit Us</div>
                    <div class="method-text"><?php echo $contactAddress; ?></div>
                </div>
            </div>
        </div>
        <div class="contact-form animate-on-scroll">
            <div id="formMessage" style="display:none;margin-bottom:16px;padding:12px 16px;border-radius:10px;font-size:0.9rem;font-weight:500;"></div>
            <form id="enquiryForm">
                <input type="hidden" name="csrf_token" value="<?php echo $csrfToken; ?>">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                    <div class="form-group">
                        <label for="enq_name">Your Name *</label>
                        <input type="text" id="enq_name" name="name" required placeholder="John Doe">
                    </div>
                    <div class="form-group">
                        <label for="enq_restaurant">Restaurant Name *</label>
                        <input type="text" id="enq_restaurant" name="restaurant_name" required placeholder="Restaurant Name">
                    </div>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                    <div class="form-group">
                        <label for="enq_phone">Phone Number *</label>
                        <input type="tel" id="enq_phone" name="phone" required placeholder="+1 (555) 000-0000">
                    </div>
                    <div class="form-group">
                        <label for="enq_email">Email Address *</label>
                        <input type="email" id="enq_email" name="email" required placeholder="you@example.com">
                    </div>
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                    <div class="form-group">
                        <label for="enq_city">City</label>
                        <input type="text" id="enq_city" name="city" placeholder="New York">
                    </div>
                    <div class="form-group">
                        <label for="enq_plan">Preferred Plan</label>
                        <select id="enq_plan" name="preferred_plan">
                            <option value="">Select a plan...</option>
                            <?php if (!empty($plans)): ?>
                                <?php foreach ($plans as $plan): ?>
                                    <option value="<?php echo sanitize($plan['plan_name']); ?>"><?php echo sanitize($plan['plan_name']); ?> - $<?php echo number_format((float)$plan['monthly_price'], 0); ?>/mo</option>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <option value="Basic">Basic - $29/mo</option>
                                <option value="Professional">Professional - $79/mo</option>
                                <option value="Enterprise">Enterprise - $199/mo</option>
                            <?php endif; ?>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label for="enq_message">Message</label>
                    <textarea id="enq_message" name="message" placeholder="Tell us about your restaurant and what you're looking for..."></textarea>
                </div>
                <button type="submit" class="btn btn-primary btn-lg" style="width:100%;" id="submitBtn">
                    <i class="fas fa-paper-plane"></i> Send Enquiry
                </button>
            </form>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer" id="footer">
    <div class="container">
        <div class="footer-grid">
            <div class="footer-brand">
                <div class="footer-logo">Tap<span>2</span>Order</div>
                <p>The smart QR menu and ordering platform for modern restaurants. Go digital, save costs, and delight your customers.</p>
                <div class="footer-social">
                    <a href="<?php echo $facebookUrl; ?>" target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a>
                    <a href="<?php echo $instagramUrl; ?>" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a>
                    <a href="<?php echo $twitterUrl; ?>" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#pricing">Pricing</a></li>
                    <li><a href="#faq">FAQ</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/login.php">Restaurant Login</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Demos</h4>
                <ul>
                    <li><a href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/menu.php?r=ocean-spice">Menu View Demo</a></li>
                    <li><a href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/menu.php?r=urban-taste">Ordering Demo</a></li>
                    <li><a href="<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/login.php">Admin Demo</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Contact</h4>
                <ul>
                    <li><a href="#"><i class="fas fa-location-dot" style="width:16px;margin-right:6px;"></i><?php echo $contactAddress; ?></a></li>
                    <li><a href="tel:<?php echo preg_replace('/[^0-9+]/', '', $contactPhone); ?>"><i class="fas fa-phone" style="width:16px;margin-right:6px;"></i><?php echo $contactPhone; ?></a></li>
                    <li><a href="mailto:<?php echo $contactEmail; ?>"><i class="fas fa-envelope" style="width:16px;margin-right:6px;"></i><?php echo $contactEmail; ?></a></li>
                    <li><a href="<?php echo $whatsappLink; ?>" target="_blank" rel="noopener"><i class="fab fa-whatsapp" style="width:16px;margin-right:6px;"></i>WhatsApp Us</a></li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom">
            <span><?php echo $copyrightText; ?></span>
            <span>Powered by DigitalNext Gen</span>
            <div>
                <a href="privacy.php" style="color:rgba(255,255,255,0.5);margin-right:16px;">Privacy Policy</a>
                <a href="terms.php" style="color:rgba(255,255,255,0.5);">Terms & Conditions</a>
            </div>
        </div>
    </div>
</footer>

<!-- WhatsApp Floating Button -->
<a href="<?php echo $whatsappLink; ?>" target="_blank" rel="noopener" class="whatsapp-float" aria-label="Chat on WhatsApp" style="position:fixed;bottom:24px;right:24px;width:60px;height:60px;background:var(--whatsapp);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;box-shadow:0 4px 16px rgba(37,211,102,0.4);z-index:999;transition:transform 0.3s ease;">
    <i class="fab fa-whatsapp"></i>
</a>

<!-- Back to Top Button -->
<button id="backToTop" aria-label="Back to top" style="position:fixed;bottom:96px;right:28px;width:44px;height:44px;background:var(--secondary);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:1rem;display:none;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.2);z-index:998;transition:all 0.3s ease;">
    <i class="fas fa-arrow-up"></i>
</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function() {
    /* ── Header / Mobile Menu ─────────────────────────────── */
    var header = document.getElementById('t2o-header');
    var menuToggle = document.querySelector('.t2o-menu-toggle');
    var t2oNavMenu = document.querySelector('.t2o-nav-menu');
    var t2oNavActions = document.querySelector('.t2o-nav-actions');
    var backToTop = document.getElementById('backToTop');

    /* Sticky header */
    if (header) {
        window.addEventListener('scroll', function() {
            if (window.scrollY > 80) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
            if (backToTop) {
                if (window.scrollY > 500) {
                    backToTop.style.display = 'flex';
                } else {
                    backToTop.style.display = 'none';
                }
            }
        });
    }

    /* Mobile menu toggle */
    if (menuToggle && header) {
        menuToggle.addEventListener('click', function() {
            var isOpen = header.classList.toggle('menu-open');
            menuToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
        });

        if (t2oNavMenu) {
            var navLinks = t2oNavMenu.querySelectorAll('a');
            for (var i = 0; i < navLinks.length; i++) {
                navLinks[i].addEventListener('click', function() {
                    header.classList.remove('menu-open');
                    menuToggle.setAttribute('aria-expanded', 'false');
                });
            }
        }

        document.addEventListener('click', function(event) {
            if (!header.contains(event.target)) {
                header.classList.remove('menu-open');
                menuToggle.setAttribute('aria-expanded', 'false');
            }
        });
    }

    /* Back to top */
    if (backToTop) {
        backToTop.addEventListener('click', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }

    /* Scroll animations */
    var scrollAnimElements = document.querySelectorAll('.animate-on-scroll');
    if ('IntersectionObserver' in window) {
        var observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
        scrollAnimElements.forEach(function(el) {
            observer.observe(el);
        });
    } else {
        for (var j = 0; j < scrollAnimElements.length; j++) {
            scrollAnimElements[j].classList.add('visible');
        }
    }

    /* Pricing toggle */
    var toggles = document.querySelectorAll('.pricing-toggle');
    var priceEls = document.querySelectorAll('.plan-price');
    var periodEls = document.querySelectorAll('.plan-period');
    toggles.forEach(function(btn) {
        btn.addEventListener('click', function() {
            toggles.forEach(function(b) { b.classList.remove('active'); });
            btn.classList.add('active');
            var period = btn.getAttribute('data-period');
            priceEls.forEach(function(el) {
                var val = el.getAttribute('data-' + period);
                if (val) {
                    el.querySelector('.price-value').textContent = Number(val).toLocaleString('en-US', {minimumFractionDigits: 0, maximumFractionDigits: 0});
                }
            });
            periodEls.forEach(function(el) {
                var txt = el.getAttribute('data-' + period);
                if (txt) el.textContent = txt;
            });
            toggles.forEach(function(b) {
                b.style.background = b.classList.contains('active') ? '#fff' : 'transparent';
                b.style.boxShadow = b.classList.contains('active') ? '0 2px 8px rgba(0,0,0,0.1)' : 'none';
            });
        });
    });
    toggles.forEach(function(b) {
        b.style.background = b.classList.contains('active') ? '#fff' : 'transparent';
        b.style.boxShadow = b.classList.contains('active') ? '0 2px 8px rgba(0,0,0,0.1)' : 'none';
    });

    /* Contact form */
    var form = document.getElementById('enquiryForm');
    var formMessage = document.getElementById('formMessage');
    var submitBtn = document.getElementById('submitBtn');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
            var formData = new FormData(form);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '<?php echo defined('BASE_URL') ? BASE_URL : '..'; ?>/ajax/save_enquiry.php', true);
            xhr.onload = function() {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Send Enquiry';
                var resp;
                try { resp = JSON.parse(xhr.responseText); } catch(ex) { resp = {success:false,message:'An error occurred.'}; }
                formMessage.style.display = 'block';
                if (resp.success) {
                    formMessage.style.background = '#eafaf1';
                    formMessage.style.color = '#27ae60';
                    formMessage.textContent = resp.message || 'Thank you! We will be in touch soon.';
                    form.reset();
                    var newTokenInput = document.createElement('input');
                    newTokenInput.type = 'hidden';
                    newTokenInput.name = 'csrf_token';
                    newTokenInput.value = resp.csrf_token || '';
                    form.appendChild(newTokenInput);
                } else {
                    formMessage.style.background = '#fdedec';
                    formMessage.style.color = '#e74c3c';
                    formMessage.textContent = resp.message || 'Something went wrong. Please try again.';
                    if (resp.csrf_token) {
                        var tokField = form.querySelector('input[name="csrf_token"]');
                        if (tokField) tokField.value = resp.csrf_token;
                    }
                }
                setTimeout(function() { formMessage.style.display = 'none'; }, 6000);
            };
            xhr.onerror = function() {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Send Enquiry';
                formMessage.style.display = 'block';
                formMessage.style.background = '#fdedec';
                formMessage.style.color = '#e74c3c';
                formMessage.textContent = 'Network error. Please check your connection and try again.';
            };
            xhr.send(formData);
        });
    }
})();

function toggleFaq(btn) {
    var item = btn.parentElement;
    var wasActive = item.classList.contains('active');
    var allItems = document.querySelectorAll('.faq-item');
    for (var i = 0; i < allItems.length; i++) {
        allItems[i].classList.remove('active');
        allItems[i].querySelector('.faq-answer').style.maxHeight = '0';
    }
    if (!wasActive) {
        item.classList.add('active');
        var answer = item.querySelector('.faq-answer');
        answer.style.maxHeight = answer.scrollHeight + 'px';
    }
}

(function() {
    var links = document.querySelectorAll('a[href^="#"]');
    for (var i = 0; i < links.length; i++) {
        links[i].addEventListener('click', function(e) {
            var targetId = this.getAttribute('href');
            if (targetId === '#') return;
            var target = document.querySelector(targetId);
            if (target) {
                e.preventDefault();
                var offset = 80;
                var top = target.getBoundingClientRect().top + window.pageYOffset - offset;
                window.scrollTo({ top: top, behavior: 'smooth' });
            }
        });
    }
})();
</script>
<style>
.phone-mockup{display:flex;justify-content:center;}
.phone-frame{width:280px;background:#1a1a2e;border-radius:36px;padding:12px;box-shadow:0 20px 60px rgba(0,0,0,0.4);position:relative;border:3px solid #333;}
.phone-notch{width:100px;height:24px;background:#1a1a2e;border-radius:0 0 14px 14px;margin:0 auto 10px;position:relative;z-index:2;}
.phone-screen{background:#fff;border-radius:24px;overflow:hidden;padding-bottom:16px;}
.mock-header{background:linear-gradient(135deg,var(--secondary),var(--secondary-dark));color:#fff;padding:20px 16px;text-align:center;}
.mock-restaurant-name{font-weight:700;font-size:1.1rem;}
.mock-tagline{font-size:0.72rem;opacity:0.7;margin-top:2px;}
.mock-category{display:flex;gap:6px;padding:10px 12px;overflow-x:auto;}
.mock-cat{padding:5px 12px;border-radius:16px;font-size:0.68rem;font-weight:600;background:var(--gray-100);color:var(--gray-600);white-space:nowrap;}
.mock-cat.active{background:var(--primary);color:#fff;}
.mock-item{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--gray-100);align-items:center;}
.mock-item-info{flex:1;}
.mock-item-name{font-weight:600;font-size:0.78rem;color:var(--gray-800);}
.mock-item-desc{font-size:0.65rem;color:var(--gray-500);margin-top:1px;}
.mock-item-price{font-weight:700;font-size:0.82rem;color:var(--primary);margin-top:3px;}
.mock-qr-hint{text-align:center;padding:12px;font-size:0.72rem;color:var(--gray-500);font-weight:600;}
.mock-qr-hint i{margin-right:4px;color:var(--primary);}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.phone-frame{animation:float 4s ease-in-out infinite;}
@media(max-width:768px){.phone-frame{width:220px;}.phone-notch{width:80px;height:20px;}.mock-header{padding:14px 12px;}.mock-restaurant-name{font-size:0.9rem;}}
@media(max-width:768px){#benefits > .container > div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}}
</style>
</body>
</html>
