@extends('Frontend.Layouts.app')
@section('page_title', $title)

@section('content')
    @include('Frontend.Header.header')

    @php
        $heroTitle = $title;
        $desc = Str::limit($metaDescription, 140);
    @endphp
    @include('Frontend.Components.page-hero', ['title' => $heroTitle, 'desc' => $desc])

    <!-- sayfa icerigi -->
    <div class="rts__section about is__home__four section__padding">
        <div class="container">
            <div class="row g-4 align-items-center">
                @if($images->count() > 0)
                <div class="col-lg-5">
                    <div class="about__images">
                        <div class="image__left wow fadeInUp">
                            <img src="{{ $images[0]->local_path }}" alt="{{ $images[0]->alt_text ?? $title }}">
                        </div>
                        @if($images->count() > 1)
                        <div class="image__right wow fadeInLeft">
                            <img src="{{ $images[1]->local_path }}" alt="{{ $images[1]->alt_text ?? $title }}">
                        </div>
                        @endif
                    </div>
                </div>
                @endif
                <div class="{{ $images->count() > 0 ? 'col-lg-7' : 'col-lg-12' }}">
                    <div class="about__content">
                        <span class="h6 subtitle__icon__two d-block wow fadeInUp">{{ $site->name }}</span>
                        <h2 class="font-xl wow fadeInUp">{{ $title }}</h2>
                        @forelse($paragraphs as $p)
                            <p class="font-sm mt-20 wow fadeInUp">{{ $p }}</p>
                        @empty
                            <p class="font-sm mt-20">{{ $metaDescription }}</p>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- sayfa icerigi end -->

    @if($images->count() > 2)
    <!-- gorsel galerisi -->
    <div class="rts__section is__home__main section__padding pt-0">
        <div class="container-fluid">
            <div class="row g-3">
                @foreach($images->slice(2, 12) as $img)
                <div class="col-lg-3 col-md-4 col-6">
                    <div class="gallery__item">
                        <img src="{{ $img->local_path }}" alt="{{ $img->alt_text ?? $title }}" style="width:100%;height:220px;object-fit:cover;border-radius:6px;">
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- gorsel galerisi end -->
    @endif

    @include('Frontend.Footer.footer__common')
@endsection