@extends('layouts.webpage.main_two')

@section('page-title', 'Gallery')

@section('content')


<section class="hero-section about-ban" style="background-image: url('{{ asset('uploads/hero_gallery/'.$hero_gallery->image_url) }}')">
    <div class="hero-content about-inner">
        <!-- <h6 class="about-title"><img src="{{asset('assets/img/prod-banner.svg')}}">Gallery</h6> -->
        <h1 class="service-title">{{$hero_gallery->title ?? 'Gallery'}}</h1>
        <a href="{{ route('request') }}"><button class="btn main-butn mt-2"> Get a Quote<i class="bi bi-chevron-right"></i></button></a>
        <!-- <a href="#" class="btn main-butn mt-4">View Projects</a> -->
    </div>
</section>


<section class="control">
    <div class="container text-center pt-5">

        @foreach($galleries as $section)
        @php
        $sectionTitle = str_replace('_', ' ', ucfirst($section->section_name));
        $images = json_decode($section->images, true);
        @endphp

        @if(!empty($images))
        <div class="my-5">
            <h2 class="main-title">{{ $sectionTitle }}</h2>
            <p class="main-para">
                @if($section->section_name == 'engineering_motion')
                Where ideas become reality — captured with our people, processes, and purpose.
                @elseif($section->section_name == 'industry_leaders')
                We build more than structures — we build strong, lasting relationships.
                @elseif($section->section_name == 'site_images')
                Real progress on the ground — showcasing our sites, scale, and craftsmanship.
                @else
                Explore the visual highlights from our {{ strtolower($sectionTitle) }} section.
                @endif
            </p>
            {{-- Section Layout --}}
            <div class="row justify-content-center">
                <div class="owl-carousel owl-theme gal">
                    @foreach($images as $img)
                    <div class="gal-img">
                        <img
                            src="{{ asset('uploads/page_gallery/' . $img) }}"
                            alt="{{ $sectionTitle }}"
                            class="img-fluid rounded shadow-sm gallery-dynamic-img glightbox"
                            data-title="">
                    </div>
                    @endforeach
                </div>
            </div>


            @else
            <p class="text-center text-muted">No images available for this section.</p>
            @endif
            @endforeach
        </div>
    </div>
</section>



@endsection