<?php
$page_title = 'Sustainability (ESG)';
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-leaf" style="color:#10b981; margin-right:10px;"></i>Sustainability & ESG Dashboard</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Environmental, Social, and Governance performance monitoring.</p>
    </div>
</div>

<div class="grid-4" style="margin-bottom:24px;">
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">CARBON FOOTPRINT</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">1,240 <span style="font-size:0.9rem; color:#64748b;">tCO₂</span></div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-arrow-down"></i> -8% vs Last Year</div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #f59e0b;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">ENERGY USAGE</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">4.8 <span style="font-size:0.9rem; color:#64748b;">GWh</span></div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;"><i class="fas fa-sun"></i> 32% Solar Powered</div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #3b82f6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">WATER RECYCLED</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">78%</div>
        <div style="color:#3b82f6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-tint"></i> Zero Liquid Discharge</div>
    </div>
    <div style="background:#fff; padding:20px; border-radius:12px; border:1px solid #e2e8f0; border-top:4px solid #8b5cf6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">WASTE RECYCLED</div>
        <div style="font-size:1.6rem; font-weight:700; color:#0f172a;">92%</div>
        <div style="color:#8b5cf6; font-size:0.8rem; margin-top:5px;"><i class="fas fa-recycle"></i> Scrap recovery program</div>
    </div>
</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-solar-panel" style="color:#f59e0b; margin-right:8px;"></i> Solar Integration Tracker</h3>
        <div style="background:#fffbeb; border:1px solid #fef3c7; padding:15px; border-radius:8px; margin-bottom:15px;">
            <div style="display:flex; justify-content:space-between; margin-bottom:10px;">
                <span style="font-size:0.9rem; font-weight:600; color:#92400e;">Today's Solar Generation</span>
                <span style="font-weight:bold; color:#d97706;">1,842 kWh</span>
            </div>
            <div style="background:#fde68a; height:10px; border-radius:5px; overflow:hidden;">
                <div style="width:68%; height:100%; background:#f59e0b; border-radius:5px;"></div>
            </div>
            <div style="display:flex; justify-content:space-between; margin-top:8px; font-size:0.8rem; color:#92400e;">
                <span>68% of daily target</span><span>Target: 2,700 kWh</span>
            </div>
        </div>
        <p style="margin:0; font-size:0.85rem; color:#64748b;">Rooftop capacity: 500 kW across 3 factory units.</p>
    </div>

    <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-clipboard-check" style="color:#10b981; margin-right:8px;"></i> ESG Compliance Status</h3>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
            <span style="font-weight:500; font-size:0.9rem;">ISO 14001 (Environment)</span>
            <span style="background:#dcfce7; color:#166534; padding:3px 10px; border-radius:10px; font-size:0.75rem; font-weight:bold;">Certified</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;">
            <span style="font-weight:500; font-size:0.9rem;">ISO 45001 (Safety)</span>
            <span style="background:#dcfce7; color:#166534; padding:3px 10px; border-radius:10px; font-size:0.75rem; font-weight:bold;">Certified</span>
        </div>
        <div style="border:1px solid #e2e8f0; border-radius:8px; padding:12px; display:flex; justify-content:space-between; align-items:center;">
            <span style="font-weight:500; font-size:0.9rem;">GRI Sustainability Report</span>
            <span style="background:#fef3c7; color:#b45309; padding:3px 10px; border-radius:10px; font-size:0.75rem; font-weight:bold;">In Progress</span>
        </div>
    </div>
</div>

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