@extends('layouts.public')

@section('content')
    @include('components.public.hero-section')

    @include('components.public.stats-counter', [
        'items' => [
            ['label' => __('messages.proof_experience'), 'value' => $settings->experience_years],
            ['label' => __('messages.proof_patients'), 'value' => $settings->total_patients],
            ['label' => __('messages.proof_chambers'), 'value' => $chambers->count()],
            ['label' => __('messages.proof_surgeries'), 'value' => $settings->total_surgeries],
        ],
    ])

    @include('components.public.about-preview')
    @include('components.public.services-section')

    <section class="container-shell section-gap">
        <div class="flex items-end justify-between gap-4">
            <div>
                <div class="eyebrow">{{ __('messages.chamber_schedule') }}</div>
                <h2 class="mt-4 text-3xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">{{ __('messages.chambers_page_title') }}</h2>
            </div>
            <a href="{{ route('chambers') }}" class="text-sm font-semibold text-teal-700 dark:text-teal-300">{{ __('messages.view_all_chambers') }}</a>
        </div>
        <div class="mt-8">
            @livewire('public.chamber-schedule-display', ['chambers' => $chambers])
        </div>
    </section>

    @include('components.public.appointment-cta')

    <section class="container-shell section-gap">
        <div class="flex items-end justify-between gap-4">
            <div>
                <div class="eyebrow">{{ __('messages.patient_testimonials') }}</div>
                <h2 class="mt-4 text-3xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">{{ __('messages.testimonials_page_title') }}</h2>
            </div>
            <a href="{{ route('testimonials') }}" class="text-sm font-semibold text-teal-700 dark:text-teal-300">{{ __('common.testimonials') }}</a>
        </div>
        <div class="mt-8">
            @livewire('public.testimonial-carousel', ['testimonials' => $testimonials])
        </div>
    </section>

    <section class="container-shell section-gap">
        <div class="mb-10">
            <div class="eyebrow">{{ __('messages.gallery_title') }}</div>
            <h2 class="mt-4 text-3xl font-semibold tracking-[-0.04em] text-slate-950 dark:text-white">{{ __('messages.gallery_page_title') }}</h2>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            @foreach($galleryItems as $item)
                <article class="premium-card p-4">
                    @if($item->image)
                        @php
                            $image = \Illuminate\Support\Str::startsWith($item->image, ['http://', 'https://', '/'])
                                ? $item->image
                                : asset('storage/'.$item->image);
                        @endphp
                        <img src="{{ $image }}" alt="{{ $item->localized_title }}" class="aspect-[4/3] w-full rounded-[20px] object-cover">
                    @else
                        <div class="aspect-[4/3] rounded-[20px] bg-gradient-to-br from-teal-100 to-sky-100 dark:from-teal-950/50 dark:to-sky-950/50"></div>
                    @endif
                    <h3 class="mt-4 text-lg font-semibold text-slate-950 dark:text-white">{{ $item->localized_title }}</h3>
                </article>
            @endforeach
        </div>
    </section>

    <section class="container-shell section-gap">
        @include('components.public.google-map', [
            'chambers' => $chambers,
            'title' => __('messages.explore_chambers'),
            'description' => __('messages.direction_hint'),
        ])
    </section>
@endsection