@extends('frontend.layouts.app')

@section('title', 'About Us')

@section('content')
    @php
        use Carbon\Carbon;
        use App\Helpers\Helper;
    @endphp

    {{-- Hero Section --}}
    @include('frontend.partials.hero', [
        'mainHeading' => Helper::contentText('aboutUs.experience_the_differnece'),
        'subHeading' => Helper::contentText('aboutUs.hero_subheading'),
        'breadcrumb1' => [
            'name' => __('route.home'),
            'route' => route('home'),
        ],
        'breadcrumb2' => [
            'name' => __('route.school_profile'),
            'route' => route('about-us'),
            'class' => 'text-gray-400',
        ],
        'breadcrumb3' => null,
        'breadcrumb4' => null,
    ])

    <!-- ============================= -->
    <!-- 📘 About Us Section -->
    <!-- ============================= -->
    @include('frontend.homepage.partials.about-us', ['displayButton' => false, 'isHome' => false])

    <!-- Navigation Section -->
    <div class="flex flex-col gap-10 px-4 sm:px-6 lg:px-[max(2rem,calc((100%-1280px)/2))] my-5">
        <!-- Navigation Section -->
        <section class="relative">
            <!-- Container for section header and navigation -->
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-[max(2rem,calc((100%-1280px)/2))]">
                <div class="max-w-4xl mx-auto flex flex-col items-center">
                    <!-- Section Header -->
                    <div class="text-center mb-8 md:mb-12">
                        <h3 class="text-primary text-lg sm:text-xl font-bold uppercase tracking-wide">
                            {!! Helper::content('aboutUs.know_more') !!}</h3>
                        <h2 class="text-h2 font-extrabold text-dark leading-tight">
                            {!! Helper::content('aboutUs.our_journey_throuth_the_years') !!}
                        </h2>
                    </div>
                </div>
            </div>

            <!-- Slider Content -->
            <div id="navigation-slider" class="overflow-x-auto w-full px-2 md:px-4 mt-5 scrollbar-none [&::-webkit-scrollbar]:hidden">
                <div id="navigation-slider-content"
                    class="flex gap-4 md:gap-6 whitespace-nowrap mx-auto" style="width: max-content">
                    @foreach ($cards as $card)
                        <div
                            class="navigation-review-card flex-none w-[320px] sm:w-[320px] md:w-[320px] lg:w-[360px] bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 group p-5 flex flex-col justify-between min-h-[420px]">
                            <div class="flex justify-center items-center h-[240px] w-full mb-4">
                                <img loading="lazy" decoding="async" src="{{ asset($card->image) }}" alt="Online Banking"
                                    class="h-full w-full object-cover rounded-lg" />
                            </div>
                            <h3 class="text-base sm:text-lg font-semibold text-left sm:text-center text-gray-800">
                                {{ app()->getLocale() == 'en' ? $card->name_en : $card->name_np ?? $card->name_en }}
                            </h3>
                            <p class="text-sm text-left sm:text-center text-gray-600 mt-2 line-clamp-4">
                                {{ app()->getLocale() == 'en' ? $card->short_description_en : $card->short_description_np ?? $card->short_description_en }}
                            </p>
                            <div class="mt-4 flex justify-start sm:justify-center">
                                <a href="{{ $card->link }}" target="__blank"
                                    class="px-4 py-2 rounded-full bg-primary text-white font-medium text-sm hover:opacity-90 transition">
                                    Read more
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div
                class="flex justify-center items-center gap-3 mt-8 w-fit mx-auto bg-white/80 backdrop-blur-md border border-gray-200 shadow-md rounded-full p-2">
                <button onclick="prevNavigationSlider()" aria-label="Previous slide"
                    class="group p-2 rounded-full transition-all duration-200 hover:bg-white hover:scale-105 focus:outline-hidden focus:ring-2 focus:ring-accent">
                    <svg class="w-5 h-5 text-gray-600 group-hover:text-accent" fill="none" stroke="currentColor"
                        stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
                <button onclick="nextNavigationSlider()" aria-label="Next slide"
                    class="group p-2 rounded-full transition-all duration-200 hover:bg-white hover:scale-105 focus:outline-hidden focus:ring-2 focus:ring-accent">
                    <svg class="w-5 h-5 text-gray-600 group-hover:text-accent" fill="none" stroke="currentColor"
                        stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                    </svg>
                </button>
            </div>
        </section>
    </div>
    <!-- Navigation Section -->

    <section class="bg-primary text-white body-font section-y">
        <!-- Mission Section -->
        <div class="container mx-auto flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16 px-4 md:px-8 mb-10 md:mb-16">
            <!-- Text Content -->
            <div class="flex-1 flex flex-col text-center md:text-left animate-fadeIn">
                <!-- Title -->
                <div class="flex items-center justify-center md:justify-start gap-3 mb-6">
                    <h2 class="text-h2 font-heading font-semibold text-white">
                        {!! Helper::content('aboutUs.mission') !!}
                    </h2>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-8 h-8 sm:w-10 sm:h-10"
                        fill="none">
                        <style>
                            .st0 {
                                fill: none;
                                stroke: white;
                                stroke-width: 2;
                                stroke-linecap: round;
                                stroke-linejoin: round;
                                stroke-miterlimit: 10;
                            }
                        </style>
                        <g>
                            <line class="st0" x1="16" y1="16" x2="22" y2="10"></line>
                            <polygon class="st0" points="30,6 26,6 26,2 22,6 22,10 26,10 "></polygon>
                            <circle class="st0" cx="16" cy="16" r="6"></circle>
                            <path class="st0"
                                d="M27,9c1.3,2,2,4.4,2,7c0,7.2-5.8,13-13,13S3,23.2,3,16S8.8,3,16,3c2.6,0,5,0.7,7,2"></path>
                        </g>
                    </svg>
                </div>

                <!-- Paragraph -->
                <p class="text-base sm:text-lg leading-relaxed mb-6 text-white">
                    {!! Helper::stripInlineStyle(
                        app()->getLocale() == 'en' ? $aboutUs->mission_en : $aboutUs->mission_np ?? $aboutUs->mission_en,
                    ) !!}
                </p>
            </div>

            <!-- Image -->
            <div class="flex-1 w-full">
                <img loading="lazy" decoding="async" src="https://res.cloudinary.com/dj3qdir59/image/upload/v1644157136/large_laptoptest_0d41cb2dca.jpg"
                    alt="Mission Image"
                    class="w-full h-auto object-cover rounded-2xl shadow-lg hover:scale-[1.02] transition-transform duration-300">
            </div>
        </div>

        <!-- Vision Section -->
        <div class="container mx-auto flex flex-col md:flex-row items-center gap-10 md:gap-16 px-4 md:px-8">
            <!-- Image -->
            <div class="flex-1 w-full">
                <img loading="lazy" decoding="async" src="https://res.cloudinary.com/dj3qdir59/image/upload/v1644157136/large_laptoptest_0d41cb2dca.jpg"
                    alt="Vision Image"
                    class="w-full h-auto object-cover rounded-2xl shadow-lg hover:scale-[1.02] transition-transform duration-300">
            </div>

            <!-- Text Content -->
            <div class="flex-1 flex flex-col text-center md:text-left animate-fadeIn">
                <!-- Title -->
                <div class="flex items-center justify-center md:justify-start gap-3 mb-6">
                    <h2 class="text-h2 font-heading font-semibold text-white">
                        {!! Helper::content('aboutUs.vision') !!}
                    </h2>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-45.5 -45.5 546 546" class="w-8 h-8 sm:w-10 sm:h-10"
                        fill="#ffff" stroke="#ffff" stroke-width="0.00455">
                        <g>
                            <polygon
                                points="332.707,322.265 274.968,363.853 227.495,329.659 180.027,363.854 122.29,322.262 0,454.397 455,454.397">
                            </polygon>
                            <polygon
                                points="212.5,224.789 142.82,300.078 180.027,326.881 227.493,292.686 274.968,326.882 312.175,300.081 242.5,224.801 242.5,0.603 104.54,0.603 104.54,101.86 212.5,101.86">
                            </polygon>
                        </g>
                    </svg>
                </div>

                <!-- Paragraph -->
                <p class="text-base sm:text-lg leading-relaxed mb-6 text-white">
                    {!! Helper::stripInlineStyle(
                        app()->getLocale() == 'en' ? $aboutUs->vision_en : $aboutUs->vision_np ?? $aboutUs->vision_en,
                    ) !!}
                </p>
            </div>
        </div>
    </section>


    <!-- ============================= -->
    <!-- 🕒 Chronology Section -->
    <!-- ============================= -->
    <section class="relative bg-slate-50 section-y font-inter antialiased">
        <div class="container mx-auto px-4 md:px-6 max-w-6xl">
            <div class="text-center mb-8 md:mb-12">
                <h3 class="text-primary text-lg sm:text-xl font-bold uppercase tracking-wide">
                    {!! Helper::content('aboutUs.chronology') !!}</h3>
                <h2 class="text-h2 font-extrabold text-dark leading-tight">
                    {!! Helper::content('aboutUs.chronology_heading') !!}
                </h2>
            </div>

            <div class="w-full max-w-6xl mx-auto">
                <div class="-my-6">
                    @foreach ($cronologies as $cronology)
                        <div class="relative pl-8 sm:pl-32 py-6 group">
                            <div class="font-caveat font-medium text-2xl text-primary mb-1 sm:mb-0">
                                {{ app()->getLocale() == 'en' ? $cronology->name_en : $cronology->name_np ?? $cronology->name_en }}
                            </div>

                            <div
                                class="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-secondary
                                    sm:before:ml-26 before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-primary
                                    after:border-4 after:box-content after:border-slate-50 after:rounded-full sm:after:ml-26 after:-translate-x-1/2 after:translate-y-1.5">
                                <time
                                    class="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-7 mb-3 sm:mb-0 text-white bg-secondary
                                    rounded-full">
                                    {{ app()->getLocale() == 'en' ? $cronology->date_en . ' A.D.' : $cronology->date_np . ' वि.सं.' ?? $cronology->date_en . ' A.D.' }}
                                </time>
                            </div>

                            <div class="text-slate-500">
                                {!! Helper::stripInlineStyle(
                                    app()->getLocale() == 'en' ? $cronology->description_en : $cronology->description_np ?? $cronology->description_en,
                                ) !!}
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
    </section>

    <section class="container-page section-y">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- YouTube Video -->
            <div class="w-full aspect-video rounded-xl overflow-hidden shadow-md">
                <iframe class="w-full h-full" src="{{ $setting->youtube_video }}" title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>

            <!-- Google Map -->
            <div class="w-full aspect-video rounded-xl overflow-hidden shadow-md">
                @php $mapUrl = Helper::mapUrl($setting->map ?? ''); @endphp
                @if ($mapUrl)
                <iframe src="{{ $mapUrl }}" title="Gyanodaya Bal Batika School map"
                    class="w-full h-[350px] sm:h-[400px] md:h-[450px] rounded-xl border-0 shadow-md" allowfullscreen
                    loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                @endif

            </div>
        </div>
    </section>
@endsection


@push('scripts')
    <script>
        // Navigation slider functionality
        const navigationSlider = document.getElementById('navigation-slider');

        // Scroll by one card (width + gap); the browser clamps at both ends
        function scrollNavigationSlider(direction) {
            const card = navigationSlider.querySelector('.navigation-review-card');
            if (!card) return;
            const gap = parseFloat(getComputedStyle(card.parentElement).columnGap) || 0;
            navigationSlider.scrollBy({ left: direction * (card.offsetWidth + gap), behavior: 'smooth' });
        }

        function nextNavigationSlider() {
            scrollNavigationSlider(1);
        }

        function prevNavigationSlider() {
            scrollNavigationSlider(-1);
        }
    </script>
@endpush