@extends('layouts.app')

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

@section('content')
<div class="space-y-12 py-6">
    <!-- Hero Header -->
    <div class="relative overflow-hidden rounded-2xl bg-white border border-[#D8DDE0] border-t-8 border-[#005EB8] p-8 sm:p-12 shadow-sm text-center">
        <div class="mx-auto max-w-2xl">
            <!-- Mini Badge -->
            <span class="inline-flex items-center gap-1.5 rounded-full bg-[#e6f0fa] px-3 py-1.5 text-xs font-semibold text-[#005EB8] mb-6">
                <svg class="h-4 w-4 shrink-0 text-[#005EB8]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12z" />
                </svg>
                Care Quality Commission Registry
            </span>
            <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl text-[#002F6C]">
                Healthcare Directory
            </h1>
            <p class="mt-6 text-lg text-[#212B32] leading-relaxed">
                Welcome to the search portal for healthcare providers and locations registered with the UK Care Quality Commission. Verify inspection ratings, review administrative registrations, and locate active facilities.
            </p>
        </div>
    </div>

    <!-- Quick Navigation Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Locations Card -->
        <div class="group relative overflow-hidden bg-white border border-[#D8DDE0] border-t-8 border-[#005EB8] rounded-2xl p-8 hover:border-[#a1b5be] hover:shadow-lg transition-all duration-300 flex flex-col justify-between shadow-sm">
            <div>
                <!-- Icon and header -->
                <div class="flex items-center gap-4 mb-6">
                    <div class="bg-[#F0F4F5] p-3 rounded-full border border-[#D8DDE0] text-[#005EB8] group-hover:bg-[#005EB8] group-hover:text-white transition duration-300">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
                        </svg>
                    </div>
                    <h2 class="text-2xl font-bold text-[#002F6C] group-hover:text-[#005EB8] transition-colors">
                        Locations Directory
                    </h2>
                </div>
                <p class="text-sm text-[#4c6272] leading-relaxed mb-6">
                    Browse individual clinics, GP surgeries, nursing care homes, hospitals, and ambulance services. Search by rating, facility type, and local authority to locate facilities near you.
                </p>
            </div>
            <div>
                <a href="{{ route('locations.index') }}" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[#005EB8] hover:bg-[#002F6C] px-5 py-3 text-sm font-bold text-white transition shadow-sm">
                    Search Locations
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                    </svg>
                </a>
            </div>
        </div>

        <!-- Providers Card -->
        <div class="group relative overflow-hidden bg-white border border-[#D8DDE0] border-t-8 border-[#005EB8] rounded-2xl p-8 hover:border-[#a1b5be] hover:shadow-lg transition-all duration-300 flex flex-col justify-between shadow-sm">
            <div>
                <!-- Icon and header -->
                <div class="flex items-center gap-4 mb-6">
                    <div class="bg-[#F0F4F5] p-3 rounded-full border border-[#D8DDE0] text-[#005EB8] group-hover:bg-[#005EB8] group-hover:text-white transition duration-300">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-1.5H3m16.5 0a2.25 2.25 0 1 1-4.5 0M15 15.75a2.25 2.25 0 1 1-4.5 0M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" />
                        </svg>
                    </div>
                    <h2 class="text-2xl font-bold text-[#002F6C] group-hover:text-[#005EB8] transition-colors">
                        Providers Directory
                    </h2>
                </div>
                <p class="text-sm text-[#4c6272] leading-relaxed mb-6">
                    Explore healthcare trusts, corporations, parent organisations, and dental partners registered in England. Review provider rating summaries and their registered locations.
                </p>
            </div>
            <div>
                <a href="{{ route('providers.index') }}" class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-[#005EB8] hover:bg-[#002F6C] px-5 py-3 text-sm font-bold text-white transition shadow-sm">
                    Search Providers
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                    </svg>
                </a>
            </div>
        </div>
    </div>

    <!-- Administrative Indicators Section -->
    <div class="bg-[#e6f0fa] border border-[#D8DDE0] border-l-8 border-[#005EB8] rounded-2xl p-6 sm:p-8 shadow-sm">
        <h3 class="text-lg font-bold text-[#002F6C] mb-4">Official Registry Information</h3>
        <p class="text-sm text-[#212B32] leading-relaxed mb-6">
            All database entries on this platform are extracted in real-time from the Care Quality Commission's central API. The registry monitors:
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
            <div class="flex flex-col p-4 bg-white border border-[#D8DDE0] border-t-4 border-[#005EB8] rounded-xl shadow-xs">
                <span class="text-xs font-bold text-[#005EB8] mb-1">Quality Ratings</span>
                <span class="text-sm text-[#212B32]">Independent scores spanning Outstanding, Good, Requires Improvement, and Inadequate.</span>
            </div>
            <div class="flex flex-col p-4 bg-white border border-[#D8DDE0] border-t-4 border-[#005EB8] rounded-xl shadow-xs">
                <span class="text-xs font-bold text-[#005EB8] mb-1">Live Status Alerts</span>
                <span class="text-sm text-[#212B32]">Real-time tracking of newly registered, suspended, or archived locations.</span>
            </div>
            <div class="flex flex-col p-4 bg-white border border-[#D8DDE0] border-t-4 border-[#005EB8] rounded-xl shadow-xs">
                <span class="text-xs font-bold text-[#005EB8] mb-1">Detailed Mapping</span>
                <span class="text-sm text-[#212B32]">Accurate post-code lookup and OS OpenData spatial coordinates for all clinics.</span>
            </div>
        </div>
    </div>
</div>
@endsection