@extends('layouts.app')

@section('title', 'Data')
@section('page-title', 'Data')

@section('content')
<style>
    .submenu-card {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 1.5rem;
        text-decoration: none;
        color: #333;
        display: block;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }
    
    .submenu-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
        border-color: #667eea;
        color: #667eea;
    }
    
    .submenu-card h5 {
        margin: 0;
        font-weight: 600;
        font-size: 1.1rem;
    }
    
    .submenu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
</style>

<div class="submenu-grid">
    <a href="{{ route('data.sistem-dan-strategi') }}" class="submenu-card">
        <h5>1. Sistem dan Strategi Tata Kelola dan Pengendali Risiko</h5>
    </a>
    
    <a href="{{ route('data.pembiayaan-perumahan') }}" class="submenu-card">
        <h5>2. Pembiayaan Perumahan dan Kawasan Permukiman</h5>
    </a>
    
    <a href="{{ route('data.efisiensi-dan-kemitraan') }}" class="submenu-card">
        <h5>3. Efisiensi dan Kemitraan Penyelenggaraan Pembangunan</h5>
    </a>
    
    <a href="{{ route('data.keterbukaan-publik') }}" class="submenu-card">
        <h5>4. Keterbukaan Publik, Transparansi dan Akuntabilitas</h5>
    </a>
    
    <a href="{{ route('data.pengendali-resiko') }}" class="submenu-card">
        <h5>5. Pengendali Resiko dan Pencegahan Korupsi</h5>
    </a>
</div>
@endsection