@extends('layouts.app')

@section('title', 'About This Directory - Healthcare Directory')

@section('content')
<div class="space-y-6">
    <!-- Back button -->
    <div class="mb-6">
        <a href="{{ route('home') }}" class="inline-flex items-center gap-2 text-sm font-semibold text-[#005EB8] hover:text-[#002F6C] hover:underline transition duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
            </svg>
            Back to Homepage
        </a>
    </div>

    <!-- Non-official Disclaimer Banner -->
    <div class="bg-[#fff9e6] border-l-4 border-[#D47A00] p-4 rounded-r-xl mb-8 flex gap-3 text-sm text-[#5c3a00] shadow-sm">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 shrink-0 text-[#D47A00]">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
        </svg>
        <div>
            <strong>Disclaimer:</strong> This website is an independent reference directory. It is <strong>NOT</strong> an official government website and is not affiliated with, sponsored by, or related to the Department of Health and Social Care, the NHS, or the Care Quality Commission (CQC) in any capacity.
        </div>
    </div>

    <!-- Main About Content Card -->
    <div class="relative overflow-hidden bg-white border border-[#D8DDE0] border-t-8 border-[#005EB8] rounded-2xl p-6 sm:p-10 shadow-sm space-y-8">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-[#002F6C] mb-2">About This Directory</h1>
            <p class="text-sm text-[#4c6272] font-semibold flex items-center gap-1.5">
                <span class="inline-flex items-center gap-1.5 rounded-full bg-[#e6f0fa] px-2.5 py-1 text-xs font-semibold text-[#005EB8]">
                    <span class="h-1.5 w-1.5 rounded-full bg-[#009639] animate-pulse"></span>
                    Live Data Portal
                </span>
                Ref: CQC Syndication v1.0
            </p>
        </div>

        <!-- Section: What this is about -->
        <div class="space-y-3">
            <h2 class="text-xl font-bold text-[#002F6C]">What is this portal?</h2>
            <p class="text-[#212B32] text-sm leading-relaxed">
                This directory compiles registration, inspection, and location details of healthcare services in England. By query-linking the official database endpoints in real-time, the portal presents a fast, mobile-friendly interface for checking quality ratings, geographic coordinates, administrative structures, and active service configurations.
            </p>
        </div>

        <!-- Section: Who it is for -->
        <div class="space-y-3">
            <h2 class="text-xl font-bold text-[#002F6C]">Who is it for?</h2>
            <ul class="list-disc pl-5 text-sm text-[#212B32] space-y-2 leading-relaxed">
                <li><strong>Patients & Service Users:</strong> Easily locate clinics, GP practices, hospitals, and care providers within a local authority area and inspect their official CQC rating.</li>
                <li><strong>Healthcare Administrators:</strong> Access verified ODS codes, CCG coverages, Unique Property Reference Numbers (UPRN), and registry change records.</li>
                <li><strong>Researchers & Developers:</strong> Cross-reference parent providers with their associated locations and inspect live CQC JSON payloads.</li>
            </ul>
        </div>

        <!-- Section: Open Government Licence -->
        <div class="space-y-3 pt-6 border-t border-[#E8EDEE]">
            <h2 class="text-xl font-bold text-[#002F6C] flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-[#005EB8]">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                </svg>
                Open Government Licence (OGL)
            </h2>
            <p class="text-[#212B32] text-sm leading-relaxed">
                The administrative and inspection registry data displayed on this portal is published under the terms of the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" target="_blank" rel="noopener noreferrer" class="text-[#005EB8] hover:text-[#002F6C] font-semibold underline transition">Open Government Licence v3.0 (OGL)</a>. This allows for public use, adaptation, and sharing of government-collected information, provided that the source is acknowledged correctly.
            </p>
        </div>

        <!-- Section: CQC Portal Acknowledgment -->
        <div class="space-y-3 pt-6 border-t border-[#E8EDEE]">
            <h2 class="text-xl font-bold text-[#002F6C]">Care Quality Commission Acknowledgement</h2>
            <p class="text-[#212B32] text-sm leading-relaxed">
                We gratefully acknowledge the <strong>Care Quality Commission (CQC)</strong> for offering public access to their syndication endpoints. All raw data feeds, inspection timelines, ratings, and PDF reports are retrieved live from the CQC registry.
            </p>
            <div class="mt-4 p-4 bg-[#F0F4F5] border border-[#D8DDE0] rounded-xl flex items-center justify-between gap-4">
                <div class="text-xs text-[#4c6272] leading-relaxed">
                    Access developer portals, request API credentials, and review syndication documentation directly at the CQC portal.
                </div>
                <a href="https://api-portal.service.cqc.org.uk/" target="_blank" rel="noopener noreferrer" class="shrink-0 bg-[#005EB8] hover:bg-[#002F6C] text-white text-xs font-bold px-4 py-2.5 rounded-lg transition flex items-center gap-1.5 shadow-sm">
                    Visit CQC Portal
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
                    </svg>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection