<?php
/**
 * AbuByte POS - Private Buyers Portal
 * Version: 2025-12-23-FOMO-Restored
 */

// 1. Server-Side Logic
error_reporting(E_ALL);
ini_set('display_errors', 1);

function formatSize($bytes) {
    if ($bytes >= 1048576) return round($bytes / 1048576, 1) . ' MB';
    if ($bytes >= 1024) return round($bytes / 1024, 1) . ' KB';
    return $bytes . ' bytes';
}

function listPortalFiles($dir, $basePath) {
    $excluded = ['buyers-portal.php', 'offer.html', 'index.html', 'founder.html', '.DS_Store', 'Thumbs.db'];
    
    if (!is_dir($dir)) return;
    $items = @scandir($dir);
    if (!$items) return;

    echo '<ul style="list-style:none; padding-left:1.5rem;">';
    foreach ($items as $item) {
        if ($item == '.' || $item == '..') continue;
        if (in_array($item, $excluded)) continue;
        
        $path = $dir . DIRECTORY_SEPARATOR . $item;
        $rel = $basePath . '/' . $item;
        
        if (is_dir($path)) {
            echo '<li style="margin-top:1.5rem; border-left:4px solid #f59e0b; padding-left:1rem;">';
            echo '<h4 style="color:#f59e0b;"><i class="fas fa-folder"></i> ' . htmlspecialchars($item) . '</h4>';
            listPortalFiles($path, $rel);
            echo '</li>';
        } else {
            $ext = strtolower(pathinfo($item, PATHINFO_EXTENSION));
            $icon = 'fa-file';
            $icons = ['pdf'=>'fa-file-pdf', 'zip'=>'fa-file-archive', 'mp4'=>'fa-file-video', 'png'=>'fa-file-image', 'jpg'=>'fa-file-image'];
            if(isset($icons[$ext])) $icon = $icons[$ext];
            
            echo '<li style="padding:0.5rem 0; display:flex; align-items:center; gap:0.8rem;">';
            echo '<i class="fas ' . $icon . '" style="color:#3b82f6;"></i>';
            echo '<a href="' . htmlspecialchars($rel) . '" target="_blank" style="color:#93c5fd; text-decoration:none;">' . htmlspecialchars($item) . '</a>';
            $sz = @filesize($path);
            if($sz) echo '<span style="color:#64748b; font-size:0.8rem;">(' . formatSize($sz) . ')</span>';
            echo '</li>';
        }
    }
    echo '</ul>';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AbuByte POS | Buyers Portal</title>
    <link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
    <link rel="icon" type="image/svg+xml" href="favicon/favicon.svg">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
    <link rel="manifest" href="favicon/site.webmanifest">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #f8fafc; margin: 0; padding: 0; line-height: 1.6; }
        .container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
        
        /* Login Overlay */
        #loginOverlay { position: fixed; inset: 0; background: #0f172a; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
        .login-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 3rem; border-radius: 1.5rem; text-align: center; width: 100%; max-width: 400px; }
        
        /* Content */
        #portalContent { display: none; padding-top: 2rem; }
        .header { text-align: center; margin-bottom: 4rem; }
        .section { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 1.5rem; padding: 2.5rem; margin-bottom: 3rem; }
        
        .section-title-fomo { font-size: 2.2rem; font-weight: 800; background: linear-gradient(90deg, #f8fafc, #cbd5e1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
        .section-subtitle-fomo { font-size: 1.1rem; color: #94a3b8; margin-bottom: 2rem; }

        /* UI Elements */
        .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 2rem; border-radius: 0.5rem; text-decoration: none; font-weight: 700; border: none; cursor: pointer; transition: 0.2s; }
        .btn-primary { background: #ef4444; color: white; }
        .btn-primary:hover { background: #dc2626; transform: translateY(-2px); }
        
        input { width: 100%; padding: 0.8rem; background: #000; border: 1px solid #334155; border-radius: 0.5rem; color: white; margin: 1rem 0; box-sizing: border-box; }
        
        .screenshot-scroll { display: flex; gap: 1rem; overflow-x: auto; padding: 1rem 0; scrollbar-width: thin; scrollbar-color: #3b82f6 transparent; }
        .screenshot-scroll img { height: 220px; border-radius: 0.8rem; border: 2px solid rgba(255,255,255,0.1); cursor: pointer; transition: transform 0.3s ease; flex-shrink: 0; }
        .screenshot-scroll img:hover { transform: scale(1.02); border-color: #3b82f6; }

        .highlight-category { background: rgba(239, 68, 68, 0.05); border: 2px solid rgba(239, 68, 68, 0.3); border-radius: 1rem; padding: 1.5rem; margin-bottom: 2rem; animation: pulseBorder 3s infinite; }
        .urgent-badge { display: inline-block; background: linear-gradient(90deg, #ef4444, #dc2626); color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.85rem; margin-top: 0.5rem; animation: pulseRed 1.5s infinite; }

        /* Video Section UI */
        .demo-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; margin-top: 1.5rem; }
        @media (max-width: 850px) { .demo-grid { grid-template-columns: 1fr; } }
        .v-points { list-style: none; padding: 0; }
        .v-points li { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; background: rgba(255,255,255,0.03); padding: 0.8rem; border-radius: 0.8rem; border: 1px solid rgba(255,255,255,0.05); }
        .v-points li i { color: #10b981; }

        /* Lightbox */
        .lightbox { display: none; position: fixed; z-index: 10000; inset: 0; background: rgba(0,0,0,0.95); align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
        .lightbox img { max-width: 90%; max-height: 90vh; border-radius: 0.5rem; box-shadow: 0 0 50px rgba(59, 130, 246, 0.5); }
        
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
        @keyframes pulseBorder { 0%, 100% { border-color: rgba(239, 68, 68, 0.3); } 50% { border-color: rgba(239, 68, 68, 0.6); } }
        @keyframes pulseRed { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
    </style>
</head>
<body>

    <div id="loginOverlay">
        <div class="login-card">
            <i class="fas fa-lock" style="font-size: 3rem; color: #f59e0b; margin-bottom: 1.5rem;"></i>
            <h2 style="margin:0;">Private Access Only</h2>
            <p style="color:#94a3b8; font-size: 0.9rem;">Confirm password to unlock due diligence materials</p>
            <input type="password" id="pw" placeholder="Enter portal password">
            <button class="btn btn-primary" style="width:100%; justify-content:center;" onclick="unlock()">Unlock Portal</button>
            <p style="font-size: 0.8rem; color: #475569; margin-top: 1rem;">Hint: AbuByte2025Sale</p>
        </div>
    </div>

    <div id="portalContent" class="container">
        <div class="header">
            <h1 style="font-size: 2.8rem; font-weight: 800; margin-bottom: 0.5rem;">Buyers Portal | AbuByte POS</h1>
            <p style="color:#94a3b8; font-size: 1.2rem;">Complete Technical Assets & Due Diligence Documentation</p>
        </div>

        <!-- 1. RESTORED SCREENSHOTS SECTION -->
        <section class="section" style="background: none; border: none; padding: 0;">
            <h2 class="section-title-fomo">⚡ See the #1 Feature That Justifies This Purchase</h2>
            <p class="section-subtitle-fomo">
                <strong>Never lose a sale during internet outages.</strong> Watch the sync system that protects every transaction -
                <span style="color: #fbbf24; font-weight: 700;">this alone solves the biggest POS problem in emerging markets.</span>
            </p>

            <div class="highlight-category">
                <h3 style="margin-top: 0; color: #fca5a5;"><i class="fas fa-shield-alt"></i> ⚡ NEVER LOSE A SALE - Offline Sync Protection</h3>
                <p style="color: #cbd5e1; margin-bottom: 1.5rem;">Watch what happens during internet outages. This system queues ALL operations and syncs automatically when back online.</p>
                <div class="screenshot-scroll">
                    <img src="Sale_Package/04_Sales_Materials/02_Screenshots/00_sync_status_never_lose_a_sale/01_sync_perfect_green.PNG" alt="Sync Green" onclick="openLightbox(this)">
                    <img src="Sale_Package/04_Sales_Materials/02_Screenshots/00_sync_status_never_lose_a_sale/02A__sync_massive_queue.PNG" alt="Sync Queue" onclick="openLightbox(this)">
                    <img src="Sale_Package/04_Sales_Materials/02_Screenshots/00_sync_status_never_lose_a_sale/03_sync_live_action.PNG" alt="Sync Action" onclick="openLightbox(this)">
                    <img src="Sale_Package/04_Sales_Materials/02_Screenshots/00_sync_status_never_lose_a_sale/05_automatic_syncing_when_online.PNG" alt="Auto Sync" onclick="openLightbox(this)">
                </div>
                <div class="urgent-badge">
                    <i class="fas fa-exclamation-triangle"></i> THIS FEATURE ALONE JUSTIFIES THE PURCHASE
                </div>
            </div>

            <div style="margin-top: 3rem;">
                <h3 style="color:#cbd5e1; margin-bottom: 1rem;"><i class="fas fa-bolt"></i> Lightning-Fast Checkout & Reports</h3>
                <div class="screenshot-scroll">
                    <img src="Sale_Package/04_Sales_Materials/02_Screenshots/01_sales_flow_lightning_fast_checkout/04_Barcode_Scanning_Offline_Mode_Professional_Workflow.PNG" alt="Checkout 1" onclick="openLightbox(this)">
                    <img src="Sale_Package/04_Sales_Materials/02_Screenshots/01_sales_flow_lightning_fast_checkout/09_Invoice_ONE10_FOODS_Branded_Offline.PNG" alt="Checkout 2" onclick="openLightbox(this)">
                    <img src="Sale_Package/04_Sales_Materials/02_Screenshots/02_reports_see_every_penny/01_Reports_Dashboard_Peak_Performance.PNG" alt="Report 1" onclick="openLightbox(this)">
                    <img src="Sale_Package/04_Sales_Materials/02_Screenshots/02_reports_see_every_penny/02_Reports_Business_Intelligence_Offline.PNG" alt="Report 2" onclick="openLightbox(this)">
                </div>
            </div>
        </section>

        <!-- 2. UPDATED VIDEO SECTION -->
        <div class="section" style="margin-top: 4rem;">
            <h2 class="section-title-fomo" style="font-size: 1.8rem;"><i class="fas fa-video"></i> System Walkthrough & Demonstration</h2>
            <div class="demo-grid">
                <div style="background:#000; border-radius:1rem; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; border:1px solid #334155; overflow: hidden;">
                    <video id="v" controls style="width:100%; height:100%;">
                        <source src="demo_video/AbuByte_POS_Demo.mp4" type="video/mp4">
                    </video>
                </div>
                <div>
                    <h4 style="margin-top: 0; color: #93c5fd;">What You'll See:</h4>
                    <ul class="v-points">
                        <li><i class="fas fa-check-circle"></i> <span><strong>Full Sales Cycle:</strong> Experience lightning-fast checkout even with zero internet.</span></li>
                        <li><i class="fas fa-check-circle"></i> <span><strong>Automated Sync:</strong> Watch the system queue data and sync automatically when online.</span></li>
                        <li><i class="fas fa-check-circle"></i> <span><strong>Real-time BI:</strong> Detailed reports and business intelligence dashboard.</span></li>
                        <li><i class="fas fa-check-circle"></i> <span><strong>Mode Switching:</strong> Seamless transition between Restaurant and Retail modes.</span></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 3. RENAMED ZIP SECTION -->
        <div class="section">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; flex-wrap:wrap; gap:1rem;">
                <h3 style="margin:0; font-size: 1.5rem;"><i class="fas fa-file-shield"></i> The Complete Pre-Prepared Due Diligence Package</h3>
                <a href="Sale_Package.zip" class="btn btn-primary" download>
                    <i class="fas fa-download"></i> Download Full ZIP
                </a>
            </div>
            
            <div style="background:rgba(0,0,0,0.2); padding:1.5rem; border-radius:1rem; border: 1px solid rgba(255,255,255,0.05);">
                <?php listPortalFiles('Sale_Package', 'Sale_Package'); ?>
            </div>
        </div>

        <div style="text-align:center; padding:4rem 0;">
            <a href="offer.html" class="btn btn-primary" style="background:#10b981; padding: 1.2rem 4rem; font-size: 1.3rem;">
                SUBMIT YOUR ACQUISITION OFFER <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>

    <!-- Lightbox -->
    <div id="lb" class="lightbox" onclick="this.style.display='none'">
        <img id="lb_img" src="">
    </div>

    <script>
        function unlock() {
            const input = document.getElementById('pw');
            if (input.value === 'AbuByte2025Sale') {
                document.getElementById('loginOverlay').style.display = 'none';
                document.getElementById('portalContent').style.display = 'block';
            } else {
                input.style.borderColor = '#ef4444';
                input.style.animation = 'shake 0.3s';
                setTimeout(() => { input.style.animation = ''; input.value = ''; }, 300);
            }
        }
        document.getElementById('pw').onkeypress = (e) => { if(e.key==='Enter') unlock(); };

        function openLightbox(img) {
            document.getElementById('lb_img').src = img.src;
            document.getElementById('lb').style.display = 'flex';
        }
    </script>
</body>
</html>
