<?php
$page_title = 'Customer 360 Profile';
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;">Customer 360 Profile</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Comprehensive 360° view of your business metrics and health score.</p>
    </div>
</div>

<div class="grid-4" style="margin-bottom:24px;">
    <!-- Profile Card -->
    <div class="card" style="grid-column: span 1; text-align:center;">
        <div style="width:80px; height:80px; background:#e2e8f0; border-radius:50%; margin:0 auto 15px; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#64748b;">
            <i class="fas fa-building"></i>
        </div>
        <h3 style="margin:0 0 5px; color:#0f172a; font-size:1.2rem;">Sharma Steels</h3>
        <p style="color:#2563eb; font-size:0.85rem; font-weight:600; margin:0 0 15px;">Retail Distributor</p>
        <div style="text-align:left; font-size:0.85rem; color:#64748b; line-height:1.6; border-top:1px solid #e2e8f0; padding-top:15px;">
            <div><strong>Segment:</strong> Tier 1 Premium</div>
            <div><strong>Location:</strong> Mumbai, Maharashtra</div>
            <div><strong>Joined:</strong> Aug 2021</div>
        </div>
    </div>

    <!-- Analytics & Health -->
    <div class="card" style="grid-column: span 3;">
        <h3 style="margin:0 0 20px; font-size:1.1rem; color:#0f172a;">Business Health & Value Analytics</h3>
        
        <div class="grid-3" style="gap:15px; margin-bottom:25px;">
            <div style="background:#f8fafc; padding:15px; border-radius:8px; border:1px solid #e2e8f0;">
                <div style="color:#64748b; font-size:0.8rem; font-weight:600; text-transform:uppercase; margin-bottom:5px;">Lifetime Value (LTV)</div>
                <div style="color:#0f172a; font-size:1.5rem; font-weight:700;">₹45.2 L</div>
                <div style="color:#10b981; font-size:0.75rem; margin-top:5px;"><i class="fas fa-chart-line"></i> Top 5% Customer</div>
            </div>
            <div style="background:#f8fafc; padding:15px; border-radius:8px; border:1px solid #e2e8f0;">
                <div style="color:#64748b; font-size:0.8rem; font-weight:600; text-transform:uppercase; margin-bottom:5px;">Avg. Ticket Size</div>
                <div style="color:#0f172a; font-size:1.5rem; font-weight:700;">₹1.8 L</div>
                <div style="color:#64748b; font-size:0.75rem; margin-top:5px;">Per transaction</div>
            </div>
            <div style="background:#f8fafc; padding:15px; border-radius:8px; border:1px solid #e2e8f0;">
                <div style="color:#64748b; font-size:0.8rem; font-weight:600; text-transform:uppercase; margin-bottom:5px;">Buying Frequency</div>
                <div style="color:#0f172a; font-size:1.5rem; font-weight:700;">3.2x</div>
                <div style="color:#64748b; font-size:0.75rem; margin-top:5px;">Orders per month</div>
            </div>
        </div>

        <div class="grid-2">
            <div>
                <h4 style="margin:0 0 10px; font-size:0.95rem; color:#0f172a;">Risk & Credit Profile</h4>
                <div style="display:flex; align-items:center; gap:15px;">
                    <div style="width:60px; height:60px; border-radius:50%; border:4px solid #10b981; display:flex; align-items:center; justify-content:center; font-weight:bold; color:#10b981; font-size:1.2rem;">
                        780
                    </div>
                    <div>
                        <div style="color:#0f172a; font-weight:600;">Excellent Credit Score</div>
                        <div style="color:#64748b; font-size:0.8rem;">Risk Classification: <span style="color:#10b981; font-weight:600;">LOW</span></div>
                        <div style="color:#2563eb; font-size:0.8rem; margin-top:3px; cursor:pointer;">Request Credit Limit Increase</div>
                    </div>
                </div>
            </div>
            
            <div>
                <h4 style="margin:0 0 10px; font-size:0.95rem; color:#0f172a;">Preferred Products</h4>
                <div style="display:flex; flex-wrap:wrap; gap:8px;">
                    <span style="background:#e2e8f0; color:#334155; padding:4px 10px; border-radius:12px; font-size:0.75rem;">SS 304 Sheets</span>
                    <span style="background:#e2e8f0; color:#334155; padding:4px 10px; border-radius:12px; font-size:0.75rem;">Double Bowl Sinks</span>
                    <span style="background:#e2e8f0; color:#334155; padding:4px 10px; border-radius:12px; font-size:0.75rem;">SS 202 Pipes</span>
                    <span style="background:#e2e8f0; color:#334155; padding:4px 10px; border-radius:12px; font-size:0.75rem;">Faucets</span>
                </div>
            </div>
        </div>
    </div>
</div>

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