<?php
$page_title = 'Experience Cloud';
require_once __DIR__ . '/../config.php';
if (session_status() === PHP_SESSION_NONE) { session_start(); }
if (!isset($_SESSION['admin_id'])) { redirect(SITE_URL . '/admin/login.php'); }
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-cloud" style="color:#6366f1; margin-right:10px;"></i>Experience Cloud</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Personalized portals, multi-brand support, white-label solutions.</p>
    </div>
</div>

<div class="grid-4" style="margin-bottom:24px; gap:20px;">
    <?php
    $portals = [
        ['Personalized Portals', 'fas fa-user-circle', '#6366f1', '3,240 users', 'AI-driven content'],
        ['Regional Content', 'fas fa-globe-asia', '#10b981', '8 Languages', 'Localized UX'],
        ['Multi-Brand Support', 'fas fa-th-large', '#f59e0b', '4 Brands', 'Unified Backend'],
        ['Dealer Portal (WL)', 'fas fa-store', '#3b82f6', '856 dealers', 'White-Label'],
        ['Customer App (WL)', 'fas fa-mobile-alt', '#ec4899', '12K users', 'iOS + Android'],
        ['Brand Microsites', 'fas fa-globe', '#8b5cf6', '12 Sites', 'SEO Optimized'],
    ];
    foreach ($portals as $p): ?>
    <div style="background:#fff; border-radius:12px; border:1px solid #e2e8f0; padding:25px; 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:55px; height:55px; border-radius:14px; background:<?= $p[2] ?>15; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;">
            <i class="<?= $p[1] ?>" style="font-size:1.4rem; color:<?= $p[2] ?>;"></i>
        </div>
        <h3 style="margin:0 0 5px; color:#0f172a; font-size:0.95rem;"><?= $p[0] ?></h3>
        <p style="font-size:0.75rem; color:#94a3b8; margin:0 0 10px;"><?= $p[4] ?></p>
        <span style="background:<?= $p[2] ?>15; color:<?= $p[2] ?>; padding:4px 12px; border-radius:8px; font-size:0.75rem; font-weight:bold;"><?= $p[3] ?></span>
    </div>
    <?php endforeach; ?>
</div>

<div class="grid-2">
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0;">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-chart-bar" style="color:#6366f1; margin-right:8px;"></i>Portal Analytics</h3>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:15px;">
            <div style="background:#f8fafc; padding:15px; border-radius:8px; text-align:center;">
                <div style="font-size:1.8rem; font-weight:700; color:#6366f1;">16K</div>
                <div style="font-size:0.75rem; color:#94a3b8;">Monthly Active Users</div>
            </div>
            <div style="background:#f8fafc; padding:15px; border-radius:8px; text-align:center;">
                <div style="font-size:1.8rem; font-weight:700; color:#10b981;">4.6</div>
                <div style="font-size:0.75rem; color:#94a3b8;">Avg Session (min)</div>
            </div>
            <div style="background:#f8fafc; padding:15px; border-radius:8px; text-align:center;">
                <div style="font-size:1.8rem; font-weight:700; color:#f59e0b;">92%</div>
                <div style="font-size:0.75rem; color:#94a3b8;">Satisfaction Score</div>
            </div>
            <div style="background:#f8fafc; padding:15px; border-radius:8px; text-align:center;">
                <div style="font-size:1.8rem; font-weight:700; color:#ec4899;">68%</div>
                <div style="font-size:0.75rem; color:#94a3b8;">Mobile Traffic</div>
            </div>
        </div>
    </div>

    <div style="background:linear-gradient(135deg,#6366f1,#4f46e5); color:#fff; padding:30px; border-radius:12px; display:flex; flex-direction:column; justify-content:center;">
        <i class="fas fa-palette" style="font-size:2.5rem; margin-bottom:15px; opacity:0.8;"></i>
        <h3 style="margin:0 0 10px; font-size:1.3rem;">Brand Customization Studio</h3>
        <p style="margin:0 0 20px; font-size:0.9rem; opacity:0.85;">White-label your portals with custom themes, logos, and content.</p>
        <button style="background:#fff; color:#6366f1; border:none; padding:12px 24px; border-radius:8px; font-size:0.95rem; cursor:pointer; font-weight:700; align-self:flex-start;">Open Studio</button>
    </div>
</div>

<?php require_once __DIR__ . '/footer.php'; ?>
