<?php
$page_title = 'Future Layer';
require_once __DIR__ . '/header.php';
?>
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit',sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-rocket" style="color:#8b5cf6; margin-right:10px;"></i>Future Layer</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">AR preview, 3D product placement, AI chatbot, voice ordering, IoT warranty.</p>
    </div>
</div>
<div class="grid-3" style="margin-bottom:24px;">
    <?php
    $features = [
        ['AR Kitchen Preview', 'fas fa-vr-cardboard', '#8b5cf6', 'Point your camera at your kitchen countertop and visualize our sinks in real-time with AR.', 'Coming Soon'],
        ['3D Product Placement', 'fas fa-cube', '#3b82f6', 'Place any product in your space using 3D models. Measure fit and aesthetics instantly.', 'Coming Soon'],
        ['AI Chatbot Guide', 'fas fa-robot', '#10b981', 'AI-powered shopping assistant that understands your needs and recommends perfectly.', 'Beta'],
        ['Voice Ordering', 'fas fa-microphone', '#f59e0b', '"Hey Balimeen, reorder my last sink order" — voice-powered commerce.', 'Coming Soon'],
        ['IoT Warranty Tracking', 'fas fa-wifi', '#06b6d4', 'Smart products report their own health. Auto-warranty claims when issues detected.', 'Coming Soon'],
        ['Predictive Service Alerts', 'fas fa-bell', '#ec4899', 'AI predicts when your products need service before you even notice.', 'Coming Soon'],
    ];
    foreach ($features as $f): ?>
    <div class="card" style="margin-bottom:0; text-align:center; cursor:pointer; transition:all 0.3s;" onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 8px 25px rgba(0,0,0,0.1)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
        <div style="width:65px; height:65px; border-radius:16px; background:<?= $f[2] ?>15; display:flex; align-items:center; justify-content:center; margin:0 auto 15px;">
            <i class="<?= $f[1] ?>" style="font-size:1.6rem; color:<?= $f[2] ?>;"></i>
        </div>
        <h4 style="margin:0 0 8px; font-size:1rem; color:#0f172a;"><?= $f[0] ?></h4>
        <p style="font-size:0.8rem; color:#94a3b8; margin:0 0 12px; line-height:1.5;"><?= $f[3] ?></p>
        <span style="background:<?= $f[4]==='Beta' ? '#dcfce7' : '#fef3c7' ?>; color:<?= $f[4]==='Beta' ? '#166534' : '#b45309' ?>; padding:4px 12px; border-radius:8px; font-size:0.75rem; font-weight:bold;"><?= $f[4] ?></span>
    </div>
    <?php endforeach; ?>
</div>
<div class="card" style="background:linear-gradient(135deg,#8b5cf6,#6d28d9); color:#fff; text-align:center; padding:40px;">
    <i class="fas fa-flask" style="font-size:3rem; margin-bottom:15px; opacity:0.7;"></i>
    <h3 style="margin:0 0 10px; font-size:1.5rem;">Innovation Lab Preview</h3>
    <p style="margin:0 0 20px; font-size:0.95rem; opacity:0.85; max-width:600px; margin-left:auto; margin-right:auto;">These features are under active R&D. Join our beta program to get early access and help shape the future of smart kitchen commerce.</p>
    <button style="background:#fff; color:#6d28d9; border:none; padding:12px 30px; border-radius:8px; font-size:1rem; cursor:pointer; font-weight:700;">Join Beta Program</button>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
