@extends('layouts.public')

@section('custom-css')
    <style>
        *, *::before, *::after { box-sizing: border-box; }

        :root {
            --primary:      #1a56db;
            --primary-dark: #1342b0;
            --primary-light:#e8f0fe;
            --navy:         #0d1b3e;
            --gray-50:      #f8fafc;
            --gray-100:     #f1f5f9;
            --gray-200:     #e2e8f0;
            --gray-400:     #94a3b8;
            --gray-600:     #475569;
            --gray-800:     #1e293b;
            --radius-sm:    10px;
            --radius-md:    16px;
            --shadow-sm:    0 1px 3px rgba(0,0,0,.08);
            --shadow-md:    0 4px 16px rgba(0,0,0,.08);
        }

        body { font-family: 'Inter', sans-serif; color: var(--gray-800); background: #fff; overflow-x: hidden; }
        a { text-decoration: none; }

        /* ── Page Hero ── */
        .page-hero {
            background: linear-gradient(135deg, var(--navy) 0%, #1a3272 50%, #1a56db 100%);
            padding: 5rem 0 4rem;
            position: relative;
            overflow: hidden;
        }
        .page-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size: 48px 48px;
        }
        .page-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.15);
            color: #93c5fd;
            font-size: .78rem;
            font-weight: 600;
            letter-spacing: .06em;
            padding: .38rem 1rem;
            border-radius: 50px;
            margin-bottom: 1.5rem;
        }
        .page-hero-title {
            font-size: clamp(2rem, 5vw, 3.2rem);
            font-weight: 900;
            color: #fff;
            line-height: 1.12;
            margin-bottom: 1rem;
        }
        .page-hero-title .highlight {
            background: linear-gradient(90deg, #60a5fa, #93c5fd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .breadcrumb-bar {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-size: .83rem;
            color: #93c5fd;
            margin-top: 1.5rem;
            flex-wrap: wrap;
        }
        .breadcrumb-bar a { color: #bfdbfe; transition: color .2s; }
        .breadcrumb-bar a:hover { color: #fff; }
        .breadcrumb-bar i { font-size: .65rem; color: #64748b; }

        /* ── Content Section ── */
        .page-content-section {
            padding: 5rem 0 6rem;
            padding-top: 50px !important;
            background: #fff;
        }
        .page-content-wrap {
            background: #fff;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            padding: 3rem 3.5rem;
            box-shadow: var(--shadow-md);
        }

        /* ── Typography for dynamic content ── */
        .page-content-wrap h1 { font-size: 1.7rem; font-weight: 800; color: var(--navy); margin: 2rem 0 .75rem; line-height: 1.25; }
        .page-content-wrap h2 { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin: 2rem 0 .65rem; line-height: 1.3; padding-bottom: .4rem; border-bottom: 2px solid var(--primary-light); }
        .page-content-wrap h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 1.5rem 0 .5rem; }
        .page-content-wrap h4 { font-size: 1rem; font-weight: 600; color: var(--gray-800); margin: 1.25rem 0 .4rem; }
        .page-content-wrap p  { font-size: .97rem; color: var(--gray-600); line-height: 1.85; margin-bottom: 1.1rem; }
        .page-content-wrap ul,
        .page-content-wrap ol { padding-left: 1.5rem; margin-bottom: 1.1rem; }
        .page-content-wrap li { font-size: .97rem; color: var(--gray-600); line-height: 1.8; margin-bottom: .3rem; }
        .page-content-wrap strong { color: var(--gray-800); font-weight: 600; }
        .page-content-wrap em { color: var(--gray-600); }
        .page-content-wrap a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
        .page-content-wrap a:hover { color: var(--primary-dark); }
        .page-content-wrap blockquote {
            border-left: 4px solid var(--primary);
            background: var(--primary-light);
            padding: 1rem 1.5rem;
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            margin: 1.5rem 0;
            color: var(--gray-600);
            font-style: italic;
        }
        .page-content-wrap table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .9rem; }
        .page-content-wrap table th { background: var(--navy); color: #fff; padding: .75rem 1rem; text-align: left; font-weight: 600; }
        .page-content-wrap table td { padding: .7rem 1rem; border-bottom: 1px solid var(--gray-200); color: var(--gray-600); }
        .page-content-wrap table tr:last-child td { border-bottom: none; }
        .page-content-wrap table tr:hover td { background: var(--gray-50); }

        /* ── Meta bar ── */
        .page-meta {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding-bottom: 1.5rem;
            margin-bottom: 2rem;
            border-bottom: 1px solid var(--gray-200);
            flex-wrap: wrap;
        }
        .page-meta-item {
            display: flex;
            align-items: center;
            gap: .4rem;
            font-size: .82rem;
            color: var(--gray-400);
        }
        .page-meta-item i { color: var(--primary); font-size: .9rem; }

        /* ── CTA ── */
        .cta-section {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            padding: 5rem 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .cta-section::before { content: ''; position: absolute; top: -50%; left: -10%; width: 60%; height: 200%; background: rgba(255,255,255,.05); border-radius: 50%; }
        .cta-section::after  { content: ''; position: absolute; bottom: -50%; right: -10%; width: 50%; height: 200%; background: rgba(255,255,255,.05); border-radius: 50%; }
        .cta-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; color: #fff; margin-bottom: .75rem; }
        .cta-sub   { font-size: 1.05rem; color: #bfdbfe; margin-bottom: 2rem; }
        .btn-cta   { background: #fff; color: var(--primary); font-weight: 700; font-size: 1rem; padding: .85rem 2.5rem; border-radius: var(--radius-sm); border: none; display: inline-flex; align-items: center; gap: .6rem; transition: transform .2s, box-shadow .2s; position: relative; z-index: 1; }
        .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.2); color: var(--primary); }

        /* ── Fade Up ── */
        .fade-up { opacity: 0; transform: translateY(28px); transition: opacity .55s ease, transform .55s ease; }
        .fade-up.visible { opacity: 1; transform: translateY(0); }

        @media (max-width: 767px) {
            .page-content-wrap { padding: 1.75rem 1.25rem; }
        }
    </style>
@endsection

@section('content')

    <section class="page-hero">
        <div class="container-fluid px-4 px-lg-5 position-relative">
            <div class="page-hero-badge">
                <i class="bi bi-file-text-fill"></i> {{ $page->title }}
            </div>
            <h1 class="page-hero-title">
                <span class="highlight">{{ $page->title }}</span>
            </h1>
            <div class="breadcrumb-bar">
                <a href="{{ route('home') }}">Home</a>
                <i class="bi bi-chevron-right"></i>
                <span style="color:#fff;">{{ $page->title }}</span>
            </div>
        </div>
    </section>

    {{-- ═══ PAGE CONTENT ═══ --}}
    <section class="page-content-section">
        <div class="container-fluid px-4 px-lg-5">
            <div class="page-content-wrap">

                {{-- Meta bar --}}
                <div class="page-meta">
                    <div class="page-meta-item">
                        <i class="bi bi-calendar3"></i>
                        Last updated: {{ $page->updated_at->format('d M, Y') }}
                    </div>
                    <div class="page-meta-item">
                        <i class="bi bi-building"></i>
                        {{ config('app.name') }}
                    </div>
                </div>

                {{-- Dynamic CKEditor content --}}
                <div class="page-dynamic-content">
                    {!! $page->description !!}
                </div>

            </div>
        </div>
    </section>

    {{-- ═══ CTA ═══ --}}
    <section class="cta-section">
        <div class="container-fluid px-4 px-lg-5 position-relative" style="z-index:1">
            <div class="fade-up">
                <h2 class="cta-title">Have Questions?</h2>
                <p class="cta-sub">Our team is here to help you with anything you need.</p>
                <a href="{{ route('home') }}" class="btn-cta">
                    <i class="bi bi-house-fill"></i> Back to Home
                </a>
            </div>
        </div>
    </section>

@endsection

@section('page-script')
    <script>
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.12 });

        document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
    </script>
@endsection