<?php
$page_title = 'Customer Success';
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-headset" style="color:#2563eb; margin-right:10px;"></i>Customer Success</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Dedicated account manager, VIP tier, priority support, and SLA dashboard.</p>
    </div>
</div>
<div class="grid-4" style="margin-bottom:24px;">
    <div class="card" style="margin-bottom:0; border-top:4px solid #f59e0b;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">YOUR TIER</div>
        <div style="font-size:1.4rem; font-weight:700; color:#f59e0b;">⭐ Gold</div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;"><i class="fas fa-crown"></i> VIP Customer</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">RESPONSE TIME</div>
        <div style="font-size:1.4rem; font-weight:700; color:#10b981;">&lt;2 hrs</div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-bolt"></i> Priority SLA</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #3b82f6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">TICKETS RESOLVED</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">12/12</div>
        <div style="color:#3b82f6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-check-circle"></i> 100% Resolution</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #8b5cf6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">SATISFACTION</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">4.9/5</div>
        <div style="color:#8b5cf6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-smile"></i> CSAT Score</div>
    </div>
</div>
<div class="grid-2">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-user-tie" style="color:#2563eb; margin-right:8px;"></i>Dedicated Account Manager</h3>
        <div style="display:flex; align-items:center; gap:15px; background:#eff6ff; padding:20px; border-radius:8px; border:1px solid #bfdbfe; margin-bottom:20px;">
            <div style="width:60px; height:60px; border-radius:50%; background:#2563eb; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem; font-weight:bold;">AK</div>
            <div>
                <div style="font-weight:700; font-size:1rem; color:#0f172a;">Aman Kapoor</div>
                <div style="font-size:0.85rem; color:#64748b;">Senior Account Manager</div>
                <div style="font-size:0.8rem; color:#2563eb; margin-top:3px;"><i class="fas fa-phone"></i> +91 98765 43210</div>
            </div>
        </div>
        <h4 style="margin:0 0 10px; font-size:1rem; color:#0f172a;">Escalation Matrix</h4>
        <?php
        $escalation = [
            ['Level 1 — Account Manager', 'Aman Kapoor', '< 2 hrs', '#10b981'],
            ['Level 2 — Regional Head', 'Suresh Mehta', '< 4 hrs', '#3b82f6'],
            ['Level 3 — VP Sales', 'Deepak Sharma', '< 8 hrs', '#f59e0b'],
        ];
        foreach ($escalation as $e): ?>
        <div style="border-left:3px solid <?= $e[3] ?>; padding-left:12px; margin-bottom:12px;">
            <div style="font-weight:600; font-size:0.85rem;"><?= $e[0] ?></div>
            <div style="font-size:0.75rem; color:#64748b;"><?= $e[1] ?> · Response: <?= $e[2] ?></div>
        </div>
        <?php endforeach; ?>
    </div>
    <div class="card" style="background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff;">
        <h3 style="margin:0 0 15px; font-size:1.15rem;"><i class="fas fa-tachometer-alt"></i> SLA Dashboard</h3>
        <div style="display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:20px;">
            <div style="background:rgba(255,255,255,0.1); padding:15px; border-radius:8px; text-align:center;">
                <div style="font-size:1.5rem; font-weight:700;">1.4 hrs</div>
                <div style="font-size:0.75rem; opacity:0.8;">Avg Response</div>
            </div>
            <div style="background:rgba(255,255,255,0.1); padding:15px; border-radius:8px; text-align:center;">
                <div style="font-size:1.5rem; font-weight:700;">100%</div>
                <div style="font-size:0.75rem; opacity:0.8;">Resolution Rate</div>
            </div>
            <div style="background:rgba(255,255,255,0.1); padding:15px; border-radius:8px; text-align:center;">
                <div style="font-size:1.5rem; font-weight:700;">4.9</div>
                <div style="font-size:0.75rem; opacity:0.8;">CSAT Score</div>
            </div>
            <div style="background:rgba(255,255,255,0.1); padding:15px; border-radius:8px; text-align:center;">
                <div style="font-size:1.5rem; font-weight:700;">0</div>
                <div style="font-size:0.75rem; opacity:0.8;">Open Escalations</div>
            </div>
        </div>
        <button style="background:#fff; color:#1d4ed8; border:none; padding:10px 20px; border-radius:8px; font-size:0.9rem; cursor:pointer; width:100%; font-weight:700;">Contact Account Manager</button>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
