<?php
header('Content-Type: text/html; charset=utf-8');
/**
 * CMTC Tech Solution - System Official Landing Page & Gateway Portal (index.php)
 * Theme: Private CMTC Tech Solution Theme
 * Features: Dark/Light Mode, Hamburger Menu on iPad (1024px), Sticky Bottom Nav on Mobile, Content Expansion (How It Works, Benefits, FAQ).
 */
require_once 'db.php';

$user_role_home = 'index.php';
if (!empty($_SESSION['super_admin_logged_in'])) {
    $user_role_home = 'platform-admin.php';
} elseif (!empty($_SESSION['store_id']) || !empty($_SESSION['store_admin_logged_in'])) {
    $user_role_home = 'store-admin.php';
}

// Handle AJAX payment & contact submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && ($_POST['action'] === 'submit_contact' || $_POST['action'] === 'submit_payment')) {
    header('Content-Type: application/json; charset=utf-8');
    $shop_name = trim($_POST['shop_name'] ?? '');
    $owner_name = trim($_POST['owner_name'] ?? '');
    $phone = trim($_POST['phone'] ?? '');
    $plan_str = trim($_POST['plan'] ?? 'Standard Plan');
    $slip_url = trim($_POST['slip_url'] ?? '');

    if (empty($shop_name) || empty($owner_name) || empty($phone)) {
        echo json_encode(['success' => false, 'message' => 'กรุณากรอกข้อมูลสำคัญให้ครบถ้วน']);
        exit;
    }

    // Handle Real Slip File Upload if provided
    $slip_url = NULL;
    if (isset($_FILES['slip_file']) && $_FILES['slip_file']['error'] === UPLOAD_ERR_OK) {
        $upload_dir = __DIR__ . '/uploads/slips/';
        if (!is_dir($upload_dir)) @mkdir($upload_dir, 0777, true);
        
        $ext = strtolower(pathinfo($_FILES['slip_file']['name'], PATHINFO_EXTENSION));
        if (in_array($ext, ['jpg', 'jpeg', 'png', 'webp', 'gif', 'jfif', 'avif'])) {
            if ($_FILES['slip_file']['size'] <= 5 * 1024 * 1024) { // 5MB limit
                $filename = 'reg_slip_' . time() . '_' . rand(1000, 9999) . '.' . $ext;
                if (move_uploaded_file($_FILES['slip_file']['tmp_name'], $upload_dir . $filename)) {
                    $slip_url = 'uploads/slips/' . $filename;
                }
            } else {
                echo json_encode(['success' => false, 'message' => '⚠️ ขนาดไฟล์สลิปการโอนเงินใหญ่เกินไป (ต้องไม่เกิน 5MB)']);
                exit;
            }
        } else {
            echo json_encode(['success' => false, 'message' => '⚠️ ไฟล์สลิปการโอนเงินต้องเป็นไฟล์รูปภาพ (JPG, PNG, WEBP) เท่านั้น']);
            exit;
        }
    } elseif (!empty($_POST['slip_url'])) {
        $slip_url = trim($_POST['slip_url']);
    }

    try {
        $pdo->beginTransaction();

        // 1. Find matching plan in MariaDB
        $plan_stmt = $pdo->prepare("SELECT id, name, price FROM plans WHERE name LIKE :name LIMIT 1");
        $clean_plan = str_replace(' Plan', '', $plan_str);
        $plan_stmt->execute([':name' => "%{$clean_plan}%"]);
        $plan_info = $plan_stmt->fetch();

        $plan_id = $plan_info ? intval($plan_info['id']) : 2;
        $plan_name = $plan_info ? $plan_info['name'] : $clean_plan;
        $full_amount = $plan_info ? (float)$plan_info['price'] : 990.00;

        // Dynamic Trial Days calculation per package:
        // Premium / Max (plan_id 3 or name contains premium/max): 7 Days Free Trial
        // General / Starter / Standard (plan_id 1/2): 14 Days Free Trial
        $trial_days = ($plan_id === 3 || strpos(strtolower($plan_name), 'premium') !== false || strpos(strtolower($plan_name), 'max') !== false) ? 7 : 14;

        $is_trial = isset($_POST['is_trial']) || (isset($_POST['plan_type']) && $_POST['plan_type'] === 'trial');

        // Validation: If not a Free Trial registration, user MUST provide a real transfer slip!
        if (!$is_trial && empty($slip_url)) {
            $pdo->rollBack();
            echo json_encode(['success' => false, 'message' => '⚠️ กรุณาแนบไฟล์สลิปการโอนเงินจริงเพื่อชำระเงินสมัครแพ็กเกจ']);
            exit;
        }

        $tenant_status = $is_trial ? 'trial' : 'pending';
        $pay_status = $is_trial ? 'approved' : 'pending';
        $pay_amount = $is_trial ? 0.00 : $full_amount;
        $note = $is_trial ? "🎉 สิทธิพิเศษ: สมัครใช้งานฟรี {$trial_days} วันแรก (Free Trial {$trial_days} Days $0)" : 'แจ้งชำระเงินสมัครแพ็กเกจ ' . $plan_name . ' (รอการตรวจสอบสลิปโอนเงินโดย Super Admin)';

        // 2. Create Tenant with dynamic trial days (14 days for Starter/Standard, 7 days for Premium/Max)
        $stmt_t = $pdo->prepare("INSERT INTO tenants (store_name, category, address, plan_id, status, trial_ends_at, promo_banner, policy_text, custom_logo_url) VALUES (:store_name, 'ร้านอาหาร', :address, :plan_id, :status, DATE_ADD(NOW(), INTERVAL :trial_days DAY), '', '', '')");
        $stmt_t->execute([
            ':store_name' => $shop_name,
            ':address'    => "ผู้ติดต่อ: {$owner_name} (โทร: {$phone})",
            ':plan_id'    => $plan_id,
            ':status'     => $tenant_status,
            ':trial_days' => $trial_days
        ]);
        $store_id = $pdo->lastInsertId();

        // 3. Create Store Admin Account with Hashed Password
        $username = 'store_' . $store_id;
        $raw_pass = 'pass' . rand(1000, 9999);
        $hashed_pass = password_hash($raw_pass, PASSWORD_DEFAULT);

        $stmt_u = $pdo->prepare("INSERT INTO users (username, password, role, store_id) VALUES (:username, :password, 'store_admin', :store_id)");
        $stmt_u->execute([
            ':username' => $username,
            ':password' => $hashed_pass,
            ':store_id' => $store_id
        ]);

        // 4. Record Payment Transaction in MariaDB (NO mock slips; slip_url set to real uploaded file or NULL)
        $stmt_p = $pdo->prepare("INSERT INTO payments (store_id, plan_id, amount, slip_url, status, note) VALUES (:store_id, :plan_id, :amount, :slip_url, :status, :note)");
        $stmt_p->execute([
            ':store_id' => $store_id,
            ':plan_id'  => $plan_id,
            ':amount'   => $pay_amount,
            ':slip_url' => $slip_url,
            ':status'   => $pay_status,
            ':note'     => $note
        ]);

        // 5. Seed initial table for new tenant
        $stmt_tbl = $pdo->prepare("INSERT INTO tables_qr (store_id, table_number, qr_code_url, table_status) VALUES (:store_id, 'Table 1', :qr, 'available')");
        $stmt_tbl->execute([
            ':store_id' => $store_id,
            ':qr'       => "menu.php?store_id={$store_id}&table=1"
        ]);

        $pdo->commit();

        // 6. External LINE Notify / Webhook Alert Notification
        if (function_exists('send_payment_notification')) {
            send_payment_notification($shop_name, $plan_name, $pay_amount);
        }

        $res_msg = $is_trial 
            ? "🎉 สมัครสมาชิกสำเร็จ! ร้าน '{$shop_name}' (แพ็กเกจ {$plan_name}) ได้รับสิทธิพิเศษทดลองใช้งานฟรี {$trial_days} วันแรก (Free Trial {$trial_days} Days)" 
            : "✅ ส่งข้อมูลสมัครแพ็กเกจ '{$plan_name}' และอัปโหลดสลิปการโอนเงินสำหรับร้าน '{$shop_name}' เรียบร้อยแล้ว! กรุณารอ Super Admin ตรวจสอบสลิปอนุมัติ";

        echo json_encode([
            'success'    => true,
            'is_trial'   => $is_trial,
            'trial_days' => $trial_days,
            'message'    => $res_msg,
            'account'    => [
                'username' => $username,
                'temp_password' => $raw_pass
            ]
        ]);
    } catch (Exception $e) {
        if ($pdo->inTransaction()) {
            $pdo->rollBack();
        }
        echo json_encode(['success' => false, 'message' => 'เกิดข้อผิดพลาดในการลงทะเบียนชำระเงิน: ' . $e->getMessage()]);
    }
    exit;
}

// Load dynamic plan prices from MariaDB
$plans = [];
try {
    $stmt = $pdo->query("SELECT * FROM plans ORDER BY price ASC");
    $plans = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    // fallback
}

$starter_price = 490;
$standard_price = 990;
$premium_price = 1590;

foreach ($plans as $p) {
    if (strtolower($p['name']) === 'starter') $starter_price = number_format($p['price']);
    if (strtolower($p['name']) === 'standard') $standard_price = number_format($p['price']);
    if (strtolower($p['name']) === 'premium') $premium_price = number_format($p['price']);
}
?>
<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CMTC Tech Solution - แพลตฟอร์มจัดการสั่งอาหารผ่าน QR Code</title>
    <link rel="stylesheet" href="style.css">
    <!-- SweetAlert2 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Navigation Sound & SweetAlert Engine -->
    <script src="js/nav_sound_swal.js"></script>
    <style>
        /* Sleek Desktop & Mobile Hamburger Popover Menu */
        .lp-popover-menu {
            position: fixed;
            top: 75px;
            right: 25px;
            width: 320px;
            max-width: calc(100vw - 30px);
            background: rgba(15, 23, 42, 0.95);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(0, 229, 255, 0.2);
            border-radius: 16px;
            padding: 18px 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 229, 255, 0.1);
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px) scale(0.95);
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        body.light-theme .lp-popover-menu {
            background: rgba(255, 255, 255, 0.96);
            border-color: rgba(0, 51, 102, 0.15);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 51, 102, 0.05);
        }

        .lp-popover-menu.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .lp-pop-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            margin-bottom: 12px;
        }

        body.light-theme .lp-pop-header {
            border-bottom-color: rgba(0, 0, 0, 0.08);
        }

        .lp-pop-title {
            font-weight: 800;
            font-size: 15px;
            color: var(--lp-accent-orange);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .lp-pop-section-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--lp-text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 12px 0 6px 0;
        }

        .lp-pop-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 9px 12px;
            border-radius: 8px;
            color: var(--lp-text-primary);
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .lp-pop-item:hover {
            background: rgba(255, 90, 0, 0.12);
            color: #FF5A00;
            transform: translateX(4px);
        }

        .lp-pop-item-icon {
            font-size: 16px;
            width: 22px;
            text-align: center;
        }

        .lp-hamburger-btn-pill {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--lp-border-glass);
            color: var(--lp-text-primary);
            padding: 8px 16px;
            border-radius: 30px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.25s ease;
        }

        .lp-hamburger-btn-pill:hover {
            background: rgba(255, 90, 0, 0.15);
            border-color: #FF5A00;
            color: #FF5A00;
        }
    </style>
    <script>
        // Pre-check theme mode to prevent flashing
        if (localStorage.getItem('theme-mode') === 'light') {
            document.documentElement.classList.add('light-theme-init');
        }
    </script>
</head>
<body class="landing-page">

<script>
    if (localStorage.getItem('theme-mode') === 'light') {
        document.body.classList.add('light-theme');
    }
</script>

<!-- LP Navigation Bar -->
<nav class="lp-navbar" id="lpNavbar">
    <a href="index.php" class="lp-nav-brand" title="กลับสู่หน้าแรกหลัก">
        <img src="logo.png" class="lp-brand-logo" alt="CMTC Logo">
        <span class="lp-brand-text">เทคนิคเชียงใหม่ <span>CMTC</span></span>
    </a>
    
    <!-- Ultra-Clean Top Actions -->
    <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
        <a href="javascript:void(0)" onclick="openContactModal()" class="btn btn-primary btn-sm lp-action-btn-cta" style="border-radius: 20px; padding: 7px 12px; font-weight: 800; font-size: 12px; white-space: nowrap; flex-shrink: 0;">
            🚀 <span class="btn-full-text">เข้าร่วมโครงการ</span>
        </a>

        <!-- Hamburger Menu Button -->
        <button class="lp-hamburger-btn-pill" id="lpHamburgerBtn" onclick="togglePopMenu(event)" title="เปิดเมนูนำทาง" style="white-space: nowrap; flex-shrink: 0;">
            <span style="font-size: 14px;">☰</span>
            <span>เมนู</span>
        </button>
    </div>
</nav>

<!-- Clean Non-Blocking Popover Menu Overlay -->
<div class="lp-popover-menu" id="lpPopMenu">
    <div class="lp-pop-header">
        <span class="lp-pop-title">📂 เมนูนำทาง CMTC Platform</span>
        <button onclick="closePopMenu()" style="background: transparent; border: none; color: var(--lp-text-primary); font-size: 22px; cursor: pointer; padding: 0 4px;">&times;</button>
    </div>

    <div class="lp-pop-section-label">📌 หมวดหมู่หลัก</div>
    <a href="#features" class="lp-pop-item" onclick="closePopMenu()">
        <span class="lp-pop-item-icon">⚡</span>
        <span>จุดเด่นระบบ</span>
    </a>
    <a href="#how-it-works" class="lp-pop-item" onclick="closePopMenu()">
        <span class="lp-pop-item-icon">⚙️</span>
        <span>ขั้นตอนเริ่มใช้งาน</span>
    </a>
    <a href="#benefits" class="lp-pop-item" onclick="closePopMenu()">
        <span class="lp-pop-item-icon">💎</span>
        <span>ประโยชน์ที่ได้รับ</span>
    </a>
    <a href="#demo" class="lp-pop-item" onclick="closePopMenu()">
        <span class="lp-pop-item-icon">🕹️</span>
        <span>ทดลองใช้งาน</span>
    </a>
    <a href="#pricing" class="lp-pop-item" onclick="closePopMenu()">
        <span class="lp-pop-item-icon">💰</span>
        <span>แพ็กเกจราคา</span>
    </a>
    <a href="#faq" class="lp-pop-item" onclick="closePopMenu()">
        <span class="lp-pop-item-icon">❓</span>
        <span>คำถามที่พบบ่อย</span>
    </a>

    <div class="lp-pop-section-label">🔐 พอร์ตัลระบบจัดการ</div>
    <a href="store-admin.php" class="lp-pop-item" style="color: var(--lp-accent-orange);" onclick="closePopMenu()">
        <span class="lp-pop-item-icon">🍳</span>
        <span>แอดมินร้านค้า (Shop Admin)</span>
    </a>
    <a href="platform-admin.php" class="lp-pop-item" style="color: var(--lp-accent-gold);" onclick="closePopMenu()">
        <span class="lp-pop-item-icon">👑</span>
        <span>คุมระบบกลาง (Super Admin)</span>
    </a>

    <div class="lp-pop-section-label">🎨 ตั้งค่าธีม</div>
    <div class="lp-pop-item" onclick="toggleThemeMode()" style="cursor: pointer; justify-content: space-between;">
        <div style="display: flex; align-items: center; gap: 12px;">
            <span class="lp-pop-item-icon">🌗</span>
            <span>สลับโหมดหน้าจอ</span>
        </div>
        <button class="lp-theme-toggle-btn" style="width: 32px; height: 32px;" title="สลับโหมด">
            <svg id="theme-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
            </svg>
        </button>
    </div>
</div>


<!-- Hero Section -->
<section class="lp-section lp-hero-wrapper">
    <div class="lp-hero-content">
        <h1 class="glow-text-orange">เปลี่ยนร้านเดิมๆ<br>สู่ระบบ Smart Restaurant</h1>
        <p>
            ปฏิวัติประสบการณ์การให้บริการในร้านด้วยระบบสแกนสั่งอาหารผ่าน QR Code ประจำโต๊ะอัจฉริยะ 
            ออเดอร์ส่งตรงจากสมาร์ตโฟนลูกค้าเข้าห้องครัวทันที สะดวกรวดเร็ว ไร้คิวสะสม 
            ไม่ต้องติดตั้งตู้คีออสเกะกะสายตา พร้อมแดชบอร์ดบริหารคิวและควบคุมยอดขายครบวงจร
        </p>
        <div class="lp-hero-cta-btns">
            <a href="#demo" class="btn btn-primary" style="border-radius: 4px;">📱 ทดลองสแกนคิวโต๊ะ</a>
            <a href="#pricing" class="btn btn-secondary" style="border-radius: 4px;">ดูแพ็กเกจราคา</a>
        </div>
    </div>
    
    <!-- Phone Mockup Frame containing simulated Customer UI -->
    <div class="lp-showcase-mockup">
        <div class="lp-phone-mockup-wrapper">
            <div class="lp-phone-camera-notch"></div>
            <div class="lp-phone-screen-content">
                <div class="lp-mock-header">
                    <span class="lp-mock-shop-name">🍜 ร้านก๋วยเตี๋ยวตงกิน</span>
                    <span class="lp-mock-table-badge">โต๊ะที่ 3</span>
                </div>
                <div class="lp-mock-menu-category">
                    <span class="lp-mock-cat-tab active">เมนูแนะนำ</span>
                    <span class="lp-mock-cat-tab">เครื่องดื่ม</span>
                </div>
                
                <div class="lp-mock-menu-list">
                    <div class="lp-mock-menu-item">
                        <div class="lp-mock-item-thumb">🍜</div>
                        <div class="lp-mock-item-details">
                            <div class="lp-mock-item-name">เฝอเนื้อปากช่อง</div>
                            <div class="lp-mock-item-price">฿89.00</div>
                        </div>
                        <button class="lp-mock-item-add">+</button>
                    </div>
                    <div class="lp-mock-menu-item">
                        <div class="lp-mock-item-thumb">🍟</div>
                        <div class="lp-mock-item-details">
                            <div class="lp-mock-item-name">ปอเปี๊ยะสดทอดกรอบ</div>
                            <div class="lp-mock-item-price">฿69.00</div>
                        </div>
                        <button class="lp-mock-item-add">+</button>
                    </div>
                </div>

                <div style="background: rgba(255,255,255,0.03); border: 1px solid var(--lp-border-glass); border-radius: 12px; padding: 10px; margin-top: 15px;">
                    <div style="font-size: 9.5px; font-weight: 700; color: var(--lp-accent-gold); margin-bottom: 5px;">🔔 ติดตามสถานะอาหาร</div>
                    <div style="display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; background: rgba(0,0,0,0.2); padding: 6px; border-radius: 6px;">
                        <span style="color: #FFF;">คิว #102: เฝอเนื้อ x 1</span>
                        <span style="color: var(--lp-accent-orange); font-weight: 700;">กำลังเตรียม...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Product Features Section -->
<section id="features" class="lp-section">
    <div class="lp-section-header">
        <h2 class="glow-text-orange">ทำไมต้องเลือก CMTC Tech Solution?</h2>
        <p>ทุกฟังก์ชันของระบบถูกสร้างมาเพื่อลดภาระการทำงานของร้าน และยกระดับประสบการณ์ให้ผู้มาใช้บริการดีขึ้นในทุกมิติ</p>
    </div>
    
    <div class="lp-features-grid">
        <div class="lp-feature-card">
            <div class="lp-feature-icon-box" style="background: rgba(0, 229, 255, 0.15); border: 1px solid rgba(0, 229, 255, 0.4); color: #00E5FF;">
                <span style="font-size: 26px;">📱</span>
            </div>
            <h3>สแกนสั่งจากโต๊ะอัจฉริยะ</h3>
            <p>
                ลูกค้าสามารถสแกน QR Code ประจำโต๊ะเพื่อเข้าดูรายการอาหาร สั่งอาหาร และติดตามสถานะคิวได้โดยตรงจากสมาร์ตโฟนส่วนตัว ไม่ต้องลงทะเบียนหรือโหลดแอป
            </p>
        </div>

        <div class="lp-feature-card">
            <div class="lp-feature-icon-box" style="background: rgba(255, 159, 67, 0.15); border: 1px solid rgba(255, 159, 67, 0.4); color: #FF9F43;">
                <span style="font-size: 26px;">👨‍🍳</span>
            </div>
            <h3>ระบบคิวห้องครัวอัปเดตเรียลไทม์</h3>
            <p>
                แดชบอร์ดจัดการคิวปรุงครัวมีเสียงสัญญาณแจ้งเตือนทุกครั้งที่มีออเดอร์ใหม่เข้ามา สามารถเปลี่ยนสถานะเพื่อแจ้งกลับไปยังลูกค้าได้ทันที
            </p>
        </div>

        <div class="lp-feature-card">
            <div class="lp-feature-icon-box" style="background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.4); color: #A855F7;">
                <span style="font-size: 26px;">🖨️</span>
            </div>
            <h3>จัดการเมนู & ป้ายคิวโต๊ะอาหาร</h3>
            <p>
                ร้านค้ามีสิทธิ์อัปเดตรายการเมนู เพิ่มราคา หรือกดสั่งสลับสถานะอาหารหมดวัตถุดิบขาดตลาดได้ทันที พร้อมเครื่องมือดาวน์โหลดไฟล์ป้าย QR Code ประจำโต๊ะ
            </p>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section id="how-it-works" class="lp-section" style="background: rgba(255, 90, 0, 0.02); border-radius: 30px;">
    <div class="lp-section-header">
        <h2 class="glow-text-gold">3 ขั้นตอนง่ายๆ ในการเริ่มใช้งาน</h2>
        <p>ยกระดับร้านอาหารของคุณสู่ระบบดิจิทัลด้วยขั้นตอนที่สะดวกรวดเร็วและใช้เวลาเซ็ตอัปเพียงไม่กี่นาที</p>
    </div>
    
    <div class="lp-steps-container">
        <div class="lp-step-card">
            <div class="lp-step-number">01</div>
            <h3>1. สมัครและตั้งค่าเมนู</h3>
            <p>ลงทะเบียนเลือกแพ็กเกจที่คุณต้องการ จากนั้นกรอกรายการเมนูอาหารและกำหนดราคาผ่านระบบหลังบ้านได้ทันที</p>
        </div>

        <div class="lp-step-card">
            <div class="lp-step-number">02</div>
            <h3>2. ปริ้น QR Code แปะโต๊ะ</h3>
            <p>ระบบจะสร้างรหัสป้าย QR Code แยกตามโต๊ะให้อัตโนมัติ สามารถสั่งดาวน์โหลดและนำไปพิมพ์ติดไว้ประจำเป็นจุดในร้านค้า</p>
        </div>

        <div class="lp-step-card">
            <div class="lp-step-number">03</div>
            <h3>3. รับออเดอร์ผ่าน Dashboard</h3>
            <p>เมื่อลูกค้าสแกนสั่งอาหาร รายการอาหารจะเด้งเข้าสู่แดชบอร์ดในห้องครัวของร้านทันที ปรุงและเสิร์ฟได้รวดเร็วทันใจ</p>
        </div>
    </div>
</section>

<!-- Benefits Section -->
<section id="benefits" class="lp-section">
    <div class="lp-section-header">
        <h2 class="glow-text-orange">ผลลัพธ์และความคุ้มค่าที่ร้านอาหารจะได้รับ</h2>
        <p>เปลี่ยนมาใช้ CMTC Tech Solution เพื่อการจัดการที่เป็นระบบและยกระดับประสิทธิภาพความพึงพอใจของลูกค้า</p>
    </div>

    <div class="lp-benefits-wrapper">
        <div class="lp-benefit-card">
            <div class="lp-benefit-icon">✍️</div>
            <div>
                <h3>ลดข้อผิดพลาดในการรับออเดอร์</h3>
                <p>ตัดปัญหาจดออเดอร์ผิดพลาด ลายมืออ่านยาก หรือส่งรายการผิดโต๊ะ เพราะลูกค้าเลือกรายการและกดสั่งยืนยันด้วยตนเอง</p>
            </div>
        </div>

        <div class="lp-benefit-card">
            <div class="lp-benefit-icon">🪙</div>
            <div>
                <h3>ประหยัดงบ ไม่ต้องมีตู้คีออส</h3>
                <p>ลดต้นทุนค่าฮาร์ดแวร์ตู้คีออสราคาแพงหลักแสนบาท และไม่ต้องเสียพื้นที่จัดตั้งหรือเสียค่าซ่อมบำรุงจุกจิก</p>
            </div>
        </div>

        <div class="lp-benefit-card">
            <div class="lp-benefit-icon">⚡</div>
            <div>
                <h3>บริการรวดเร็ว ลูกค้าประทับใจ</h3>
                <p>ลูกค้าไม่ต้องคอยยืนเรียกพนักงานมารับรายการหรือรอคิวนาน สามารถเริ่มสั่งได้ทันทีที่นั่งโต๊ะอาหาร</p>
            </div>
        </div>
    </div>
</section>

<!-- Interactive Demo Section -->
<section id="demo" class="lp-section">
    <div class="lp-section-header">
        <h2 class="glow-text-gold">ทดลองจำลองการทำงานจริง</h2>
        <p>คลิกเลือกหมายเลขโต๊ะอาหารเพื่อสังเกตการสร้างป้ายและจำลองหน้าสั่งอาหารจริงแยกโต๊ะ</p>
    </div>

    <div class="lp-demo-container">
        <div class="lp-demo-left">
            <h3 class="glow-text-orange">⚙️ เครื่องมือจำลองโต๊ะสั่งอาหาร</h3>
            <p>
                ระบบจำลองป้ายจะคำนวณลิงก์ Dynamic URL เชื่อมโยงตรงไปยังแอปสั่งอาหารฝั่งลูกค้าโดยแยกหมายเลขโต๊ะในแต่ละสาขา
            </p>
            
            <div class="lp-demo-selectors">
                <button type="button" class="lp-demo-btn-table active" onclick="setDemoTable(1, this)">โต๊ะที่ 1</button>
                <button type="button" class="lp-demo-btn-table" onclick="setDemoTable(2, this)">โต๊ะที่ 2</button>
                <button type="button" class="lp-demo-btn-table" onclick="setDemoTable(3, this)">โต๊ะที่ 3</button>
                <button type="button" class="lp-demo-btn-table" onclick="setDemoTable(4, this)">โต๊ะที่ 4</button>
            </div>

            <div class="lp-demo-url-box" style="background: rgba(255,255,255,0.03); border: 1px dashed var(--lp-border-glass); border-radius: 12px; padding: 20px; margin-bottom: 25px;">
                <div style="font-size: 11px; color: var(--lp-text-secondary); font-weight: 700; text-transform: uppercase;">ไดนามิก URL ปลายทาง:</div>
                <div id="demoUrlText" style="font-size: 13.5px; color: var(--lp-text-primary); font-weight: 700; word-break: break-all; margin-top: 5px;"></div>
            </div>

            <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                <a id="btnVisitCustomer" href="" target="_blank" class="btn btn-primary btn-sm" style="border-radius: 4px;">
                    📱 จำลองสแกนสั่งอาหาร (Customer App)
                </a>
            </div>
        </div>

        <div class="lp-demo-right">
            <div class="lp-demo-qr-card">
                <img id="demoQrImage" src="" alt="Simulated Table QR Code" style="width: 100%; height: 100%; object-fit: contain;">
            </div>
            <div id="demoQrLabel" style="font-size: 15px; font-weight: 800; color: var(--lp-text-primary); margin-bottom: 4px;">โต๊ะที่ 1</div>
        </div>
    </div>
</section>

<!-- Pricing Plans Section -->
<section id="pricing" class="lp-section">
    <div class="lp-section-header">
        <h2 class="glow-text-orange">อัตราค่าบริการและแพ็กเกจเช่า</h2>
        <p>เลือกแผนบริการที่ตอบโจทย์ขนาดร้านอาหารของคุณ เริ่มต้นเปลี่ยนระบบสู่ความล้ำสมัยได้ในราคาประหยัด</p>
    </div>

    <!-- Prominent Free Trial Banner -->
    <div style="background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(245, 158, 11, 0.25) 100%); border: 2px solid #F59E0B; border-radius: 16px; padding: 20px 24px; margin-bottom: 30px; text-align: center; box-shadow: 0 0 25px rgba(245, 158, 11, 0.2);">
        <div style="font-size: 19px; font-weight: 800; color: #FBBF24; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;">
            <span>🎉 สิทธิพิเศษ! สมัครวันนี้ ทดลองใช้งานฟรี 14 วันแรก (Starter/Standard) และ 7 วันแรก (Premium)</span>
        </div>
        <p style="color: #FEF3C7; font-size: 13.5px; margin: 8px 0 0 0; font-weight: 600;">
            ✨ สมัครได้ทันที $0 ในช่วงทดลองใช้! ทดลองใช้งานได้เต็มรูปแบบทุกฟังก์ชัน ไม่ต้องโอนเงินชำระเงินทันที
        </p>
    </div>

    <div class="lp-pricing-grid">
        <?php foreach ($plans as $p): 
            $key = $p['name'];
            $badge = strtoupper($p['name']);
            $card_class = ($key === 'Standard') ? 'lp-pricing-card premium-tag' : 'lp-pricing-card';
            $title_style = ($key === 'Standard') ? 'style="color: var(--lp-accent-orange);"' : '';
            $badge_style = ($key === 'Standard') ? 'style="background: var(--lp-accent-orange); color:#fff;"' : '';
            $btn_class = ($key === 'Standard') ? 'btn btn-primary' : 'btn btn-secondary';
            
            // Dynamic Trial Days per package tier
            $p_trial_days = ($key === 'Premium' || $p['id'] == 3) ? 7 : 14;
            $p_badge_bg = ($key === 'Premium' || $p['id'] == 3) ? 'rgba(239, 68, 68, 0.15)' : 'rgba(16, 185, 129, 0.15)';
            $p_badge_border = ($key === 'Premium' || $p['id'] == 3) ? '#EF4444' : '#10B981';
            $p_badge_color = ($key === 'Premium' || $p['id'] == 3) ? '#EF4444' : '#10B981';
        ?>
        <div class="<?php echo $card_class; ?>">
            <div class="lp-pricing-badge" <?php echo $badge_style; ?>><?php echo htmlspecialchars($badge); ?></div>
            <h3 class="lp-pricing-title" <?php echo $title_style; ?>><?php echo htmlspecialchars($p['name']); ?> Plan</h3>
            <div class="lp-pricing-price">฿<?php echo number_format($p['price']); ?> <span>/ เดือน</span></div>
            <div style="background: <?php echo $p_badge_bg; ?>; border: 1px solid <?php echo $p_badge_border; ?>; color: <?php echo $p_badge_color; ?>; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; margin: 8px 0 12px 0; text-align: center; display: inline-block;">
                🎁 ทดลองใช้งานฟรี <?php echo $p_trial_days; ?> วันแรก ($0)
            </div>
            <ul class="lp-pricing-features-list">
                <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> รองรับสูงสุด <?php echo htmlspecialchars($p['limit_tables']); ?> โต๊ะอาหาร</li>
                <?php if ($key === 'Starter'): ?>
                    <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> บริการเมนูเลือกรายการฝั่งลูกค้า</li>
                    <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> แผงลงทะเบียนเมนูอาหาร CRUD</li>
                <?php elseif ($key === 'Standard'): ?>
                    <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> บอร์ดปรุงคิวครัวเรียลไทม์</li>
                    <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ระบบเช็คสถานะการปรุงอาหารของลูกค้า</li>
                    <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> สลับสถานะอาหารหมดคลังชั่วคราว</li>
                <?php else: ?>
                    <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> ทุกฟังก์ชันในแผน Standard</li>
                    <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> แดชบอร์ดสรุปวิเคราะห์ยอดขาย</li>
                    <li><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg> การตอบกลับด่วนระดับพิเศษ</li>
                <?php endif; ?>
            </ul>
            <button onclick="openSubDetailModal('<?php echo htmlspecialchars($key); ?>')" class="<?php echo $btn_class; ?>" style="width: 100%; border-radius: 4px;">สมัครใช้งานแผนนี้</button>
        </div>
        <?php endforeach; ?>
    </div>
</section>

<!-- FAQ Section -->
<section id="faq" class="lp-section" style="background: rgba(0, 229, 255, 0.01); border-radius: 30px;">
    <div class="lp-section-header">
        <h2 class="glow-text-orange">คำถามที่พบบ่อย (FAQ)</h2>
        <p>มีข้อสงสัยเกี่ยวกับระบบ? ลองค้นหาคำตอบเบื้องต้นสำหรับร้านอาหารและลูกค้าได้ที่นี่เลยครับ</p>
    </div>

    <div class="lp-faq-accordion">
        <div class="lp-faq-item">
            <div class="lp-faq-header" onclick="toggleFaq(this)">
                <span>สามารถเปลี่ยนรูปภาพและจัดโปรโมชันเองได้ไหม?</span>
                <span class="lp-faq-icon">+</span>
            </div>
            <div class="lp-faq-body">
                สามารถทำได้แน่นอนครับ! ร้านค้าและทีมแอดมินสามารถกำหนดรายละเอียดคำอธิบายโปรโมชัน รหัสส่วนลด ตลอดจนการอัปโหลดเปลี่ยนรูปภาพการ์ดฟังก์ชันต่าง ๆ ผ่านแดชบอร์ด Smart OS ได้ทันทีอย่างเป็นอิสระ
            </div>
        </div>

        <div class="lp-faq-item">
            <div class="lp-faq-header" onclick="toggleFaq(this)">
                <span>ระบบนี้รองรับการใช้งานได้ทั้งหมดกี่โต๊ะ?</span>
                <span class="lp-faq-icon">+</span>
            </div>
            <div class="lp-faq-body">
                รองรับตามสัญญากับแพ็กเกจที่คุณเลือกสมัครครับ โดยแผน Starter จะรองรับได้ 10 โต๊ะ, Standard ได้ 25 โต๊ะ และแผน Premium จะรองรับสูงสุด 40 โต๊ะอาหารครับ
            </div>
        </div>

        <div class="lp-faq-item">
            <div class="lp-faq-header" onclick="toggleFaq(this)">
                <span>ต้องดาวน์โหลดแอปพลิเคชันลงในเครื่องเพิ่มเติมไหม?</span>
                <span class="lp-faq-icon">+</span>
            </div>
            <div class="lp-faq-body">
                ไม่ต้องดาวน์โหลดหรือติดตั้งแอปใด ๆ เลยครับ! ระบบ CMTC Tech Solution พัฒนาขึ้นด้วยเทคโนโลยีเว็บเบราว์เซอร์ 100% ทั้งฝั่งลูกค้าสั่งและบอร์ดปรุงครัว สามารถเปิดผ่านโทรศัพท์หรือแท็บเล็ตได้ทันทีทุกระบบปฏิบัติการ
            </div>
        </div>
    </div>
</section>

<!-- Subscription Detail Modal -->
<div class="lp-modal-backdrop" id="subscriptionDetailModal" onclick="closeSubDetailModal()">
    <div class="lp-sub-modal-card" onclick="event.stopPropagation()">
        <button class="lp-modal-close-btn" onclick="closeSubDetailModal()">&times;</button>
        <div class="lp-sub-modal-header" style="flex-shrink: 0;">
            <span class="lp-sub-badge" id="subModalBadge">STARTER</span>
            <h2 id="subModalTitle" class="glow-text-orange" style="margin: 5px 0;">Starter Plan</h2>
            <div class="lp-sub-modal-price" id="subModalPrice" style="font-weight: 800; font-size: 20px; color: var(--lp-accent-orange);">฿490 / เดือน</div>
            <div id="subModalTrialTag" style="background: rgba(16, 185, 129, 0.15); border: 1px solid #10B981; color: #10B981; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 800; margin-top: 8px; display: inline-block;">
                🎉 สิทธิพิเศษ: ทดลองใช้งานฟรี 14 วันแรก ($0 ไม่ต้องชำระเงินทันที)
            </div>
        </div>
        <div class="lp-sub-modal-body" style="flex-grow: 1; overflow-y: auto; padding-right: 5px; -webkit-overflow-scrolling: touch;">
            <div class="lp-sub-list-section">
                <h4 style="color: var(--success-color); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 12px; margin-top: 0;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>
                    ฟังก์ชันที่ได้รับ (Included Features)
                </h4>
                <ul class="lp-sub-features-list included" id="subModalIncluded" style="list-style:none; padding:0; margin:0;">
                    <!-- Dynamic List -->
                </ul>
            </div>
            <div class="lp-sub-list-section" id="subModalExcludedSection" style="margin-top: 20px;">
                <h4 style="color: #FF5A00; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 12px;">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                    ฟังก์ชันที่จำกัด (Locked / Excluded)
                </h4>
                <ul class="lp-sub-features-list locked" id="subModalLocked" style="list-style:none; padding:0; margin:0;">
                    <!-- Dynamic List -->
                </ul>
            </div>
        </div>
        <div class="lp-sub-modal-footer" style="flex-shrink: 0; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--lp-border-glass, rgba(255,255,255,0.08)); display: flex; gap: 15px;">
            <button class="btn btn-secondary" onclick="closeSubDetailModal()" style="flex: 1; border-radius: 4px;">ย้อนกลับ</button>
            <button class="btn btn-primary" id="btnConfirmSelectSub" style="flex: 2; border-radius: 4px;">ยืนยันเลือกแพ็กเกจนี้ 🚀</button>
        </div>
    </div>
</div>

<!-- Interactive Contact / Registration Modal -->
<div class="lp-modal-backdrop" id="contactModal" onclick="closeContactModal()">
    <div class="lp-contact-modal-card" onclick="event.stopPropagation()">
        <button class="lp-modal-close-btn" onclick="closeContactModal()" style="top: 15px; right: 15px;">&times;</button>
        <h2 class="glow-text-orange" style="font-size: 18px; font-weight: 800; margin-bottom: 4px;">📩 สมัครลงทะเบียนใช้งานร้านค้า (Free Trial)</h2>
        <p style="color: var(--lp-text-secondary); font-size: 12px; margin-bottom: 10px;">กรอกรายละเอียดร้านอาหารของคุณ เพื่อเปิดบัญชีทดลองใช้งานระบบฟรีได้ทันที</p>
        
        <!-- Free Trial Promo Highlight Banner -->
        <div style="background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.25) 100%); border: 1px dashed #F59E0B; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; text-align: center;">
            <span id="reg_modal_promo_title" style="color: #FBBF24; font-weight: 800; font-size: 12.5px;">🎉 สิทธิพิเศษ! สมัครวันนี้ ทดลองใช้งานฟรี 14 วัน (Starter/Standard) หรือ 7 วัน (Premium)</span>
            <div style="color: #FEF3C7; font-size: 11px; margin-top: 2px; font-weight: 600;">✨ ไม่ต้องชำระเงินล่วงหน้า เริ่มต้นใช้งาน $0 ได้ทันที</div>
        </div>

        <form id="contactForm" onsubmit="handleContactSubmit(event)">
            <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px;">
                <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; color: #fff; font-size: 12.5px; font-weight: 700;">
                    <input type="checkbox" id="reg_is_trial" checked onchange="toggleRegTrialMode(this)" style="width: 14px; height: 14px; accent-color: #F59E0B;">
                    <span id="reg_trial_checkbox_label">🎁 รับสิทธิพิเศษทดลองใช้งานฟรี ($0 ไม่ต้องชำระเงินทันที)</span>
                </label>
            </div>
            
            <div class="form-group" style="margin-bottom: 8px;">
                <label class="form-label" style="font-size:12px; font-weight:600; margin-bottom: 3px;" for="shop_name">ชื่อร้านอาหารของคุณ *</label>
                <input type="text" id="shop_name" class="form-control" style="background: rgba(0,0,0,0.3); border: 1px solid var(--lp-border-glass); color:#fff; padding: 6px 10px; height: 36px; font-size: 12.5px;" placeholder="เช่น ครัวสมใจรส" required>
            </div>
            
            <div class="form-group" style="margin-bottom: 8px;">
                <label class="form-label" style="font-size:12px; font-weight:600; margin-bottom: 3px;" for="owner_name">ชื่อ-นามสกุล ผู้ติดต่อ *</label>
                <input type="text" id="owner_name" class="form-control" style="background: rgba(0,0,0,0.3); border: 1px solid var(--lp-border-glass); color:#fff; padding: 6px 10px; height: 36px; font-size: 12.5px;" placeholder="เช่น นายสมใจ ปิติสุข" required>
            </div>

            <div class="form-group" style="margin-bottom: 8px;">
                <label class="form-label" style="font-size:12px; font-weight:600; margin-bottom: 3px;" for="phone">เบอร์โทรศัพท์ติดต่อกลับ *</label>
                <input type="tel" id="phone" class="form-control" style="background: rgba(0,0,0,0.3); border: 1px solid var(--lp-border-glass); color:#fff; padding: 6px 10px; height: 36px; font-size: 12.5px;" placeholder="081-XXX-XXXX" required>
            </div>

            <div class="form-group" style="margin-bottom: 8px;">
                <label class="form-label" style="font-size:12px; font-weight:600; margin-bottom: 3px;" for="selected_plan">แผนแพ็กเกจที่ต้องการ</label>
                <select id="selected_plan" class="form-control" onchange="onPlanSelectChange(this.value)" style="background: rgba(0,0,0,0.3); border: 1px solid var(--lp-border-glass); color:#fff; padding: 6px 10px; height: 36px; font-size: 12.5px;">
                    <option value="Starter Plan" style="background:#0a101b;">Starter Plan - ฿<?php echo $starter_price; ?>/ด. (ทดลองใช้ฟรี 14 วัน)</option>
                    <option value="Standard Plan" style="background:#0a101b;">Standard Plan - ฿<?php echo $standard_price; ?>/ด. (ทดลองใช้ฟรี 14 วัน)</option>
                    <option value="Premium Plan" style="background:#0a101b;">Premium Plan - ฿<?php echo $premium_price; ?>/ด. (ทดลองใช้ฟรี 7 วัน)</option>
                </select>
            </div>

            <!-- Real Payment Channel & Slip Upload Box -->
            <div id="reg_payment_channel_box" style="background: rgba(0, 229, 255, 0.05); border: 1px dashed var(--lp-border-glass); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; margin-top: 8px;">
                <div style="font-weight: 800; color: #00E5FF; font-size: 12px; margin-bottom: 6px; display: flex; align-items: center; gap: 4px;">
                    <span>💳 ช่องทางการชำระเงิน (PromptPay QR Code & ธนาคาร)</span>
                </div>
                <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=PromptPay_CMTC_Solution_0105565012345" alt="PromptPay QR Code" style="width: 85px; height: 85px; border-radius: 6px; background: #fff; padding: 3px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.3);">
                    <div style="font-size: 11.5px; color: #E2E8F0; line-height: 1.4;">
                        <div style="font-weight: 800; color: #fff;">ธนาคารกสิกรไทย (KBANK)</div>
                        <div>เลขที่บัญชี: <strong style="color: #00E5FF; font-size: 13px;">012-3-45678-9</strong></div>
                        <div>ชื่อบัญชี: <strong>บจก. ซีเอ็มทีซี เทค โซลูชั่น</strong></div>
                    </div>
                </div>
            </div>

            <div class="form-group" style="margin-bottom: 12px;">
                <label class="form-label" style="font-size:12px; font-weight:600; margin-bottom: 3px;" for="reg_slip_file">
                    แนบไฟล์สลิปการโอนเงินจริง (รูปภาพ JPG / PNG)
                    <span id="slip_required_tag" style="color: #EF4444; font-size: 11px; display: none;">* จำเป็นต้องแนบสลิปจริงเพื่อชำระเงิน</span>
                </label>
                <input type="file" id="reg_slip_file" name="slip_file" accept="image/jpeg,image/png,image/webp" class="form-control" style="background: rgba(0,0,0,0.3); border: 1px solid var(--lp-border-glass); color:#fff; padding: 4px 8px; font-size: 11.5px; height: 34px;">
            </div>

            <button type="submit" id="btnSubmitReg" class="btn btn-primary" style="width: 100%; margin-top: 4px; border-radius: 6px; font-weight: 800; padding: 10px; font-size: 13.5px;">
                🚀 สมัครเริ่มทดลองใช้งานฟรี (Start Free Trial)
            </button>
        </form>
    </div>
</div>

<!-- Main Footer -->
<footer class="global-footer" style="margin-top: 50px;">
    <div style="font-weight: 700; color: var(--lp-accent-gold); margin-bottom: 8px;">CMTC Tech Solution • ระบบแอดมินร้านค้า</div>
    <div style="color: rgba(255, 255, 255, 0.8); font-size: 12.5px;">
        ระบบแพลตฟอร์มบริหารสั่งอาหารอัจฉริยะ • CMTC Tech Solution Platform &copy; 2026.
    </div>
</footer>

<script>
// Change navbar styling on scroll
window.addEventListener('scroll', function() {
    const navbar = document.getElementById('lpNavbar');
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

// Popover Menu Actions
function togglePopMenu(event) {
    if (event) event.stopPropagation();
    const menu = document.getElementById('lpPopMenu');
    if (menu) {
        menu.classList.toggle('open');
    }
}

function closePopMenu() {
    const menu = document.getElementById('lpPopMenu');
    if (menu) {
        menu.classList.remove('open');
    }
}

document.addEventListener('click', function(e) {
    const menu = document.getElementById('lpPopMenu');
    const btn = document.getElementById('lpHamburgerBtn');
    if (menu && menu.classList.contains('open')) {
        if (!menu.contains(e.target) && (!btn || !btn.contains(e.target))) {
            closePopMenu();
        }
    }
});

// Toggle FAQ Accordion open states
function toggleFaq(headerElement) {
    const faqItem = headerElement.parentElement;
    const isOpen = faqItem.classList.contains('open');
    
    // Close other FAQ items
    document.querySelectorAll('.lp-faq-item').forEach(item => {
        item.classList.remove('open');
    });
    
    if (!isOpen) {
        faqItem.classList.add('open');
    }
}

// Dynamic QR code calculations path
const protocol = window.location.protocol;
const host = window.location.host;
const basePath = window.location.pathname.replace('index.php', '');
const targetBase = protocol + "//" + host + basePath + "menu.php";

function setDemoTable(tableNum, btnElement) {
    document.querySelectorAll('.lp-demo-btn-table').forEach(btn => btn.classList.remove('active'));
    btnElement.classList.add('active');

    const targetUrl = `${targetBase}?store_id=DEMO_STORE&is_demo=1&table=${tableNum}`;
    const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(targetUrl)}`;
    
    document.getElementById('demoUrlText').textContent = targetUrl;
    document.getElementById('demoQrImage').src = qrApiUrl;
    document.getElementById('demoQrLabel').textContent = `โต๊ะที่ ${tableNum}`;
    document.getElementById('btnVisitCustomer').href = targetUrl;
}

// Light/Dark Theme Switcher
function toggleThemeMode() {
    const isLight = document.body.classList.toggle('light-theme');
    const themeIcon = document.getElementById('theme-icon');
    const themeIconMobile = document.getElementById('theme-icon-mobile');
    const iconMoon = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>`;
    const iconSun = `<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>`;
    
    if (isLight) {
        localStorage.setItem('theme-mode', 'light');
        if (themeIcon) themeIcon.innerHTML = iconSun;
        if (themeIconMobile) themeIconMobile.innerHTML = iconSun;
    } else {
        localStorage.setItem('theme-mode', 'dark');
        if (themeIcon) themeIcon.innerHTML = iconMoon;
        if (themeIconMobile) themeIconMobile.innerHTML = iconMoon;
    }
}

document.addEventListener("DOMContentLoaded", function() {
    const iconSun = `<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>`;
    if (localStorage.getItem('theme-mode') === 'light') {
        const themeIcon = document.getElementById('theme-icon');
        const themeIconMobile = document.getElementById('theme-icon-mobile');
        if (themeIcon) themeIcon.innerHTML = iconSun;
        if (themeIconMobile) themeIconMobile.innerHTML = iconSun;
    }
    
    const firstTableBtn = document.querySelector('.lp-demo-btn-table');
    if (firstTableBtn) {
        setDemoTable(1, firstTableBtn);
    }
});

// Open and close contact interest modal
function getTrialDaysForPlan(planName) {
    const lower = (planName || '').toLowerCase();
    if (lower.includes('premium') || lower.includes('max') || lower.includes('pro')) {
        return 7;
    }
    return 14;
}

function onPlanSelectChange(planName) {
    const days = getTrialDaysForPlan(planName);
    const isTrial = document.getElementById('reg_is_trial') ? document.getElementById('reg_is_trial').checked : true;
    const submitBtn = document.getElementById('btnSubmitReg');
    if (submitBtn && isTrial) {
        submitBtn.textContent = `🚀 สมัครเริ่มทดลองใช้งานฟรี ${days} วัน (Start ${days}-Day Free Trial)`;
    }
}

function openContactModal(planName = 'Standard Plan') {
    const modal = document.getElementById('contactModal');
    const select = document.getElementById('selected_plan');
    if (select) {
        select.value = planName;
    }
    onPlanSelectChange(planName);
    modal.classList.add('open');
    document.body.style.overflow = 'hidden';
}

function closeContactModal() {
    document.getElementById('contactModal').classList.remove('open');
    document.body.style.overflow = '';
}

function toggleRegTrialMode(checkbox) {
    const slipNotice = document.getElementById('slip_required_tag');
    const submitBtn = document.getElementById('btnSubmitReg');
    const planName = document.getElementById('selected_plan') ? document.getElementById('selected_plan').value : 'Standard Plan';
    const days = getTrialDaysForPlan(planName);
    
    if (checkbox.checked) {
        if (slipNotice) slipNotice.style.display = 'none';
        if (submitBtn) submitBtn.textContent = `🚀 สมัครเริ่มทดลองใช้งานฟรี ${days} วัน (Start ${days}-Day Free Trial)`;
    } else {
        if (slipNotice) slipNotice.style.display = 'inline';
        if (submitBtn) submitBtn.textContent = '💳 ยืนยันชำระเงินและสมัครแพ็กเกจ';
    }
}

// Contact / Registration form AJAX submission
function handleContactSubmit(event) {
    event.preventDefault();
    const shop = document.getElementById('shop_name').value;
    const owner = document.getElementById('owner_name').value;
    const phone = document.getElementById('phone').value;
    const plan = document.getElementById('selected_plan').value;
    const isTrialCheckbox = document.getElementById('reg_is_trial');
    const isTrial = isTrialCheckbox ? isTrialCheckbox.checked : true;
    const slipFileInput = document.getElementById('reg_slip_file');
    const slipFile = slipFileInput && slipFileInput.files ? slipFileInput.files[0] : null;

    // Strict Validation: If paid package is chosen without trial, require real slip file upload!
    if (!isTrial && !slipFile) {
        alert('⚠️ กรุณาอัปโหลดไฟล์สลิปการโอนเงินจริงก่อนกดยืนยันชำระเงินสมัครแพ็กเกจ (ห้ามส่งฟอร์มโดยไม่มีสลิป)');
        return;
    }

    if (slipFile) {
        const validTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
        if (!validTypes.includes(slipFile.type)) {
            alert('⚠️ รูปแบบไฟล์สลิปไม่ถูกต้อง กรุณาอัปโหลดไฟล์รูปภาพ (JPG, PNG, WEBP) เท่านั้น');
            return;
        }
        if (slipFile.size > 5 * 1024 * 1024) {
            alert('⚠️ ขนาดไฟล์สลิปใหญ่เกินไป (ต้องไม่เกิน 5MB)');
            return;
        }
    }

    const formData = new FormData();
    formData.append('action', 'submit_contact');
    formData.append('shop_name', shop);
    formData.append('owner_name', owner);
    formData.append('phone', phone);
    formData.append('plan', plan);
    if (isTrial) {
        formData.append('is_trial', '1');
        formData.append('plan_type', 'trial');
    }
    if (slipFile) {
        formData.append('slip_file', slipFile);
    }

    fetch('index.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: '🎉 สมัครบริการเรียบร้อยแล้ว!',
                    html: `
                        <div style="text-align: left; font-family: 'Kanit', sans-serif; color: #f8fafc; line-height: 1.6; padding: 5px 0;">
                            <div style="background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; margin-bottom: 16px;">
                                <p style="margin: 0; font-size: 15px; font-weight: 500;">ร้าน: <strong style="color: #00e5ff; font-size: 16px;">"${shop}"</strong></p>
                                <p style="margin: 6px 0 0 0; font-size: 15px; font-weight: 500;">แพ็กเกจ: <strong style="color: #00e5ff; font-size: 16px;">"${plan}"</strong></p>
                                ${data.is_trial ? `
                                    <p style="margin: 10px 0 0 0; font-size: 14.5px; color: #10b981; font-weight: bold; display: flex; align-items: center; gap: 6px;">
                                        ✨ ได้รับสิทธิพิเศษทดลองใช้งานฟรี ${data.trial_days || 14} วันแรก (${data.trial_days || 14}-Day Free Trial)
                                    </p>
                                ` : `
                                    <p style="margin: 10px 0 0 0; font-size: 14.5px; color: #10b981; font-weight: bold; display: flex; align-items: center; gap: 6px;">
                                        ✅ ระบบได้รับไฟล์สลิปโอนเงินเรียบร้อยแล้ว! ข้อมูลถูกส่งเพื่อรอตรวจสอบอนุมัติ
                                    </p>
                                `}
                            </div>
                            ${data.account ? `
                                <div style="background: rgba(255, 87, 34, 0.15); border: 1px solid rgba(255, 87, 34, 0.4); border-radius: 12px; padding: 16px; margin-bottom: 16px;">
                                    <h4 style="margin: 0 0 10px 0; color: #ff5722; font-size: 15.5px; font-weight: bold; display: flex; align-items: center; gap: 6px;">
                                        🔑 ข้อมูลบัญชีผู้ใช้ระบบชั่วคราว:
                                    </h4>
                                    <div style="font-family: monospace; font-size: 14.5px; background: rgba(0, 0, 0, 0.3); padding: 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); line-height: 1.8;">
                                        <div><strong>Username:</strong> <span style="color: #ffd166; font-size: 16px; font-weight: bold; margin-left: 6px;">${data.account.username}</span></div>
                                        <div><strong>Password:</strong> <span style="color: #ffd166; font-size: 16px; font-weight: bold; margin-left: 6px;">${data.account.temp_password}</span></div>
                                    </div>
                                </div>
                                <p style="margin: 0; font-size: 13.5px; color: #94a3b8; text-align: center; font-weight: 500;">
                                    คุณสามารถนำชื่อผู้ใช้และรหัสผ่านไปเข้าสู่ระบบ Store Admin เพื่อใช้งานได้ทันที!
                                </p>
                            ` : ''}
                        </div>
                    `,
                    icon: 'success',
                    background: '#0f172a',
                    color: '#ffffff',
                    confirmButtonColor: '#ff5722',
                    confirmButtonText: 'ตกลง เข้าสู่ระบบ',
                    customClass: {
                        popup: 'swal2-dark-custom'
                    }
                }).then(() => {
                    closeContactModal();
                    document.getElementById('contactForm').reset();
                    if (data.account) {
                        window.location.href = 'login.php';
                    }
                });
            } else {
                let msg = `🎉 สมัครบริการเรียบร้อยแล้ว!\n\nร้าน "${shop}" ในแพ็กเกจ "${plan}"\n\n`;
                if (data.is_trial) {
                    msg += `✨ ได้รับสิทธิพิเศษทดลองใช้งานฟรี ${data.trial_days || 14} วันแรก (${data.trial_days || 14}-Day Free Trial)\n\n`;
                } else {
                    msg += `✅ ระบบได้รับไฟล์สลิปโอนเงินจริงเรียบร้อยแล้ว!\n\n`;
                }
                if (data.account) {
                    msg += `🔑 ข้อมูลบัญชีผู้ใช้ระบบชั่วคราว:\n- ชื่อผู้ใช้ (Username): ${data.account.username}\n- รหัสผ่าน (Password): ${data.account.temp_password}\n\nคุณสามารถนำชื่อผู้ใช้และรหัสผ่านไปเข้าสู่ระบบ Store Admin เพื่อใช้งานได้ทันที!`;
                }
                alert(msg);
                closeContactModal();
                document.getElementById('contactForm').reset();
                if (data.account) {
                    window.location.href = 'login.php';
                }
            }
        } else {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'เกิดข้อผิดพลาด',
                    text: data.message || 'เกิดข้อผิดพลาดในการส่งข้อมูล',
                    icon: 'error',
                    background: '#0f172a',
                    color: '#ffffff',
                    confirmButtonColor: '#ef4444'
                });
            } else {
                alert(data.message || 'เกิดข้อผิดพลาดในการส่งข้อมูล');
            }
        }
    })
    .catch(err => {
        console.error(err);
        alert('เกิดข้อผิดพลาดในการส่งข้อมูลไปยังเซิร์ฟเวอร์');
    });
}

// Toggle Bottom Sheet Menu
function toggleBottomSheet() {
    const sheet = document.getElementById('lpBottomSheet');
    if (sheet) {
        sheet.classList.toggle('open');
    }
}

// Subscription Details Map
const planDetails = {
    <?php foreach ($plans as $p): 
        $key = $p['name'];
        $badge = strtoupper($p['name']);
        $color = '#97A9C0';
        if ($key === 'Standard') $color = '#FF5A00';
        if ($key === 'Premium') $color = '#CC9933';
        
        $p_trial_days = ($key === 'Premium' || $p['id'] == 3) ? 7 : 14;

        $included = [];
        $locked = [];
        
        if ($key === 'Starter') {
            $included = [
                'รองรับการตั้งค่าโต๊ะอาหารสูงสุด ' . $p['limit_tables'] . ' โต๊ะ',
                'ระบบสแกนสั่งอาหารผ่าน QR Code ฝั่งลูกค้าหลัก',
                'ระบบลงทะเบียนและจัดการข้อมูลเมนูอาหาร CRUD',
                'ฟังก์ชันแสดงภาพเมนู ราคา และสถานะพร้อมเสิร์ฟ'
            ];
            $locked = [
                'บอร์ดปรุงคิวหลักเรียลไทม์ฝั่งครัว (Kitchen Ops Monitor)',
                'ระบบเช็คสถานะการปรุงอาหารคิวลูกค้า (Live Status Board)',
                'สลับสถานะอาหารหมดคลังด่วนผ่านระบบหลังบ้าน',
                'แดชบอร์ดรายงานสถิติและสรุปยอดขายรายวัน'
            ];
        } else if ($key === 'Standard') {
            $included = [
                'รองรับการตั้งค่าโต๊ะอาหารสูงสุด ' . $p['limit_tables'] . ' โต๊ะ',
                'บอร์ดควบคุมคิวครัวหลักฝั่งพ่อครัวเรียลไทม์',
                'ระบบติดตามสถานะคิวรับอาหารของลูกค้า',
                'สลับสถานะอาหารหมดชั่วคราวจากหลังบ้านด่วน',
                'ฟังก์ชันสิทธิ์ใช้งานครบชุดสำหรับร้านอาหารขนาดกลาง'
            ];
            $locked = [
                'แดชบอร์ดระบบรายงานสถิติและวิเคราะห์ยอดขายเชิงลึก',
                'ระบบจองโต๊ะและการบริการแบบหลายห้องอาหารย่อย',
                'ช่องทางพิเศษในการขอรับความช่วยเหลือด่วน 24 ชม.'
            ];
        } else {
            $included = [
                'รองรับการตั้งค่าโต๊ะอาหารสูงสุด ' . $p['limit_tables'] . ' โต๊ะ',
                'สิทธิ์การเข้าถึงระบบควบคุมระดับ Smart OS ทั้งหมด',
                'บอร์ดรายงานคิวลูกค้าและพ่อครัวครบชุด',
                'ระบบวิเคราะห์สรุปยอดขายรายวันและรายเดือน',
                'บริการด่วนพิเศษจากทีมงานสนับสนุนทางเทคนิค 24 ชม.'
            ];
            $locked = [];
        }
    ?>
    '<?php echo addslashes($key); ?>': {
        name: '<?php echo addslashes($p['name']); ?> Plan',
        price: '฿<?php echo number_format($p['price']); ?> / เดือน',
        badge: '<?php echo addslashes($badge); ?>',
        color: '<?php echo $color; ?>',
        trialDays: <?php echo $p_trial_days; ?>,
        included: <?php echo json_encode($included, JSON_UNESCAPED_UNICODE); ?>,
        locked: <?php echo json_encode($locked, JSON_UNESCAPED_UNICODE); ?>
    },
    <?php endforeach; ?>
};

function openSubDetailModal(planKey) {
    const detail = planDetails[planKey];
    if (!detail) return;

    const badgeEl = document.getElementById('subModalBadge');
    badgeEl.textContent = detail.badge;
    badgeEl.style.background = detail.color + '1c';
    badgeEl.style.color = detail.color;
    badgeEl.style.borderColor = detail.color + '4c';
    
    document.getElementById('subModalTitle').textContent = detail.name;
    document.getElementById('subModalPrice').textContent = detail.price;

    const subModalTrialTag = document.getElementById('subModalTrialTag');
    if (subModalTrialTag) {
        subModalTrialTag.textContent = `🎉 สิทธิพิเศษ: ทดลองใช้งานฟรี ${detail.trialDays} วันแรก ($0 ไม่ต้องชำระเงินทันที)`;
        if (detail.trialDays === 7) {
            subModalTrialTag.style.background = 'rgba(239, 68, 68, 0.15)';
            subModalTrialTag.style.borderColor = '#EF4444';
            subModalTrialTag.style.color = '#EF4444';
        } else {
            subModalTrialTag.style.background = 'rgba(16, 185, 129, 0.15)';
            subModalTrialTag.style.borderColor = '#10B981';
            subModalTrialTag.style.color = '#10B981';
        }
    }

    // Included features
    const incList = document.getElementById('subModalIncluded');
    incList.innerHTML = '';
    detail.included.forEach(feat => {
        const li = document.createElement('li');
        li.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="color: var(--success-color); margin-right: 8px; flex-shrink: 0; margin-top: 2px;"><polyline points="20 6 9 17 4 12"/></svg> <span style="color: var(--lp-text-primary); font-size:13.5px;">${feat}</span>`;
        li.style.display = 'flex';
        li.style.alignItems = 'flex-start';
        li.style.marginBottom = '8px';
        incList.appendChild(li);
    });

    // Excluded features
    const lockedList = document.getElementById('subModalLocked');
    const lockedSection = document.getElementById('subModalExcludedSection');
    lockedList.innerHTML = '';
    if (detail.locked.length > 0) {
        lockedSection.style.display = 'block';
        detail.locked.forEach(feat => {
            const li = document.createElement('li');
            li.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="color: #FF5A00; margin-right: 8px; flex-shrink: 0; margin-top: 2px;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> <span style="text-decoration: line-through; opacity: 0.65; color: var(--lp-text-secondary); font-size:13.5px;">${feat}</span>`;
            li.style.display = 'flex';
            li.style.alignItems = 'flex-start';
            li.style.marginBottom = '8px';
            lockedList.appendChild(li);
        });
    } else {
        lockedSection.style.display = 'none';
    }

    // Bind checkout action
    document.getElementById('btnConfirmSelectSub').onclick = function() {
        closeSubDetailModal();
        openContactModal(detail.name);
    };

    document.getElementById('subscriptionDetailModal').classList.add('open');
}

function closeSubDetailModal() {
    document.getElementById('subscriptionDetailModal').classList.remove('open');
}

// Handle browser go back safely
function handleGoBack() {
    if (window.history.length > 1 && document.referrer && document.referrer !== window.location.href) {
        window.history.back();
    } else {
        window.location.href = '<?php echo htmlspecialchars($user_role_home); ?>';
    }
}
</script>

<!-- Quick Menu Bottom Sheet -->
<div class="lp-bottom-sheet" id="lpBottomSheet">
    <div class="lp-bottom-sheet-backdrop" onclick="toggleBottomSheet()"></div>
    <div class="lp-bottom-sheet-content">
        <div class="lp-bottom-sheet-header">
            <span class="lp-bottom-sheet-title">📂 ทางลัดด่วน CMTC Tech Solution</span>
            <button class="lp-bottom-sheet-close" onclick="toggleBottomSheet()">&times;</button>
        </div>
        <div class="lp-bottom-sheet-grid">
            <a href="<?php echo htmlspecialchars($user_role_home); ?>" class="lp-bottom-sheet-item">
                <span class="lp-bottom-sheet-icon">🏠</span>
                <span class="lp-bottom-sheet-label">หน้าแรก</span>
            </a>
            <a href="menu.php" class="lp-bottom-sheet-item">
                <span class="lp-bottom-sheet-icon">🛒</span>
                <span class="lp-bottom-sheet-label">สั่งอาหาร</span>
            </a>
            <a href="status.php" class="lp-bottom-sheet-item">
                <span class="lp-bottom-sheet-icon">📊</span>
                <span class="lp-bottom-sheet-label">สถานะคิว</span>
            </a>
            <a href="store-admin.php" class="lp-bottom-sheet-item">
                <span class="lp-bottom-sheet-icon">🍳</span>
                <span class="lp-bottom-sheet-label">แอดมินร้านค้า</span>
            </a>
            <a href="platform-admin.php" class="lp-bottom-sheet-item">
                <span class="lp-bottom-sheet-icon">👑</span>
                <span class="lp-bottom-sheet-label">คุมระบบกลาง</span>
            </a>
        </div>
    </div>
</div>

</body>
</html>