@extends('layouts.site')

@section('title', ($page->title ?? 'Policy Page') . ' - Visit Sri Lanka 360')

@php
    $heroBg = !empty($page->hero_image)
        ? asset('storage/' . ltrim($page->hero_image, '/'))
        : asset('images/hero/policy-hero.jpg');
@endphp

@section('content')
    <div class="tour-show-page">

        {{-- HERO --}}
        <section class="relative full-bleed">
            <div class="h-[34vh] md:h-[38vh] relative overflow-hidden bg-slate-900 bg-cover bg-center"
                style="background-image: url('{{ $heroBg }}');">

                <div class="absolute inset-0 bg-black/55"></div>
                <div class="absolute inset-0
                                bg-[radial-gradient(900px_500px_at_20%_30%,rgba(215,166,43,.35),transparent_60%),
                                    radial-gradient(800px_500px_at_85%_40%,rgba(255,255,255,.10),transparent_55%)]">
                </div>

                <div class="relative container-site h-full flex items-center">
                    <div class="max-w-3xl">
                        <div class="text-white/70 text-xs tracking-[.22em] uppercase">
                            Legal Information
                        </div>

                        <h1 class="mt-3 text-white text-3xl md:text-5xl font-semibold"
                            style="font-family: var(--font-display);">
                            {{ $page->title }}
                        </h1>

                        @if(!empty($page->excerpt))
                            <p class="mt-3 text-white/80 text-sm md:text-base max-w-2xl">
                                {{ $page->excerpt }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        {{-- BODY --}}
        <section class="py-10 md:py-14">
            <div class="container-site">
                <div class="max-w-4xl mx-auto">
                    <div class="card p-6 md:p-8">
                        <div class="policy-prose">
                            {!! $page->content !!}
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
@endsection

@push('styles')
    <style>
        .policy-prose {
            color: #0f172a;
            line-height: 1.9;
            font-size: 15px;
        }

        @media (min-width:768px) {
            .policy-prose {
                font-size: 16px;
            }
        }

        .policy-prose>* {
            margin: 0 0 1rem;
        }

        .policy-prose p {
            color: #334155;
        }

        .policy-prose h1,
        .policy-prose h2,
        .policy-prose h3,
        .policy-prose h4,
        .policy-prose h5,
        .policy-prose h6 {
            font-family: var(--font-display);
            color: #0f172a;
            line-height: 1.2;
            margin: 1.8rem 0 .9rem;
            letter-spacing: -0.01em;
        }

        .policy-prose h1 {
            font-size: 2rem;
        }

        .policy-prose h2 {
            font-size: 1.6rem;
        }

        .policy-prose h3 {
            font-size: 1.3rem;
        }

        .policy-prose h4 {
            font-size: 1.1rem;
        }

        .policy-prose ul,
        .policy-prose ol {
            margin: .75rem 0 1.25rem;
            padding-left: 1.25rem !important;
            list-style-position: outside !important;
            color: #334155;
        }

        .policy-prose ul {
            list-style-type: disc !important;
        }

        .policy-prose ol {
            list-style-type: decimal !important;
        }

        .policy-prose li {
            margin: .35rem 0;
        }

        .policy-prose li::marker {
            color: rgba(15, 23, 42, .75);
            font-weight: 700;
        }

        .policy-prose a {
            color: #916b1a;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .policy-prose blockquote {
            margin: 1.4rem 0;
            padding: 1rem 1rem 1rem 1.1rem;
            border-left: 3px solid rgba(215, 166, 43, .7);
            background: rgba(248, 250, 252, 1);
            border-radius: 16px;
            color: #334155;
        }

        .policy-prose table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.2rem 0;
            border: 1px solid rgba(226, 232, 240, 1);
            border-radius: 16px;
            overflow: hidden;
        }

        .policy-prose th,
        .policy-prose td {
            padding: .75rem .85rem;
            border-bottom: 1px solid rgba(226, 232, 240, 1);
            text-align: left;
            vertical-align: top;
            color: #334155;
            font-size: .95em;
        }

        .policy-prose th {
            background: rgba(248, 250, 252, 1);
            color: #0f172a;
            font-weight: 700;
        }

        .policy-prose tr:last-child td {
            border-bottom: 0;
        }
    </style>
@endpush