{{-- Página About (referencia estructural: about.blade.php de Apex — banner +
     intro con showcase de 3 fotos + timeline vertical de valores; su sección de
     community/Apex Cares se OMITE: no hay programa equivalente que anunciar).
     Hero: heroes/service (pedido del dev). El copy es BORRADOR redactado desde
     datos que el sitio ya publica (15+ años, licencia FL, condados) — editable.
     Las fotos reusan assets IA ya validados de services/ (cero generaciones
     extra salvo el hero, resources/images/about/about-hero.jpg). El SEO lo
     resuelve PageSeoService por nombre de vista (about). --}}
@extends('layouts.landing')

@php
  // Valores del timeline (port del "Apex Standard"): título + copy + foto + link.
  // Una simple variable — mismo criterio que $serviceData en las páginas de servicio.
  $standards = [
      [
          'title' => 'Integrity',
          'body' =>
              'We treat every property like it belongs to a neighbor — because it usually does. Clear scopes, honest recommendations, and no surprises between the estimate and the final walkthrough. If a repair is the right call instead of a replacement, that is what we will tell you.',
          'image' => 'resources/images/services/paver-driveways/driveway-main.jpg',
          'alt' => 'Finished paver driveway at a South Florida home',
          'linkText' => 'Get in touch with us',
          'linkUrl' => 'contact',
      ],
      [
          'title' => 'Service',
          'body' =>
              'From the first visit to the final walkthrough, you work with people who answer the phone and follow through. We walk you through material options, keep you posted while the work happens, and review every detail with you before we call a project done.',
          'image' => 'resources/images/services/paver-patios-walkways/main.jpg',
          'alt' => 'Paver patio with outdoor furniture in a landscaped backyard',
          'linkText' => 'Request a free estimate',
          'linkUrl' => 'estimate',
      ],
      [
          'title' => 'Quality',
          'body' =>
              'The difference between an outdoor project that lasts decades and one that fails in a few seasons is in the fundamentals: base preparation, drainage, material selection suited for Florida\'s heat and rain, and finish work that holds up to daily use. That is where we put the hours.',
          'image' => 'resources/images/services/pool-tile-coping/detail-1.jpg',
          'alt' => 'Waterline tile detail at the edge of a pool',
          'linkText' => 'See our work in the gallery',
          'linkUrl' => 'gallery.index',
      ],
      [
          'title' => 'Efficiency',
          'body' =>
              'Outdoor construction disrupts your home life — so we plan it to be as short and predictable as possible. Defined scopes, realistic timelines, and crews that show up when we say they will. The goal is a finished project, not an open-ended job site in your backyard.',
          'image' => 'resources/images/services/concrete-overlay-pool-decks/renovation-wide.jpg',
          'alt' => 'Renovated pool deck at a South Florida home',
          'linkText' => 'Start your project',
          'linkUrl' => 'estimate',
      ],
  ];
@endphp

@section('hero')
  <x-heroes.service :image="Vite::asset('resources/images/about/about-hero.jpg')"
    alt="South Florida backyard built by {{ config('company.legal_name') }}"
    subtitle="We are committed to improving and beautifying the outdoor spaces where South Florida lives.">
    <x-slot:title>
      <div class="inline-block max-w-150">
        <span>About</span>
        <span class="text-muted italic whitespace-nowrap">{{ config('company.legal_name') }}</span>
      </div>
    </x-slot:title>
  </x-heroes.service>
@endsection

@section('content')
  {{-- Intro + showcase de 3 fotos (sección "Crafting Outdoor Excellence" de Apex). --}}
  <section class="bg-deep-2 py-12 lg:py-20">
    <div class="container">
      <div class="mx-auto max-w-3xl text-center">
        <span class="text-muted text-sm font-semibold uppercase tracking-[0.2em]">
          Who We Are
        </span>
        <h2 class="section-title text-fg mt-3 font-serif">
          Crafting South Florida <span class="text-muted italic">Outdoor Living</span> for Over 15 Years
        </h2>
        <p class="text-fg/70 mt-6 text-base font-light leading-relaxed">
          {{ config('company.legal_name') }} is a licensed and insured outdoor contractor serving
          Palm Beach County and Broward County. Pools, paver driveways, patios, pool decks,
          concrete overlays and artificial turf — we design and build the surfaces homeowners
          live on, with the preparation and materials Florida's climate demands. One team,
          one standard, from the first estimate to the final walkthrough.
        </p>
      </div>

      @php
        // Fuente única de las 3 fotos: alimenta la grilla (tablet+) y el swiper (móvil).
        $aboutGallery = [
            ['image' => 'resources/images/services/pool-renovation/hero-wide.jpg', 'alt' => 'Renovated pool at a South Florida home'],
            ['image' => 'resources/images/services/paver-driveways/driveway-finished-wide.jpg', 'alt' => 'Elegant paver driveway'],
            ['image' => 'resources/images/services/paver-patios-walkways/hero-wide.jpg', 'alt' => 'Travertine paver patio and walkway'],
        ];
      @endphp

      {{-- Tablet / desktop (≥768px): grilla estática. Mismo patrón que social-proof:
           el swiper de abajo cubre solo el móvil. --}}
      <div class="mt-12 hidden gap-4 md:grid md:grid-cols-3 md:gap-6">
        @foreach ($aboutGallery as $photo)
          <div class="overflow-hidden rounded-lg">
            <img src="{{ Vite::asset($photo['image']) }}" alt="{{ $photo['alt'] }}" loading="lazy" decoding="async"
              class="h-56 w-full object-cover transition duration-700 hover:scale-105 md:h-72" />
          </div>
        @endforeach
      </div>

      {{-- Móvil (<768px): swiper (port de stats-carousel.js → about-gallery-carousel.js). --}}
      <div class="mt-12 md:hidden">
        <div class="swiper" data-about-swiper>
          <div class="swiper-wrapper">
            @php
              // Swiper desactiva el loop con < 6 slides: duplicamos el set para que
              // el período sea suficiente y no se vea una foto repetida a la vez.
              $slides = count($aboutGallery) >= 6 ? $aboutGallery : array_merge($aboutGallery, $aboutGallery);
            @endphp
            @foreach ($slides as $photo)
              <div class="swiper-slide">
                <div class="overflow-hidden rounded-lg">
                  <img src="{{ Vite::asset($photo['image']) }}" alt="{{ $photo['alt'] }}" loading="lazy" decoding="async"
                    class="h-56 w-full object-cover" />
                </div>
              </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- Timeline de valores (port de "The Apex Standard": línea vertical central,
       punto por hito, texto/imagen alternando lado por índice). --}}
  <section class="bg-deep-1 py-12 lg:py-20">
    <div class="container">
      <div class="mx-auto mb-16 max-w-3xl text-center">
        <span class="text-muted text-sm font-semibold uppercase tracking-[0.2em]">
          Our Standard
        </span>
        <h2 class="section-title text-fg mt-3 font-serif">
          How We <span class="text-muted italic">Work</span>
        </h2>
        <p class="text-fg/70 mt-6 text-base font-light leading-relaxed">
          We aim to deliver the highest quality in every part of our business — these are
          the standards every project is held to, no matter its size.
        </p>
      </div>

      <div class="relative mx-auto max-w-4xl">
        {{-- Línea vertical del timeline (solo desktop; en mobile los bloques apilan). --}}
        <div class="bg-line/40 absolute left-1/2 top-0 hidden h-full w-0.5 -translate-x-1/2 md:block"
          aria-hidden="true"></div>

        @foreach ($standards as $index => $standard)
          <div class="relative mb-14 last:mb-0 md:mb-16">
            {{-- Punto del hito sobre la línea. --}}
            <div class="bg-brand border-deep-1 absolute left-1/2 top-1/3 z-10 hidden h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 md:block"
              aria-hidden="true"></div>

            <div class="flex w-full flex-col gap-6 md:flex-row md:items-center md:justify-between md:gap-20">
              <div class="{{ $index % 2 === 0 ? 'md:order-1 md:text-right' : 'md:order-3' }} flex-1 md:px-4">
                <h3 class="section-subtitle text-fg font-serif">{{ $standard['title'] }}</h3>
                <p class="text-fg/70 mt-3 text-sm font-light leading-relaxed md:text-base">
                  {{ $standard['body'] }}
                </p>
                <a href="{{ route($standard['linkUrl']) }}"
                  class="text-brand-bright mt-4 inline-block text-sm font-semibold hover:underline underline-offset-4">
                  {{ $standard['linkText'] }}
                </a>
              </div>
              <div class="{{ $index % 2 === 0 ? 'md:order-2' : 'md:order-1' }} flex-1 md:px-4">
                <img src="{{ Vite::asset($standard['image']) }}" alt="{{ $standard['alt'] }}" loading="lazy"
                  decoding="async"
                  class="aspect-video max-h-[420px] w-full rounded-lg object-cover shadow-md md:aspect-[9/7]" />
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>
@endsection