@extends('public.layout.app')

@section('title', 'Website Directory')

@section('body')
@php
    $contentRoutes = [
        'committee' => ['index' => 'front.committees.index', 'show' => 'front.committees.show', 'label' => 'Committees'],
        'office' => ['index' => 'front.offices.index', 'show' => 'front.offices.show', 'label' => 'Offices'],
        'academic_section' => ['index' => 'front.academic_sections.index', 'show' => 'front.academic_sections.show', 'label' => 'Academic Sections'],
    ];
@endphp

<section class="explore-smart">
    <div class="explore-bg"></div>
    <div class="container">
        <div class="explore-hero public-animated-block">
            <div>
                <a href="{{ route('front.home') }}" class="btn btn-outline-light btn-sm mb-4">
                    <i class="fa-solid fa-house me-1"></i> {{ __('front.home') }}
                </a>
                <span class="explore-kicker"><i class="fa-solid fa-compass"></i> Complete website map</span>
                <h1>Explore every public section</h1>
                <p>Academic pages, services, offices, committees, admissions, media, forms, and portals are organized here for fast navigation.</p>
            </div>
            <form action="{{ route('front.search') }}" method="GET" class="explore-search">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input name="q" type="search" placeholder="Search the website">
                <button><span>Search</span><i class="fa-solid fa-arrow-right"></i></button>
            </form>
        </div>

        <div class="explore-main-grid">
            @foreach($mainSections as $section)
                <a href="{{ $section['url'] }}" class="explore-card" style="--section-color: {{ $section['color'] }}">
                    <span class="explore-icon"><i class="fa-solid {{ $section['icon'] }}"></i></span>
                    <strong>{{ $section['title'] }}</strong>
                    <small>{{ $section['subtitle'] }}</small>
                    <em><i class="fa-solid fa-arrow-right"></i></em>
                </a>
            @endforeach
        </div>

        <div class="explore-panels">
            <div class="explore-panel explore-panel-wide">
                <div class="explore-panel-head">
                    <div>
                        <span><i class="fa-solid fa-file-lines"></i> Pages</span>
                        <h2>Dynamic pages</h2>
                    </div>
                    <a href="{{ route('front.pages.show', 'about-us') }}">About</a>
                </div>
                <div class="explore-list">
                    @forelse($pages as $page)
                        <a href="{{ route('front.pages.show', $page->slug) }}">
                            <strong>{{ $page->title }}</strong>
                            <small>/page/{{ $page->slug }}</small>
                        </a>
                    @empty
                        <div class="explore-empty">No published pages yet.</div>
                    @endforelse
                </div>
            </div>

            <div class="explore-panel">
                <div class="explore-panel-head">
                    <div>
                        <span><i class="fa-solid fa-sitemap"></i> Structure</span>
                        <h2>Offices & sections</h2>
                    </div>
                    <small>{{ $contentGroups->flatten(1)->count() }} items</small>
                </div>

                @foreach($contentRoutes as $type => $route)
                    <div class="explore-group">
                        <a class="explore-group-title" href="{{ route($route['index']) }}">{{ $route['label'] }}</a>
                        <div class="explore-list compact">
                            @forelse(($contentGroups[$type] ?? collect()) as $item)
                                <a href="{{ route($route['show'], $item->slug) }}">
                                    <strong><i class="fa-solid {{ $item->icon ?: 'fa-circle-info' }}"></i> {{ $item->title }}</strong>
                                    <small>{{ $item->slug }}</small>
                                </a>
                            @empty
                                <div class="explore-empty">No published {{ strtolower($route['label']) }} yet.</div>
                            @endforelse
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="explore-panel">
                <div class="explore-panel-head">
                    <div>
                        <span><i class="fa-solid fa-landmark"></i> Academics</span>
                        <h2>Faculties</h2>
                    </div>
                    <a href="{{ route('front.faculties.index') }}">View all</a>
                </div>
                <div class="explore-list compact">
                    @forelse($faculties as $faculty)
                        <a href="{{ route('front.faculties.show', $faculty->id) }}">
                            <strong>{{ $faculty->name }}</strong>
                            <small>{{ $faculty->departments_count }} departments</small>
                        </a>
                    @empty
                        <div class="explore-empty">No faculties yet.</div>
                    @endforelse
                </div>
            </div>

            <div class="explore-panel">
                <div class="explore-panel-head">
                    <div>
                        <span><i class="fa-solid fa-diagram-project"></i> Academics</span>
                        <h2>Departments</h2>
                    </div>
                    <a href="{{ route('front.departments.index') }}">View all</a>
                </div>
                <div class="explore-list compact">
                    @forelse($departments as $department)
                        <a href="{{ route('front.departments.show', $department->id) }}">
                            <strong>{{ $department->name }}</strong>
                            <small>{{ $department->programs_count }} programs</small>
                        </a>
                    @empty
                        <div class="explore-empty">No departments yet.</div>
                    @endforelse
                </div>
            </div>

            <div class="explore-panel">
                <div class="explore-panel-head">
                    <div>
                        <span><i class="fa-solid fa-list-check"></i> Academics</span>
                        <h2>Programs</h2>
                    </div>
                    <a href="{{ route('front.programs.index') }}">View all</a>
                </div>
                <div class="explore-list compact">
                    @forelse($programs as $program)
                        <a href="{{ route('front.programs.show', $program->id) }}">
                            <strong>{{ $program->name }}</strong>
                            <small>{{ $program->semesters_count }} semesters</small>
                        </a>
                    @empty
                        <div class="explore-empty">No programs yet.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .explore-smart {
        position: relative;
        padding: 86px 0 110px;
        overflow: hidden;
        color: #fff;
    }

    .explore-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(680px 400px at 12% 10%, rgba(247,183,49,.18), transparent 62%),
            radial-gradient(760px 420px at 88% 18%, rgba(30,203,133,.14), transparent 62%);
    }

    .explore-smart .container {
        position: relative;
        z-index: 2;
    }

    .explore-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
        gap: 28px;
        align-items: end;
        margin-bottom: 28px;
    }

    .explore-kicker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-radius: 999px;
        border: 1px solid rgba(247,183,49,.42);
        background: rgba(247,183,49,.1);
        color: #ffe2a5;
        padding: 9px 15px;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .explore-hero h1 {
        margin: 20px 0 14px;
        max-width: 920px;
        font-size: clamp(42px, 6vw, 78px);
        line-height: .98;
        font-weight: 950;
        letter-spacing: 0;
    }

    .explore-hero p {
        color: rgba(248,250,252,.72);
        font-size: 19px;
        line-height: 1.75;
        max-width: 800px;
        margin: 0;
    }

    .explore-search {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.075);
        border-radius: 8px;
        box-shadow: 0 24px 70px rgba(0,0,0,.26);
        backdrop-filter: blur(14px);
    }

    .explore-search > i {
        color: #ffe2a5;
        margin-left: 8px;
    }

    .explore-search input {
        border: 0;
        outline: 0;
        min-width: 0;
        flex: 1;
        color: #fff;
        background: transparent;
    }

    .explore-search input::placeholder {
        color: rgba(248,250,252,.52);
    }

    .explore-search button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        border-radius: 8px;
        background: linear-gradient(135deg, #ffd166, #f59e0b);
        color: #111827;
        font-weight: 950;
        padding: 0 16px;
    }

    .explore-main-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 24px;
    }

    .explore-card,
    .explore-panel {
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.075);
        border-radius: 8px;
        box-shadow: 0 24px 70px rgba(0,0,0,.26);
        backdrop-filter: blur(14px);
        transition: transform .24s ease, border-color .24s ease, background .24s ease;
    }

    .explore-card {
        position: relative;
        min-height: 184px;
        color: #fff;
        padding: 22px;
        overflow: hidden;
    }

    .explore-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: var(--section-color);
    }

    .explore-card:hover,
    .explore-panel:hover {
        transform: translateY(-5px);
        border-color: rgba(255,255,255,.24);
        background: rgba(255,255,255,.105);
        text-decoration: none;
    }

    .explore-icon {
        width: 48px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: #fff;
        background: color-mix(in srgb, var(--section-color), transparent 18%);
        margin-bottom: 18px;
    }

    .explore-card strong,
    .explore-card small {
        display: block;
    }

    .explore-card strong {
        color: #fff;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .explore-card small {
        color: rgba(248,250,252,.68);
        line-height: 1.45;
        padding-right: 22px;
    }

    .explore-card em {
        position: absolute;
        right: 18px;
        bottom: 16px;
        color: #ffe2a5;
        font-style: normal;
    }

    .explore-panels {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .explore-panel-wide {
        grid-column: span 2;
    }

    .explore-panel {
        padding: 24px;
        min-height: 360px;
    }

    .explore-panel-head {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: start;
        margin-bottom: 18px;
    }

    .explore-panel-head span,
    .explore-group-title {
        color: #ffe2a5;
        font-size: 12px;
        font-weight: 950;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .explore-panel-head h2 {
        color: #fff;
        font-size: 26px;
        font-weight: 950;
        margin: 7px 0 0;
    }

    .explore-panel-head a,
    .explore-panel-head small {
        color: #dff7ff;
        font-weight: 850;
        white-space: nowrap;
    }

    .explore-group {
        border-top: 1px solid rgba(255,255,255,.1);
        padding-top: 16px;
        margin-top: 16px;
    }

    .explore-group:first-of-type {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

    .explore-group-title {
        display: inline-flex;
        margin-bottom: 10px;
    }

    .explore-list {
        display: grid;
        gap: 10px;
        max-height: 520px;
        overflow: auto;
        padding-right: 4px;
    }

    .explore-list.compact {
        max-height: 420px;
    }

    .explore-list a,
    .explore-empty {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: center;
        padding: 13px 14px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 8px;
        background: rgba(255,255,255,.06);
        color: #fff;
    }

    .explore-list a:hover {
        background: rgba(247,183,49,.12);
        text-decoration: none;
    }

    .explore-list strong {
        color: #fff;
        font-weight: 850;
    }

    .explore-list small,
    .explore-empty {
        color: rgba(248,250,252,.62);
        text-align: right;
    }

    @media (max-width: 1199px) {
        .explore-main-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .explore-panels {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991px) {
        .explore-hero {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767px) {
        .explore-main-grid,
        .explore-panels {
            grid-template-columns: 1fr;
        }

        .explore-panel-wide {
            grid-column: auto;
        }

        .explore-list a,
        .explore-empty {
            align-items: flex-start;
            flex-direction: column;
        }

        .explore-list small {
            text-align: left;
        }
    }

    @media (max-width: 575px) {
        .explore-smart {
            padding-top: 64px;
        }

        .explore-search {
            display: grid;
        }

        .explore-search > i {
            display: none;
        }
    }
</style>
@endpush