@props([
    'phpVersion',
    'laravelVersion',
    'memoryUsage',
    'memoryLimit',
    'diskUsage',
    'uptime',
    'load1',
    'load5',
    'load15',
])

<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px;">
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
            <div style="background:#6366f115;padding:10px;border-radius:12px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2"><path d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/></svg>
            </div>
            <span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">PHP & Laravel</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;">
            <span style="color:#64748b;">PHP</span>
            <span style="font-weight:600;color:#6366f1;">{{ $phpVersion }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:8px 0;">
            <span style="color:#64748b;">Laravel</span>
            <span style="font-weight:600;color:#6366f1;">{{ $laravelVersion }}</span>
        </div>
    </div>
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
            <div style="background:#ec489915;padding:10px;border-radius:12px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ec4899" stroke-width="2"><path d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/></svg>
            </div>
            <span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Memory & Disk</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;">
            <span style="color:#64748b;">Memory</span>
            <span style="font-weight:600;color:#ec4899;">{{ $memoryUsage }}MB / {{ $memoryLimit }}</span>
        </div>
        <div style="display:flex;justify-content:space-between;padding:8px 0;">
            <span style="color:#64748b;">Disk</span>
            <span style="font-weight:600;color:#ec4899;">{{ $diskUsage }}</span>
        </div>
    </div>
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
            <div style="background:#22c55e15;padding:10px;border-radius:12px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            </div>
            <span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Uptime</span>
        </div>
        <div style="font-size:16px;font-weight:700;color:#22c55e;">{{ $uptime }}</div>
    </div>
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.06);">
        <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px;">
            <div style="background:#f59e0b15;padding:10px;border-radius:12px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            </div>
            <span style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;">Load</span>
        </div>
        <div style="display:flex;gap:8px;">
            <div style="flex:1;text-align:center;padding:8px;background:#f8fafc;border-radius:8px;">
                <div style="font-size:10px;color:#94a3b8;">1m</div>
                <div style="font-weight:700;color:#22c55e;">{{ $load1 }}</div>
            </div>
            <div style="flex:1;text-align:center;padding:8px;background:#f8fafc;border-radius:8px;">
                <div style="font-size:10px;color:#94a3b8;">5m</div>
                <div style="font-weight:700;color:#f59e0b;">{{ $load5 }}</div>
            </div>
            <div style="flex:1;text-align:center;padding:8px;background:#f8fafc;border-radius:8px;">
                <div style="font-size:10px;color:#94a3b8;">15m</div>
                <div style="font-weight:700;color:#ef4444;">{{ $load15 }}</div>
            </div>
        </div>
    </div>
</div>