<?php
session_start();
require_once __DIR__ . '/../config/database.php';
require_once __DIR__ . '/../config/config.php';
$baseUrl = defined('BASE_URL') ? BASE_URL : '/tap2order';

$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'];
}

$siteName = sanitize($settings['site_name'] ?? 'Tap2Order');
$contactPhone = sanitize($settings['contact_phone'] ?? '+1 (555) 123-4567');
$contactEmail = sanitize($settings['contact_email'] ?? 'support@tap2order.com');
$contactAddress = sanitize($settings['contact_address'] ?? '123 Business Ave, Tech City, TC 10001');
$copyrightText = sanitize($settings['copyright_text'] ?? '© 2026 Tap2Order. All rights reserved.');
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demos | <?php echo $siteName; ?></title>
    <meta name="description" content="Explore Tap2Order demos - see our digital menu, ordering system, and admin dashboard in action.">
    <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 $baseUrl; ?>/assets/css/public.css">
    <style>
        .demo-page { padding: 140px 0 80px; min-height: 100vh; }
        .demo-page .container { max-width: 1100px; }
        .demo-page .section-title { text-align: center; margin-bottom: 50px; }
        .demo-page .section-title h1 {
            font-size: 2.4rem;
            font-weight: 800;
            color: var(--gray-900);
            margin-bottom: 12px;
        }
        .demo-page .section-title p {
            font-size: 1.05rem;
            color: var(--gray-600);
            max-width: 580px;
            margin: 0 auto;
        }
        .demo-card {
            background: var(--white);
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: var(--transition);
            border: 1px solid var(--gray-200);
        }
        .demo-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-lg);
        }
        .demo-card-icon {
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 56px;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .demo-card-icon::before {
            content: '';
            position: absolute;
            top: -30%;
            right: -20%;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
        }
        .demo-card-icon::after {
            content: '';
            position: absolute;
            bottom: -40%;
            left: -15%;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
        }
        .demo-card-icon.bg-view { background: linear-gradient(135deg, #3498db, #2980b9); }
        .demo-card-icon.bg-order { background: linear-gradient(135deg, #27ae60, #229954); }
        .demo-card-icon.bg-admin { background: linear-gradient(135deg, #e63946, #c0392b); }
        .demo-card-body { padding: 28px 28px 32px; }
        .demo-card-body h3 { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); margin-bottom: 10px; }
        .demo-card-body p { color: var(--gray-600); font-size: 0.92rem; line-height: 1.6; margin-bottom: 20px; }
        .demo-card-body .badge-mode {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-bottom: 16px;
        }
        .badge-mode.view-only { background: #eaf2f8; color: #2980b9; }
        .badge-mode.full-order { background: #eafaf1; color: #27ae60; }
        .badge-mode.admin { background: #fdedec; color: #e63946; }
        .btn-demo {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 28px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            transition: var(--transition);
            border: none;
            cursor: pointer;
        }
        .btn-demo.btn-blue { background: #3498db; color: #fff; }
        .btn-demo.btn-blue:hover { background: #2980b9; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(52,152,219,0.3); }
        .btn-demo.btn-green { background: #27ae60; color: #fff; }
        .btn-demo.btn-green:hover { background: #229954; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(39,174,96,0.3); }
        .btn-demo.btn-red { background: #e63946; color: #fff; }
        .btn-demo.btn-red:hover { background: #c0392b; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230,57,70,0.3); }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        @media (max-width: 992px) {
            .demo-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
        }
    </style>
</head>
<body>

<nav class="navbar" id="navbar">
    <div class="container">
        <a href="<?php echo $baseUrl; ?>/public/" class="navbar-brand">
            <i class="fas fa-mobile-screen-button"></i> Tap<span>2</span>Order
        </a>
        <ul class="navbar-nav" id="navMenu">
            <li><a href="<?php echo $baseUrl; ?>/public/#home">Home</a></li>
            <li><a href="<?php echo $baseUrl; ?>/public/#features">Features</a></li>
            <li><a href="<?php echo $baseUrl; ?>/public/#pricing">Pricing</a></li>
            <li><a href="<?php echo $baseUrl; ?>/public/demo.php" class="active">Demo</a></li>
            <li><a href="<?php echo $baseUrl; ?>/public/#contact">Contact</a></li>
        </ul>
        <div class="navbar-actions">
            <a href="<?php echo $baseUrl; ?>/login.php" class="btn btn-sm btn-outline-dark">Restaurant Login</a>
            <a href="<?php echo $baseUrl; ?>/public/#contact" class="btn btn-sm btn-primary">Get Started</a>
            <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </div>
</nav>

<div class="demo-page">
    <div class="container">
        <div class="section-title">
            <h1>See Tap2Order in Action</h1>
            <p>Explore our interactive demos to experience the full power of the Tap2Order platform.</p>
        </div>
        <div class="demo-grid">

            <div class="demo-card">
                <div class="demo-card-icon bg-view">
                    <i class="fas fa-book-open" style="position:relative;z-index:1;"></i>
                </div>
                <div class="demo-card-body">
                    <span class="badge-mode view-only">Menu View Only</span>
                    <h3>Ocean Spice Restaurant</h3>
                    <p>Browse a beautiful digital menu without ordering. Perfect for restaurants that want to showcase their menu digitally.</p>
                    <a href="<?php echo $baseUrl; ?>/menu.php?r=ocean-spice" class="btn-demo btn-blue">
                        <i class="fas fa-eye"></i> View Demo Menu
                    </a>
                </div>
            </div>

            <div class="demo-card">
                <div class="demo-card-icon bg-order">
                    <i class="fas fa-cart-shopping" style="position:relative;z-index:1;"></i>
                </div>
                <div class="demo-card-body">
                    <span class="badge-mode full-order">Full Ordering</span>
                    <h3>Urban Taste Kitchen</h3>
                    <p>Experience the complete ordering flow from browsing the menu to adding items to cart and checking out.</p>
                    <a href="<?php echo $baseUrl; ?>/menu.php?r=urban-taste" class="btn-demo btn-green">
                        <i class="fas fa-shopping-bag"></i> View Demo Menu
                    </a>
                </div>
            </div>

            <div class="demo-card">
                <div class="demo-card-icon bg-admin">
                    <i class="fas fa-gauge-high" style="position:relative;z-index:1;"></i>
                </div>
                <div class="demo-card-body">
                    <span class="badge-mode admin">Admin Panel</span>
                    <h3>Restaurant Admin Panel</h3>
                    <p>Explore the powerful restaurant management dashboard to manage menu, view orders, and configure settings.</p>
                    <a href="<?php echo $baseUrl; ?>/login.php" class="btn-demo btn-red">
                        <i class="fas fa-right-to-bracket"></i> View Admin Demo
                    </a>
                </div>
            </div>

        </div>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <div class="footer-bottom">
            <span><?php echo $copyrightText; ?></span>
            <span>Powered by DigitalNext Gen</span>
            <div>
                <a href="<?php echo $baseUrl; ?>/public/privacy.php" style="color:rgba(255,255,255,0.5);margin-right:16px;">Privacy Policy</a>
                <a href="<?php echo $baseUrl; ?>/public/terms.php" style="color:rgba(255,255,255,0.5);">Terms & Conditions</a>
            </div>
        </div>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
(function() {
    var navbar = document.getElementById('navbar');
    var navToggle = document.getElementById('navToggle');
    var navMenu = document.getElementById('navMenu');

    window.addEventListener('scroll', function() {
        if (window.scrollY > 80) { navbar.classList.add('scrolled'); }
        else { navbar.classList.remove('scrolled'); }
    });

    navToggle.addEventListener('click', function() {
        navMenu.classList.toggle('show');
    });

    var navLinks = navMenu.querySelectorAll('a');
    for (var i = 0; i < navLinks.length; i++) {
        navLinks[i].addEventListener('click', function() {
            navMenu.classList.remove('show');
        });
    }
})();
</script>
</body>
</html>
