@section('seo_section')
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery | {{ \App\Models\InfoSection::pluck('site_title')->first() }}</title>
    <meta name="robots" content="index, follow">
    <meta name="description"
        content="Explore our gallery showcasing the best of our work, including images of completed projects and customer experiences at {{ \App\Models\InfoSection::pluck('site_title')->first() }}.">
    <meta name="keywords"
        content="Gallery, Projects, Portfolio, Completed Work, Customer Experiences, {{ \App\Models\InfoSection::pluck('site_title')->first() }}">
    <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large">
    <link rel="canonical" href="{{ route('gallery') }}">
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Gallery | {{ \App\Models\InfoSection::pluck('site_title')->first() }}">
    <meta property="og:description"
        content="Explore our gallery showcasing the best of our work, including images of completed projects and customer experiences at {{ \App\Models\InfoSection::pluck('site_title')->first() }}.">
    <meta property="og:url" content="{{ route('gallery') }}">
    <meta property="og:site_name" content="{{ \App\Models\InfoSection::pluck('site_title')->first() }}">
    <meta property="og:updated_time" content="{{ now() }}">
    <meta property="og:image" content="{{ Storage::disk('public')->url('frontend/logo/' . $infoSection->logo) }}">
    <meta property="og:image:secure_url"
        content="{{ Storage::disk('public')->url('frontend/logo/' . $infoSection->logo) }}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:image:alt" content="{{ \App\Models\InfoSection::pluck('site_title')->first() }} Logo">
    <meta property="og:image:type" content="image/jpeg">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Gallery | {{ \App\Models\InfoSection::pluck('site_title')->first() }}">
    <meta name="twitter:description"
        content="Explore our gallery showcasing the best of our work, including images of completed projects and customer experiences at {{ \App\Models\InfoSection::pluck('site_title')->first() }}.">
    <meta name="twitter:image" content="{{ Storage::disk('public')->url('frontend/logo/' . $infoSection->logo) }}">
    <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "ImageGallery",
    "name": "Gallery | {{\App\Models\InfoSection::pluck('site_title')->first()}}",
    "url": "{{ route('gallery') }}",
    "image": {
        "@type": "ImageObject",
        "url": "{{ Storage::disk('public')->url('frontend/logo/'.$infoSection->logo) }}",
        "height": "630",
        "width": "1200"
    },
    "description": "Explore our gallery showcasing the best of our work, including images of completed projects and customer experiences at {{\App\Models\InfoSection::pluck('site_title')->first()}}."
}
</script>
@endsection

@extends('frontend.layout.main')
<style>
    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .gallery-item:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

    .gallery-image {
        display: block;
        width: 100%;
        height: 300px;
        border-radius: 10px;
    }

    .gallery-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease;
        border-radius: 10px;
    }

    .gallery-item:hover .gallery-overlay {
        opacity: 1;
    }

    .gallery-text {
        color: #fff;
        font-size: 1.25rem;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
</style>

@section('main-section')
    {{-- Preloader --}}
    <x-frontend.preloader></x-frontend.preloader>

    <div class="sub-banner-section-outer">
        <!-- MAIN HEADER -->
        <x-frontend.navbar></x-frontend.navbar>
        <!-- BANNER -->
        <x-frontend.bread-crumb>
            <x-slot name="image">images/br-bg-1.jpg</x-slot>
            <x-slot name="title">Gallery</x-slot>
            <li class="position-relative fs-xx-14 d-inline-block">Gallery</li </x-frontend.bread-crumb>
    </div>

    <section class="about-service-section">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                    <div class="row g-3">
                        <!-- Gallery Item -->
                        @foreach ($gallaries as $gallery)
                            <div class="col-sm-6 col-md-4 col-lg-3 mt-3">
                                <div class="gallery-item">
                                    <img src='{{ // Storage::disk('public')->url('frontend/home/gallery/' .
                                        asset('storage/frontend/home/gallery/' . $gallery->image) }}'
                                        class="img-fluid gallery-image" alt="Gallery Image 1">
                                    <div class="gallery-overlay">
                                        <div class="gallery-text">{{ $gallery->heading }}</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    <x-frontend.footer></x-frontend.footer>
@endsection