@extends('frontend.layouts.app')
@section('title', 'Quick Links Title')
@section('meta', 'Quick Links Meta Description')
@section('content')

    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl font-extrabold text-white">
                        {{ __('quick-links.quick_links') }}
                    </h3>

                    <!-- Breadcrumb -->
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">
                            {{ __('quick-links.home') }}
                        </a>
                        <span class="text-white font-bold">></span>
                        <span class="text-white font-bold">
                            {{ __('quick-links.quick_links') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Content Section -->
    <section class="min-h-[60vh] flex flex-col">
        <div class="mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10">

            <!-- Subtitle -->
            <p
                class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider
                   text-primary uppercase rounded-full bg-teal-accent-400">
                {{ __('quick-links.navigate_fast') }}
            </p>

            <!-- Main Title -->
            <h2 class="mb-6 font-sans text-2xl lg:text-3xl font-extrabold text-primary">
                {{ __('quick-links.quick_links') }}
            </h2>

            <!-- Description -->
            <p class="p-2 text-base lg:text-lg text-gray-600 font-medium mx-auto">
                {{ __('quick-links.quick_links_description') }}
            </p>
        </div>

        <!-- Quick Links Grid -->
        <div class="mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10 px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 lg:gap-10 text-center mx-auto ">

                @foreach ($quickLinks ?? [] as $link)
                    <a href="{{ $link['url'] }}" target="_blank" class="block">
                        <div
                            class="px-4 py-4 rounded-t-xl text-xl font-semibold border-b-4 border-primary
                           bg-white shadow-md hover:shadow-lg cursor-pointer transition-transform
                           duration-300 ease-in-out hover:bg-gradient-to-r from-amber-50 to-amber-100
                           hover:-translate-y-1 hover:border-gray-800">
                            {{ $link['title'] }}
                        </div>
                    </a>
                @endforeach

                <!-- If you want static links, keep these -->
                <a href="https://example.com" target="_blank" class="block">
                    <div
                            class="px-4 py-4 rounded-t-xl text-base sm:text-lg md:text-xl font-semibold border-b-4 border-primary
                                   bg-white shadow-md hover:shadow-lg cursor-pointer
                                   transition duration-300 hover:bg-gradient-to-r from-amber-50 to-amber-100
                                   hover:-translate-y-1 hover:border-gray-800">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. A, vel. 1 </div>
                </a>

                <a href="https://example.com" target="_blank" class="block">
                    <div
                            class="px-4 py-4 rounded-t-xl text-base sm:text-lg md:text-xl font-semibold border-b-4 border-primary
                                   bg-white shadow-md hover:shadow-lg cursor-pointer
                                   transition duration-300 hover:bg-gradient-to-r from-amber-50 to-amber-100
                                   hover:-translate-y-1 hover:border-gray-800">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. A, vel. 2
                    </div>
                </a>
                <a href="https://example.com" target="_blank" class="block">
                    <div
                            class="px-4 py-4 rounded-t-xl text-base sm:text-lg md:text-xl font-semibold border-b-4 border-primary
                                   bg-white shadow-md hover:shadow-lg cursor-pointer
                                   transition duration-300 hover:bg-gradient-to-r from-amber-50 to-amber-100
                                   hover:-translate-y-1 hover:border-gray-800">
                        Lorem ipsum, dolor sit amet consectetur adipisicing elit. A, vel. 2
                    </div>
                </a>
            </div>
        </div>
    </section>
@endsection


@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>

    <script>
        function toggleDescription() {
            const shortDesc = document.getElementById('short-description');
            const fullDesc = document.getElementById('full-description');
            const readMoreBtn = document.getElementById('read-more-btn');

            const isHidden = shortDesc.classList.contains('hidden');

            shortDesc.classList.toggle('hidden', !isHidden);
            fullDesc.classList.toggle('hidden', isHidden);

            readMoreBtn.textContent = isHidden ? 'Read Less' : 'Read More';
        }
    </script>
@endpush