@extends('layouts.app')

@section('title', 'Laporan')

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Laporan & Analitik</h1>
        <p class="page-subtitle">Ekspor dan analisa data penjualan</p>
    </div>
</div>

<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;">

    <a href="{{ route('reports.sales') }}" style="text-decoration:none;">
        <div class="card" style="padding:1.5rem;cursor:pointer;transition:border-color .15s;" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='var(--gray-200)'">
            <div style="width:44px;height:44px;border-radius:10px;background:var(--primary-50);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;">
                <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:22px;height:22px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
            </div>
            <div style="font-size:1rem;font-weight:600;color:var(--gray-900);margin-bottom:.25rem;">Laporan Penjualan</div>
            <div style="font-size:.875rem;color:var(--gray-500);">Deal, pipeline value, dan performa sales per periode</div>
        </div>
    </a>

    <div class="card" style="padding:1.5rem;opacity:.6;">
        <div style="width:44px;height:44px;border-radius:10px;background:var(--success-light);color:var(--success);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:22px;height:22px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
        </div>
        <div style="font-size:1rem;font-weight:600;color:var(--gray-900);margin-bottom:.25rem;">Laporan Kontak</div>
        <div style="font-size:.875rem;color:var(--gray-500);">Segmentasi kontak, sumber lead, dan konversi</div>
        <span class="badge badge-gray" style="margin-top:.75rem;">Segera Hadir</span>
    </div>

    <div class="card" style="padding:1.5rem;opacity:.6;">
        <div style="width:44px;height:44px;border-radius:10px;background:var(--warning-light);color:var(--warning);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width:22px;height:22px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
        </div>
        <div style="font-size:1rem;font-weight:600;color:var(--gray-900);margin-bottom:.25rem;">Laporan Chatbot</div>
        <div style="font-size:.875rem;color:var(--gray-500);">Statistik respons AI, eskalasi, dan intent</div>
        <span class="badge badge-gray" style="margin-top:.75rem;">Segera Hadir</span>
    </div>

</div>

@endsection