@extends('frontend::layouts.master')

@section('content')
    @php
        $aboutPage = $data['about']['page'] ?? [];
        $aboutHeroImage = !empty(trim((string) ($aboutPage['image'] ?? ''))) ? $aboutPage['image'] : asset('modules/frontend/images/bg/bg-image-section-01.png');
        $heroButtonUrl = trim((string) ($aboutPage['link'] ?? ''));
        $showHeroButton = $heroButtonUrl !== '';
        $heroButtonOpenInNewTab = $showHeroButton && (str_starts_with($heroButtonUrl, 'http://') || str_starts_with($heroButtonUrl, 'https://'));
    @endphp
    <x-frontend::page-hero title="{{ $aboutPage['name'] ?? '' }}" :image="$aboutHeroImage" :showButton="$showHeroButton" buttonLabel="Request A Quote" buttonUrl="{{ $heroButtonUrl }}" :buttonOpenInNewTab="$heroButtonOpenInNewTab">
        <p>{!! _html($aboutPage['desc'] ?? '') !!}</p>
    </x-frontend::page-hero>

    <!-- Services Section -->
    @php
        $data['service'] = $data['about'] ?? null;
        $data['service']['page']['name'] = null;
    @endphp

    @include('frontend::components.services-section')

    <!-- Our Family Section -->
    <section class="py-12 lg:py-16 px-4 sm:px-6 lg:px-8 relative">

        <!-- Background graphic image -->
        <div class="absolute inset-0 w-full h-full pointer-events-none opacity-80">
            <img src="{{ asset('modules/frontend/images/bg/bg-graphic-02.png') }}" alt="L&E Beyond background graphic" class="w-full h-full object-cover object-center">
        </div>

        <!-- Overlay Gradient -->
        <div class="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black">
        </div>

        @if (!empty($data['family']['page']) && $data['family']['page']['status'] == 1)
            <div class="max-w-7xl mx-auto relative overflow-hidden rounded-3xl p-8 md:p-10 lg:p-12">

                <div class="relative z-10">
                    <h2 class="text-white text-3xl md:text-4xl font-bold mb-4">{{ $data['family']['page']['name'] ?? '' }}</h2>
                    <p class="text-white text-sm md:text-base opacity-90 leading-relaxed max-w-5xl mb-8 md:mb-10">
                        {!! _html($data['family']['page']['desc'] ?? '') !!}
                    </p>
                    @php
                        $familyGallery = $data['family']['page']['gallery'] ?? [];
                    @endphp
                    <!-- Image grid: family gallery from CMS -->
                    <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-3 md:gap-4">
                        @foreach ($familyGallery as $g)
                            @if (is_array($g) && !empty($g['image']))
                                <div class="bg-gray-100 rounded-xl aspect-video overflow-hidden">
                                    <img src="{{ check_file($g['image']) }}" alt="{{ $data['family']['page']['name'] ?? 'Our Family' }}" class="w-full h-full object-cover object-center">
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        @endif
    </section>
@endsection