<?php
$page_title = 'Security & Governance';
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-shield-alt" style="color:#6366f1; margin-right:10px;"></i>Security, Identity & Governance</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Manage auth methods, device trust, KYC, and data privacy controls.</p>
    </div>
</div>

<div class="grid-2" style="margin-bottom:24px;">
    <!-- Authentication Methods -->
    <div class="card">
        <h3 style="margin:0 0 20px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-key" style="color:#f59e0b; margin-right:8px;"></i> Authentication Methods</h3>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
            <div style="display:flex; align-items:center; gap:10px;">
                <i class="fas fa-mobile-alt" style="color:#2563eb; font-size:1.2rem;"></i>
                <div>
                    <h4 style="margin:0; font-size:0.9rem;">Mobile OTP Login</h4>
                    <p style="margin:2px 0 0; font-size:0.75rem; color:#64748b;">+91 98XXX XXXX2</p>
                </div>
            </div>
            <span style="background:#dcfce7; color:#166534; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">ACTIVE</span>
        </div>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
            <div style="display:flex; align-items:center; gap:10px;">
                <i class="fas fa-fingerprint" style="color:#8b5cf6; font-size:1.2rem;"></i>
                <div>
                    <h4 style="margin:0; font-size:0.9rem;">Passkey / Biometric</h4>
                    <p style="margin:2px 0 0; font-size:0.75rem; color:#64748b;">Windows Hello registered</p>
                </div>
            </div>
            <span style="background:#dcfce7; color:#166534; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">ACTIVE</span>
        </div>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
            <div style="display:flex; align-items:center; gap:10px;">
                <i class="fas fa-qrcode" style="color:#10b981; font-size:1.2rem;"></i>
                <div>
                    <h4 style="margin:0; font-size:0.9rem;">QR Login (Scan from App)</h4>
                    <p style="margin:2px 0 0; font-size:0.75rem; color:#64748b;">Available on Android/iOS app</p>
                </div>
            </div>
            <span style="background:#dbeafe; color:#1d4ed8; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">SETUP</span>
        </div>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px; display:flex; justify-content:space-between; align-items:center;">
            <div style="display:flex; align-items:center; gap:10px;">
                <i class="fab fa-google" style="color:#ef4444; font-size:1.2rem;"></i>
                <div>
                    <h4 style="margin:0; font-size:0.9rem;">Social Login (Google)</h4>
                    <p style="margin:2px 0 0; font-size:0.75rem; color:#64748b;">rajesh@sharmasteels.com</p>
                </div>
            </div>
            <span style="background:#dcfce7; color:#166534; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">LINKED</span>
        </div>
    </div>

    <!-- Device Trust & Sessions -->
    <div class="card">
        <h3 style="margin:0 0 20px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-laptop" style="color:#3b82f6; margin-right:8px;"></i> Device Trust & Sessions</h3>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
            <div style="display:flex; align-items:center; gap:10px;">
                <i class="fas fa-desktop" style="color:#0f172a; font-size:1.2rem;"></i>
                <div>
                    <h4 style="margin:0; font-size:0.9rem;">Windows PC — Chrome</h4>
                    <p style="margin:2px 0 0; font-size:0.75rem; color:#64748b;">Mumbai, India • Active now</p>
                </div>
            </div>
            <span style="background:#dcfce7; color:#166534; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold;">CURRENT</span>
        </div>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
            <div style="display:flex; align-items:center; gap:10px;">
                <i class="fas fa-mobile-alt" style="color:#0f172a; font-size:1.2rem;"></i>
                <div>
                    <h4 style="margin:0; font-size:0.9rem;">Samsung Galaxy S24 — App</h4>
                    <p style="margin:2px 0 0; font-size:0.75rem; color:#64748b;">Mumbai, India • Last seen 1 hr ago</p>
                </div>
            </div>
            <button style="background:#fee2e2; color:#b91c1c; border:none; padding:3px 8px; border-radius:10px; font-size:0.7rem; font-weight:bold; cursor:pointer;">REVOKE</button>
        </div>

        <hr style="border:0; border-top:1px solid #e2e8f0; margin:15px 0;">
        
        <h3 style="margin:0 0 15px; font-size:1.05rem; color:#0f172a;"><i class="fas fa-id-card" style="color:#10b981; margin-right:8px;"></i> KYC Status</h3>
        <div style="background:#dcfce7; border:1px solid #bbf7d0; padding:15px; border-radius:8px; display:flex; align-items:center; gap:10px;">
            <i class="fas fa-check-circle" style="color:#166534; font-size:1.5rem;"></i>
            <div>
                <h4 style="margin:0; font-size:0.95rem; color:#166534;">KYC Verified</h4>
                <p style="margin:3px 0 0; font-size:0.8rem; color:#15803d;">PAN & GST verified on 12 Aug 2024</p>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-history" style="color:#64748b; margin-right:8px;"></i> Recent Login Alerts</h3>
    <table style="width:100%; border-collapse:collapse; font-size:0.9rem;">
        <thead>
            <tr style="background:#f8fafc; text-align:left;">
                <th style="padding:10px 12px; border-bottom:1px solid #e2e8f0;">Time</th>
                <th style="padding:10px 12px; border-bottom:1px solid #e2e8f0;">Device</th>
                <th style="padding:10px 12px; border-bottom:1px solid #e2e8f0;">Location</th>
                <th style="padding:10px 12px; border-bottom:1px solid #e2e8f0;">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;">Today, 10:42 AM</td>
                <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;">Chrome / Windows</td>
                <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;">Mumbai, India</td>
                <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;"><span style="color:#10b981; font-weight:bold;">Success</span></td>
            </tr>
            <tr>
                <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;">Yesterday, 6:18 PM</td>
                <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;">Balimeen App / Android</td>
                <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;">Mumbai, India</td>
                <td style="padding:10px 12px; border-bottom:1px solid #f1f5f9;"><span style="color:#10b981; font-weight:bold;">Success</span></td>
            </tr>
            <tr>
                <td style="padding:10px 12px;">28 Apr, 11:05 AM</td>
                <td style="padding:10px 12px;">Firefox / Unknown</td>
                <td style="padding:10px 12px;">Delhi, India</td>
                <td style="padding:10px 12px;"><span style="color:#ef4444; font-weight:bold;">Failed (Wrong OTP)</span></td>
            </tr>
        </tbody>
    </table>
</div>

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