@extends('layouts.app')

@section('title', 'About This Directory - PlanningDB.co.uk')

@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-indigo-900 hover:text-indigo-700 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-amber-50 border-l-4 border-amber-500 p-4 rounded-r-xl mb-8 flex gap-3 text-sm text-amber-900 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-amber-600">
            <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 Ministry of Housing, Communities & Local Government (MHCLG) or any local planning authority in any capacity.
        </div>
    </div>

    <!-- Main About Content Card -->
    <div class="relative overflow-hidden bg-white ring-1 ring-slate-200 border-t-8 border-indigo-900 rounded-2xl p-6 sm:p-10 shadow-sm space-y-8">
        <div>
            <h1 class="text-3xl font-extrabold tracking-tight text-slate-900 mb-2">About This Platform</h1>
            <p class="text-sm text-slate-600 font-semibold flex items-center gap-1.5">
                <span class="inline-flex items-center gap-1.5 rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-semibold text-indigo-900">
                    <span class="h-1.5 w-1.5 rounded-full bg-teal-500 animate-pulse"></span>
                    Live Data Portal
                </span>
                Ref: Planning Data API
            </p>
        </div>

        <!-- Section: What this is about -->
        <div class="space-y-3">
            <h2 class="text-xl font-bold text-slate-900">What is this portal?</h2>
            <p class="text-slate-900 text-sm leading-relaxed">
                This directory dynamically maps out planning constraints, heritage protections, environmental boundaries, and active planning applications across the UK. By query-linking the official National Planning Data API in real-time using geographic bounding boxes, the portal presents a fast, mobile-friendly interface for uncovering hyper-local restrictions that affect property and land development.
            </p>
        </div>

        <!-- Section: Who it is for -->
        <div class="space-y-3">
            <h2 class="text-xl font-bold text-slate-900">Who is it for?</h2>
            <ul class="list-disc pl-5 text-sm text-slate-900 space-y-2 leading-relaxed">
                <li><strong>Homeowners & Buyers:</strong> Instantly discover if a property is restricted by a Conservation Area, Article 4 Direction, Listed Building status, or Flood Risk Zone before making a purchase or starting an extension.</li>
                <li><strong>Architects & Developers:</strong> Evaluate environmental and design constraints, Tree Preservation Orders, and local plan boundaries during early-stage site appraisals.</li>
                <li><strong>Community Members:</strong> Stay informed about nearby planning applications, developer agreements, and heritage-at-risk sites in your neighborhood.</li>
            </ul>
        </div>

        <!-- Section: Open Government Licence -->
        <div class="space-y-3 pt-6 border-t border-slate-200">
            <h2 class="text-xl font-bold text-slate-900 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-indigo-900">
                    <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-slate-900 text-sm leading-relaxed">
                The planning and heritage 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-indigo-900 hover:text-indigo-700 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: National Planning Data API -->
        <div class="space-y-3 pt-6 border-t border-slate-200">
            <h2 class="text-xl font-bold text-slate-900">National Planning Data Acknowledgement</h2>
            <p class="text-slate-900 text-sm leading-relaxed">
                We gratefully acknowledge the <strong>Ministry of Housing, Communities & Local Government</strong> for offering public access to the National Planning Data API. All raw datasets, geospatial polygons, and point data are retrieved live from their endpoints.
            </p>
            <div class="mt-4 p-4 bg-slate-50 border border-slate-200 rounded-xl flex items-center justify-between gap-4">
                <div class="text-xs text-slate-600 leading-relaxed">
                    Access developer documentation, explore datasets, and review the API endpoints directly at the official Planning Data site.
                </div>
                <a href="https://www.planning.data.gov.uk/" target="_blank" rel="noopener noreferrer" class="shrink-0 bg-indigo-900 hover:bg-indigo-800 text-white text-xs font-bold px-4 py-2.5 rounded-lg transition flex items-center gap-1.5 shadow-sm">
                    Visit Planning Data 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