<?php
if (session_status() === PHP_SESSION_NONE) session_start();
if (!isset($_SESSION['user_id'])) {
    header('Location: ../index.php');
    exit;
}
require_once '../config.php';

// If somehow already active, redirect to setup
if (canteen_is_active()) {
    header('Location: setup.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canteen Module — EduTrack</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        body { background: #f0f4f8; }
        .upgrade-hero {
            background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
            color: #fff;
            padding: 3rem 2rem;
            border-radius: 1rem;
            margin-bottom: 2rem;
        }
        .upgrade-hero .hero-icon {
            font-size: 4rem;
            opacity: .85;
            margin-bottom: 1rem;
        }
        .feature-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: .75rem;
            padding: 1.25rem 1.5rem;
            height: 100%;
            transition: box-shadow .2s;
        }
        .feature-card:hover { box-shadow: 0 4px 16px rgba(37,99,235,.12); }
        .feature-card .fi { font-size: 1.6rem; margin-bottom: .6rem; color: #2563eb; }
        .pricing-card {
            border-radius: 1rem;
            overflow: hidden;
        }
        .pricing-card .card-header {
            background: linear-gradient(135deg, #1e3a5f, #2563eb);
            color: #fff;
            padding: 1.5rem;
            text-align: center;
        }
        .pricing-card .price { font-size: 2.5rem; font-weight: 700; }
        .pricing-card .price small { font-size: 1rem; font-weight: 400; opacity: .8; }
        .badge-savings {
            background: #10b981;
            color: #fff;
            font-size: .75rem;
            padding: .3rem .7rem;
            border-radius: 999px;
        }
        .cta-whatsapp {
            background: #25d366;
            border: none;
            font-size: 1.1rem;
            padding: .75rem 2rem;
            border-radius: .75rem;
        }
        .cta-whatsapp:hover { background: #1ebe57; }
        .trial-badge {
            background: #fbbf24;
            color: #1a1a1a;
            font-weight: 600;
            font-size: .8rem;
            padding: .35rem .9rem;
            border-radius: 999px;
            display: inline-block;
            margin-bottom: .5rem;
        }
        .check-list li { padding: .3rem 0; }
        .check-list li i { color: #10b981; width: 18px; }
    </style>
</head>
<body>
<div class="wrapper">
    <nav id="sidebar" class="sidebar">
        <?php echo buildSidebar('canteen/upgrade.php'); ?>
    </nav>
    <div class="main-content">
        <header class="header">
            <button class="btn-toggle" id="sidebarToggle"><i class="fas fa-bars"></i></button>
            <div class="header-right">
                <div class="dropdown">
                    <button class="btn btn-link dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user-circle me-2"></i><?php echo htmlspecialchars((string)($_SESSION['full_name'] ?? '')); ?>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="../settings.php"><i class="fas fa-cog me-2"></i>Settings</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="../logout.php"><i class="fas fa-sign-out-alt me-2"></i>Logout</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <main class="content">

            <!-- Hero -->
            <div class="upgrade-hero text-center">
                <div class="hero-icon"><i class="fas fa-utensils"></i></div>
                <span class="trial-badge"><i class="fas fa-gift me-1"></i>30-Day Free Trial — Full Access</span>
                <h1 class="fw-bold mb-2">Canteen Management Module</h1>
                <p class="lead mb-0" style="opacity:.9;">
                    Eliminate both morning queues — faster fee collection and zero-wait canteen access via QR scan.
                </p>
            </div>

            <!-- Features grid -->
            <h4 class="fw-semibold mb-3">What you get</h4>
            <div class="row g-3 mb-4">
                <div class="col-sm-6 col-lg-4">
                    <div class="feature-card">
                        <div class="fi"><i class="fas fa-qrcode"></i></div>
                        <strong>QR Express Fee Collection</strong>
                        <p class="small text-muted mt-1 mb-0">Scan a student's QR, tap the fee, done. Cashier handles a payment in under 10 seconds.</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="feature-card">
                        <div class="fi"><i class="fas fa-mobile-alt"></i></div>
                        <strong>Canteen Scanner</strong>
                        <p class="small text-muted mt-1 mb-0">Staff scan session pass QRs at the canteen window. No EduTrack login needed — just a 4-digit PIN.</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="feature-card">
                        <div class="fi"><i class="fas fa-wifi"></i></div>
                        <strong>Offline Mode</strong>
                        <p class="small text-muted mt-1 mb-0">Scanner works without internet. Confirmations queue locally and sync automatically when connectivity returns.</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="feature-card">
                        <div class="fi"><i class="fas fa-chart-line"></i></div>
                        <strong>Cook's Live Dashboard</strong>
                        <p class="small text-muted mt-1 mb-0">Real-time confirmed count, per-class breakdown, and projected meal totals — refreshes every 30 seconds.</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="feature-card">
                        <div class="fi"><i class="fas fa-id-card"></i></div>
                        <strong>Student ID Cards</strong>
                        <p class="small text-muted mt-1 mb-0">Print A6 ID cards with permanent QR codes. Parents also see QR passes in the parent portal.</p>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-4">
                    <div class="feature-card">
                        <div class="fi"><i class="fas fa-fingerprint"></i></div>
                        <strong>Optional Biometrics</strong>
                        <p class="small text-muted mt-1 mb-0">Add fingerprint or facial recognition verification. Hardware is supplied by your school; ORIC provides the software.</p>
                    </div>
                </div>
            </div>

            <!-- Pricing + CTA -->
            <div class="row justify-content-center g-4 mb-4">
                <div class="col-md-5">
                    <div class="card pricing-card shadow-sm">
                        <div class="card-header">
                            <div class="small mb-1" style="opacity:.8;">MONTHLY</div>
                            <div class="price">GHS 80 <small>/ month</small></div>
                        </div>
                        <div class="card-body">
                            <ul class="check-list list-unstyled">
                                <li><i class="fas fa-check-circle me-2"></i>Full canteen module access</li>
                                <li><i class="fas fa-check-circle me-2"></i>All future updates included</li>
                                <li><i class="fas fa-check-circle me-2"></i>ORIC support via WhatsApp</li>
                                <li><i class="fas fa-check-circle me-2"></i>Cancel any time</li>
                            </ul>
                            <a href="https://wa.me/233537793106?text=Activate+Canteen+Module+Monthly" target="_blank" rel="noopener"
                               class="btn cta-whatsapp text-white w-100 mt-2">
                                <i class="fab fa-whatsapp me-2"></i>Activate Monthly
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="card pricing-card shadow">
                        <div class="card-header" style="background: linear-gradient(135deg,#065f46,#059669);">
                            <span class="badge-savings mb-2"><i class="fas fa-tag me-1"></i>Save GHS 160</span>
                            <div class="small mb-1" style="opacity:.8;">ANNUAL</div>
                            <div class="price">GHS 800 <small>/ year</small></div>
                        </div>
                        <div class="card-body">
                            <ul class="check-list list-unstyled">
                                <li><i class="fas fa-check-circle me-2"></i>Everything in Monthly</li>
                                <li><i class="fas fa-check-circle me-2"></i>GHS 160 saved vs monthly</li>
                                <li><i class="fas fa-check-circle me-2"></i>Priority support</li>
                                <li><i class="fas fa-check-circle me-2"></i>Free biometric setup guide</li>
                            </ul>
                            <a href="https://wa.me/233537793106?text=Activate+Canteen+Module+Annual" target="_blank" rel="noopener"
                               class="btn cta-whatsapp text-white w-100 mt-2">
                                <i class="fab fa-whatsapp me-2"></i>Activate Annual
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Trial notice -->
            <div class="alert alert-warning d-flex align-items-center gap-3" role="alert">
                <i class="fas fa-gift fa-2x"></i>
                <div>
                    <strong>30-Day Free Trial — No payment needed to get started.</strong><br>
                    Contact ORIC Network on WhatsApp to activate your free trial today.
                    <a href="https://wa.me/233537793106?text=I+want+to+start+the+30-day+Canteen+Module+trial"
                       target="_blank" rel="noopener" class="btn btn-sm btn-warning ms-2">
                        <i class="fab fa-whatsapp me-1"></i>Start Free Trial
                    </a>
                </div>
            </div>

            <!-- Contact -->
            <p class="text-muted text-center small mt-3">
                <i class="fas fa-phone me-1"></i>+233 537 793 106 &nbsp;·&nbsp;
                <i class="fas fa-envelope me-1"></i>info@oricnetwork.com &nbsp;·&nbsp;
                <i class="fas fa-globe me-1"></i>oricnetwork.com
            </p>

        </main>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" defer></script>
</body>
</html>
