@extends('layouts.app')

@section('content')
    <x-navigation />

    <main class="min-h-screen py-20 bg-slate-950 text-white">
        <div class="max-w-5xl mx-auto px-6 lg:px-10">
            <div class="mb-12 animate-on-scroll">
                <h1 class="text-4xl md:text-5xl font-extrabold text-white mb-6">Sitemap</h1>
                <p class="text-lg md:text-xl text-gray-400">Navigate through all sections and pages of OA MediaKraft</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Main Pages -->
                <section class="animate-on-scroll" style="transition-delay: 0.1s;">
                    <h2 class="text-xl md:text-2xl font-bold text-white mb-6 pb-3 border-b border-slate-700">Main Pages</h2>
                    <ul class="space-y-3">
                        <li><a href="/" class="text-cyan-400 hover:text-cyan-300 transition">Home</a></li>
                        <li><a href="/about" class="text-cyan-400 hover:text-cyan-300 transition">About</a></li>
                        <li><a href="/#contact" class="text-cyan-400 hover:text-cyan-300 transition">Contact</a></li>
                    </ul>
                </section>

                <!-- Services -->
                <section class="animate-on-scroll" style="transition-delay: 0.2s;">
                    <h2 class="text-xl md:text-2xl font-bold text-white mb-6 pb-3 border-b border-slate-700">Services</h2>
                    <ul class="space-y-3">
                        <li><a href="/design" class="text-cyan-400 hover:text-cyan-300 transition">Design</a></li>
                        <li><a href="/photography" class="text-cyan-400 hover:text-cyan-300 transition">Photography</a>
                        </li>
                        <li><a href="/branding" class="text-cyan-400 hover:text-cyan-300 transition">Branding</a></li>
                        <li><a href="/podcast" class="text-cyan-400 hover:text-cyan-300 transition">Podcast</a></li>
                        <li><a href="/livestream" class="text-cyan-400 hover:text-cyan-300 transition">Livestream</a>
                        </li>
                    </ul>
                </section>

                <!-- Design Section -->
                <section class="animate-on-scroll" style="transition-delay: 0.3s;">
                    <h2 class="text-xl md:text-2xl font-bold text-white mb-6 pb-3 border-b border-slate-700">Design</h2>
                    <ul class="space-y-3">
                        <li><a href="/design" class="text-cyan-400 hover:text-cyan-300 transition">Design Home</a></li>
                        <li><a href="/design/portfolio" class="text-cyan-400 hover:text-cyan-300 transition">Portfolio</a>
                        </li>
                        <li><a href="/design/pricing" class="text-cyan-400 hover:text-cyan-300 transition">Pricing</a>
                        </li>
                        <li><a href="/design/process" class="text-cyan-400 hover:text-cyan-300 transition">Process</a>
                        </li>
                    </ul>
                </section>

                <!-- Photography Section -->
                <section class="animate-on-scroll" style="transition-delay: 0.4s;">
                    <h2 class="text-xl md:text-2xl font-bold text-white mb-6 pb-3 border-b border-slate-700">Photography
                    </h2>
                    <ul class="space-y-3">
                        <li><a href="/photography" class="text-cyan-400 hover:text-cyan-300 transition">Photography
                                Home</a></li>
                        <li><a href="/photography/portfolio"
                                class="text-cyan-400 hover:text-cyan-300 transition">Portfolio</a></li>
                        <li><a href="/photography/pricing" class="text-cyan-400 hover:text-cyan-300 transition">Pricing</a>
                        </li>
                        <li><a href="/photography/process" class="text-cyan-400 hover:text-cyan-300 transition">Process</a>
                        </li>
                    </ul>
                </section>

                <!-- Branding Section -->
                <section class="animate-on-scroll" style="transition-delay: 0.5s;">
                    <h2 class="text-xl md:text-2xl font-bold text-white mb-6 pb-3 border-b border-slate-700">Branding</h2>
                    <ul class="space-y-3">
                        <li><a href="/branding" class="text-cyan-400 hover:text-cyan-300 transition">Branding Home</a>
                        </li>
                        <li><a href="/branding/portfolio" class="text-cyan-400 hover:text-cyan-300 transition">Portfolio</a>
                        </li>
                        <li><a href="/branding/pricing" class="text-cyan-400 hover:text-cyan-300 transition">Pricing</a>
                        </li>
                    </ul>
                </section>

                <!-- Legal & Policy -->
                <section class="animate-on-scroll" style="transition-delay: 0.6s;">
                    <h2 class="text-xl md:text-2xl font-bold text-white mb-6 pb-3 border-b border-slate-700">Legal & Policy
                    </h2>
                    <ul class="space-y-3">
                        <li><a href="/terms" class="text-cyan-400 hover:text-cyan-300 transition">Terms of Service</a>
                        </li>
                        <li><a href="/privacy" class="text-cyan-400 hover:text-cyan-300 transition">Privacy Policy</a>
                        </li>
                        <li><a href="/sitemap" class="text-cyan-400 hover:text-cyan-300 transition">Sitemap</a></li>
                        <li><a href="/accessibility" class="text-cyan-400 hover:text-cyan-300 transition">Accessibility</a>
                        </li>
                    </ul>
                </section>

                <!-- Podcast & Livestream -->
                <section class="animate-on-scroll" style="transition-delay: 0.7s;">
                    <h2 class="text-xl md:text-2xl font-bold text-white mb-6 pb-3 border-b border-slate-700">Podcast &
                        Livestream
                    </h2>
                    <ul class="space-y-3">
                        <li><a href="/podcast" class="text-cyan-400 hover:text-cyan-300 transition">Podcast</a></li>
                        <li><a href="/livestream" class="text-cyan-400 hover:text-cyan-300 transition">Livestream</a>
                        </li>
                    </ul>
                </section>
            </div>

            <!-- Quick Contact -->
            <div class="mt-16 animate-on-scroll" style="transition-delay: 0.8s;">
                <div class="bg-gradient-to-r from-slate-900 to-slate-800 border border-slate-700 rounded-lg p-8">
                    <h2 class="text-xl md:text-2xl font-bold text-white mb-4">Need Help?</h2>
                    <p class="text-gray-300 mb-6">
                        Can't find what you're looking for? Get in touch with our team for assistance.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="mailto:contact@oamediakraft.co.uk"
                            class="inline-flex items-center justify-center px-6 py-3 bg-cyan-600 hover:bg-cyan-700 text-white font-semibold rounded-lg transition">
                            Email Us
                        </a>
                        <a href="/#contact"
                            class="inline-flex items-center justify-center px-6 py-3 border border-slate-600 hover:border-cyan-400 text-white font-semibold rounded-lg transition">
                            Contact Form
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <x-footer :themeClasses="[
        'sectionBgAlt' => 'bg-slate-950',
        'divider' => 'border-slate-800',
        'textNormal' => 'text-white',
        'textSecondary' => 'text-gray-400',
        'cardBg' => 'bg-slate-900',
        'inputBg' => 'bg-slate-800',
        'inputBorder' => 'border-slate-700',
    ]" />

    @push('scripts')
        <script>
            document.querySelectorAll('.animate-on-scroll').forEach(el => {
                const observer = new IntersectionObserver(entries => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            entry.target.classList.add('is-visible');
                            observer.unobserve(entry.target);
                        }
                    });
                }, {
                    threshold: 0.1
                });

                observer.observe(el);
            });
        </script>
    @endpush
@endsection