<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>
        {{ $settings->school_name ?? 'Pearl School' }} -
        @yield('title', 'Home')
    </title>

    <meta
        name="description"
        content="@yield('meta_description', $settings->about_summary ?? '')"
    >

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Dynamic School Colors -->
    <style>
        :root {
            --primary: {{ $settings->primary_color ?? '#0066CC' }};
            --secondary: {{ $settings->secondary_color ?? '#D62828' }};
        }

        /* =========================
           PRIMARY COLOR
        ========================== */

        .bg-primary {
            background-color: var(--primary);
        }

        .text-primary {
            color: var(--primary);
        }

        .border-primary {
            border-color: var(--primary);
        }

        /* =========================
           SECONDARY COLOR
        ========================== */

        .bg-secondary {
            background-color: var(--secondary);
        }

        .text-secondary {
            color: var(--secondary);
        }

        /* =========================
           BUTTONS
        ========================== */

        .btn-primary {
            background-color: var(--primary);
            color: #ffffff;
            padding: 0.65rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .btn-primary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .btn-secondary {
            background-color: var(--secondary);
            color: #ffffff;
            padding: 0.65rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .btn-secondary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        /* =========================
           HEADER
        ========================== */

        .sticky-nav {
            position: sticky;
            top: 0;
            z-index: 50;
            background-color: var(--primary);
        }

        /* =========================
           GLOBAL
        ========================== */

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            padding: 0;
        }

        /* Prevent accidental horizontal scrolling */
        body {
            overflow-x: hidden;
        }

        /* =========================
           MOBILE NAVIGATION
        ========================== */

        #mobile-menu {
            position: relative;
            z-index: 49;
        }
    </style>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>


<body class="font-sans antialiased bg-gray-50">


    <!-- =========================================================
         HEADER
    ========================================================== -->

    <header class="sticky-nav text-white shadow-md">

        <div class="container mx-auto px-4">

            <div class="min-h-[72px] flex items-center justify-between">


                <!-- =========================
                     LOGO
                ========================== -->

                <a
                    href="/"
                    class="flex items-center gap-3"
                >

                    @if($settings->logo)

                        <img
                            src="{{ asset('storage/' . $settings->logo) }}"
                            alt="{{ $settings->school_name ?? 'Pearl School' }}"
                            class="h-12 w-auto object-contain"
                        >

                    @else

                        <span class="text-xl md:text-2xl font-bold">
                            {{ $settings->school_name ?? 'Pearl School' }}
                        </span>

                    @endif

                </a>


                <!-- =========================
                     MOBILE MENU BUTTON
                ========================== -->

                <button
                    id="menu-toggle"
                    type="button"
                    class="md:hidden p-2 rounded-lg hover:bg-white/10 focus:outline-none"
                    aria-label="Open navigation menu"
                    aria-expanded="false"
                >

                    <svg
                        class="w-7 h-7"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >

                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16"
                        />

                    </svg>

                </button>


                <!-- =========================
                     DESKTOP NAVIGATION
                ========================== -->

                <nav
                    id="menu"
                    class="hidden md:flex items-center gap-6"
                >

                    <a
                        href="/"
                        class="hover:text-secondary transition"
                    >
                        Home
                    </a>

                    <a
                        href="/about"
                        class="hover:text-secondary transition"
                    >
                        About
                    </a>

                    <a
                        href="/admissions"
                        class="hover:text-secondary transition"
                    >
                        Admissions
                    </a>

                    <a
                        href="/academics"
                        class="hover:text-secondary transition"
                    >
                        Academics
                    </a>

                    <a
                        href="/gallery"
                        class="hover:text-secondary transition"
                    >
                        Gallery
                    </a>

                    <a
                        href="/news"
                        class="hover:text-secondary transition"
                    >
                        News
                    </a>

                    <a
                        href="/contact"
                        class="hover:text-secondary transition"
                    >
                        Contact
                    </a>


                    @auth

                        <!-- Dashboard -->

                        <a
                            href="/dashboard"
                            class="bg-secondary text-white px-4 py-2 rounded-lg font-semibold hover:opacity-90 transition"
                        >
                            Dashboard
                        </a>


                        <!-- Logout -->

                        <form
                            method="POST"
                            action="{{ route('logout') }}"
                            class="inline"
                        >

                            @csrf

                            <button
                                type="submit"
                                class="hover:text-secondary transition"
                            >
                                Logout
                            </button>

                        </form>


                    @else

                        <!-- Login -->

                        <a
                            href="{{ route('login') }}"
                            class="hover:text-secondary transition"
                        >
                            Login
                        </a>


                        <!-- Register -->

                        <a
                            href="{{ route('register') }}"
                            class="bg-secondary text-white px-4 py-2 rounded-lg font-semibold hover:opacity-90 transition"
                        >
                            Register
                        </a>

                    @endauth

                </nav>

            </div>

        </div>

    </header>


    <!-- =========================================================
         MOBILE MENU
    ========================================================== -->

    <div
        id="mobile-menu"
        class="md:hidden bg-primary text-white hidden shadow-lg"
    >

        <div class="container mx-auto px-4 py-4">


            <a
                href="/"
                class="block py-3 border-b border-white/10 hover:text-secondary transition"
            >
                Home
            </a>


            <a
                href="/about"
                class="block py-3 border-b border-white/10 hover:text-secondary transition"
            >
                About
            </a>


            <a
                href="/admissions"
                class="block py-3 border-b border-white/10 hover:text-secondary transition"
            >
                Admissions
            </a>


            <a
                href="/academics"
                class="block py-3 border-b border-white/10 hover:text-secondary transition"
            >
                Academics
            </a>


            <a
                href="/gallery"
                class="block py-3 border-b border-white/10 hover:text-secondary transition"
            >
                Gallery
            </a>


            <a
                href="/news"
                class="block py-3 border-b border-white/10 hover:text-secondary transition"
            >
                News
            </a>


            <a
                href="/contact"
                class="block py-3 border-b border-white/10 hover:text-secondary transition"
            >
                Contact
            </a>


            @auth

                <a
                    href="/dashboard"
                    class="block mt-4 py-3 bg-secondary text-white px-4 rounded-lg font-semibold text-center"
                >
                    Dashboard
                </a>


                <form
                    method="POST"
                    action="{{ route('logout') }}"
                    class="mt-2"
                >

                    @csrf

                    <button
                        type="submit"
                        class="block w-full py-3 text-left hover:text-secondary transition"
                    >
                        Logout
                    </button>

                </form>


            @else

                <a
                    href="{{ route('login') }}"
                    class="block py-3 hover:text-secondary transition"
                >
                    Login
                </a>


                <a
                    href="{{ route('register') }}"
                    class="block mt-2 py-3 bg-secondary text-white px-4 rounded-lg font-semibold text-center"
                >
                    Register
                </a>

            @endauth

        </div>

    </div>


    <!-- =========================================================
         MAIN CONTENT

         IMPORTANT:
         NO container here.

         This allows the homepage hero, statistics,
         marquee and other sections to be full width.
    ========================================================== -->

    <main class="w-full">

        @yield('content')

    </main>


    <!-- =========================================================
         FOOTER
    ========================================================== -->

    <footer class="bg-primary text-white mt-12">


        <div class="container mx-auto px-4 py-12">


            <div class="grid grid-cols-1 md:grid-cols-3 gap-10 text-center md:text-left">


                <!-- =========================
                     SCHOOL INFORMATION
                ========================== -->

                <div>

                    <h3 class="text-xl font-bold">
                        {{ $settings->school_name ?? 'Pearl School' }}
                    </h3>


                    <p class="mt-3 text-sm opacity-80 leading-relaxed">
                        {{ $settings->about_summary ?? 'Excellence in Education, Character, and Service' }}
                    </p>

                </div>


                <!-- =========================
                     CONTACT
                ========================== -->

                <div>

                    <h4 class="font-semibold text-lg">
                        Contact
                    </h4>


                    @if($settings->address)

                        <p class="text-sm mt-3 opacity-90">
                            {{ $settings->address }}
                        </p>

                    @endif


                    @if($settings->phone)

                        <p class="text-sm mt-1 opacity-90">
                            {{ $settings->phone }}
                        </p>

                    @endif


                    @if($settings->email)

                        <p class="text-sm mt-1 opacity-90">
                            {{ $settings->email }}
                        </p>

                    @endif

                </div>


                <!-- =========================
                     SOCIAL MEDIA
                ========================== -->

                <div>

                    <h4 class="font-semibold text-lg">
                        Follow Us
                    </h4>


                    <div class="flex justify-center md:justify-start flex-wrap gap-4 mt-4">


                        @if($settings->facebook)

                            <a
                                href="{{ $settings->facebook }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="hover:text-secondary transition"
                            >
                                Facebook
                            </a>

                        @endif


                        @if($settings->twitter)

                            <a
                                href="{{ $settings->twitter }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="hover:text-secondary transition"
                            >
                                Twitter
                            </a>

                        @endif


                        @if($settings->instagram)

                            <a
                                href="{{ $settings->instagram }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="hover:text-secondary transition"
                            >
                                Instagram
                            </a>

                        @endif


                        @if($settings->youtube)

                            <a
                                href="{{ $settings->youtube }}"
                                target="_blank"
                                rel="noopener noreferrer"
                                class="hover:text-secondary transition"
                            >
                                YouTube
                            </a>

                        @endif

                    </div>

                </div>

            </div>


            <!-- =========================
                 COPYRIGHT
            ========================== -->

            <div class="border-t border-white/20 mt-10 pt-5 text-center text-sm opacity-70">

                &copy;
                {{ date('Y') }}
                {{ $settings->school_name ?? 'Pearl School' }}.
                All rights reserved.

            </div>

        </div>

    </footer>


    <!-- =========================================================
         MOBILE MENU SCRIPT
    ========================================================== -->

    <script>

        document.addEventListener('DOMContentLoaded', function () {

            const menuToggle =
                document.getElementById('menu-toggle');

            const mobileMenu =
                document.getElementById('mobile-menu');


            if (menuToggle && mobileMenu) {

                menuToggle.addEventListener('click', function () {

                    mobileMenu.classList.toggle('hidden');

                    const isOpen =
                        !mobileMenu.classList.contains('hidden');

                    menuToggle.setAttribute(
                        'aria-expanded',
                        isOpen ? 'true' : 'false'
                    );

                });


                /* Close mobile menu when a link is clicked */

                mobileMenu.querySelectorAll('a').forEach(function (link) {

                    link.addEventListener('click', function () {

                        mobileMenu.classList.add('hidden');

                        menuToggle.setAttribute(
                            'aria-expanded',
                            'false'
                        );

                    });

                });

            }

        });

    </script>


    @stack('scripts')
<!-- =========================================================
     FLOATING WHATSAPP BUTTON
========================================================= -->

<a
    href="https://wa.me/2348033741768?text=Hello%21%20Welcome%20to%20Pearl%20Schools.%20Please%20how%20can%20we%20help%20you%3F"
    target="_blank"
    rel="noopener noreferrer"
    aria-label="Chat with Pearl Schools on WhatsApp"
    class="fixed bottom-6 right-6 z-50 w-14 h-14 md:w-16 md:h-16 rounded-full bg-green-500 text-white flex items-center justify-center shadow-2xl hover:bg-green-600 hover:scale-110 transition duration-300"
>

    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="currentColor"
        class="w-8 h-8 md:w-9 md:h-9"
    >
        <path
            d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.149-.669-1.611-.916-2.206-.242-.579-.487-.5-.67-.51-.173-.008-.372-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.095 3.2 5.076 4.487.709.306 1.262.489 1.694.626.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"
        />

        <path
            d="M12.004 2.003a9.96 9.96 0 0 0-8.436 15.306L2 22l4.85-1.544A9.99 9.99 0 1 0 12.004 2.003zm0 18.174a8.18 8.18 0 0 1-4.17-1.143l-.299-.178-2.878.916.931-2.807-.195-.306a8.17 8.17 0 1 1 6.611 3.518z"
        />
    </svg>

</a>
</body>
</html>