{{-- /outdoor-design-ai — AI Outdoor Designer. La página de contenido (SEO) ES la
     página de la tool: acá vive el contenido indexable + el contrato de montaje;
     la parte interactiva (isla de la tool) la monta app.js con un import()
     dinámico condicionado a [data-ai-designer] — no hay JS de la tool en esta vista.

     Contrato con la isla (acordado con Tools):
      - <div id="ai-designer" data-ai-designer>: contenedor vacío, fuera del hero. Lleva
        `data-estimate-url` (el CTA del resultado): el JS no arma URLs.
      - <script type="application/json" id="ai-designer-data">: el catálogo público
        (CatalogSync::publicPayload() → version, catalog, texts).
      - Botones [data-ai-designer-start] (+ data-ai-designer-service opcional), vía
        <x-ai-designer.start>.
     Sin catálogo sincronizado ($aiCatalog null) el contenido se ve igual, pero sin
     contenedor/JSON y con los botones convertidos en links a /estimate.

     COPY: la compañía NO construye piscinas — las opciones de pool son para
     RENOVAR una existente. El resultado es una visualización de concepto, no un
     presupuesto. La tool no pide datos personales. SEO en PageSeoService
     (vista `ai-designer`) + FAQs en PageFaqMap. --}}
@extends('layouts.landing')

@php
  $aiName = \App\Support\AiDesignerShowcase::AI_NAME;
  $aiCatalog = \App\Services\Tools\CatalogSync::publicPayload();
  $hasTool = $aiCatalog !== null;

  $catalogServices = collect(\App\Support\AiDesignerShowcase::services($aiCatalog))->keyBy('service');
  $finishGroups = \App\Support\AiDesignerShowcase::finishes($aiCatalog);

  // Chip de "material elegido" del How It Works: la primera opción con foto del
  // catálogo (hoy, Travertine de paver). Sin catálogo, el componente usa un degradé.
  $howItWorksSwatch = $finishGroups[0]['options'][0] ?? null;

  // Lo que se puede diseñar. Copy estático (indexable aunque no haya catálogo),
  // keyed por el código de servicio del catálogo de Tools: de ahí sale la foto
  // (si hay catálogo) y el data-ai-designer-service del botón. `page` enlaza a la
  // página de servicio equivalente (interlinking).
  $designServices = [
      'paver' => [
          'title' => 'Paver Patios, Driveways & Pool Decks',
          'body' =>
              'Try travertine, brick, porcelain or marble pavers, then fine-tune the color, size, pattern and border.',
          'page' => \App\Enums\ServiceItem::PaverPatiosWalkways,
      ],
      'artificial_turf' => [
          'title' => 'Artificial Turf',
          'body' =>
              'See a lush, low-maintenance lawn in place of patchy grass, or add turf strips between pavers for a modern look that stays green all year.',
          'page' => \App\Enums\ServiceItem::ArtificialTurf,
      ],
      'concrete_pour' => [
          'title' => 'New Concrete',
          'body' =>
              'Preview a fresh concrete driveway, patio or walkway, with a clean slab or a layout broken up by turf strips.',
          'page' => null,
      ],
      'concrete_overlay' => [
          'title' => 'Concrete Overlays',
          'body' =>
              'Give tired concrete a stone-look finish without tearing it out. Pick the stone shape, color and grout and see it on your own surfaces.',
          'page' => \App\Enums\ServiceItem::ConcreteOverlayPatiosWalkways,
      ],
      'pool_renovation' => [
          'title' => 'Pool Renovation',
          'body' =>
              'Already have a pool? Preview a new plaster finish, waterline tile, sun shelf, spa or water feature on the pool you own today.',
          'page' => \App\Enums\ServiceItem::PoolRenovation,
      ],
  ];

  $steps = [
      [
          'n' => '01',
          'icon' => 'image-up',
          'title' => 'Upload a Photo',
          'body' => 'Snap or upload a photo of your backyard, driveway or front yard. Any phone photo works.',
      ],
      [
          'n' => '02',
          'icon' => 'scan-line',
          'title' => "{$aiName} Spots Your Areas",
          'body' => "The {$aiName} finds your patio, driveway, walkway, entryway, pool deck and pool. Adjust them if needed.",
      ],
      [
          'n' => '03',
          'icon' => 'sliders-horizontal',
          'title' => 'Pick Your Upgrades',
          'body' => 'Choose pavers, turf, concrete or a pool renovation for each area, plus materials and colors.',
      ],
      [
          'n' => '04',
          'icon' => 'wand-sparkles',
          'title' => 'See Your New Outdoor Project',
          'body' => 'Get your own photo redesigned, side by side with the original, ready to download and share.',
      ],
  ];

  $goodToKnow = [
      'Free to use — no sign-up required',
      'Works on your own photo: same house, same angle, same light',
      'Mark spots on the photo and add a note to guide the design',
      'Pool options are for renovating the pool you already have',
      'A concept preview, not a quote — final materials, colors and sizes are confirmed on-site',
  ];
@endphp

@section('hero')
  <x-heroes.service
    :image="Vite::asset('resources/images/ai-designer/ai-designer-hero.jpg')"
    alt="South Florida backyard with a travertine paver pool deck and a renovated pool at sunset"
    subtitle="See new pavers, turf or a renovated pool on a photo of your own home."
  >
    {{-- Título en dos tonos + max-w-150, como about y las páginas de servicio. --}}
    <x-slot:title>
      <div class="inline-block max-w-150">
        <span>Design Your Dream Outdoor Space</span>
        <span class="text-muted italic whitespace-nowrap">Fast and Easy</span>
      </div>
    </x-slot:title>

    <x-slot:actions>
      <x-ai-designer.start :available="$hasTool" />
      @if ($hasTool)
        <a href="{{ route('estimate') }}" class="text-fg flex items-center gap-2 transition-colors hover:text-honey">
          <em>Or</em>
          <span>get a free estimate</span>
        </a>
      @endif
    </x-slot:actions>
  </x-heroes.service>
@endsection

@section('content')
  {{-- Punto de montaje de la tool: vacío a propósito (lo llena la isla). Solo
       existe con catálogo; sin él, app.js no carga nada de la tool. Todos los
       botones de inicio llevan al arranque, en la ventana de How it Works; con las
       áreas listas, la isla muestra este contenedor en el lugar de esa sección
       ([data-ai-designer-host], ver ai-designer/placement.js) y la oculta.
       `data-at-top` (si la anfitriona fuera el hero) le da el margen del header. --}}
  @if ($hasTool)
    <div
      id="ai-designer"
      data-ai-designer
      hidden
      data-estimate-url="{{ route('estimate') }}"
      data-logo-url="{{ Vite::asset('resources/images/logo-pools.svg') }}"
      class="data-at-top:mt-(--nav-h)"
    ></div>
    <script type="application/json" id="ai-designer-data">@json($aiCatalog)</script>
  @endif

  {{-- Cómo funciona: los 4 pasos reales de la tool + el lienzo que simula el
       análisis de la foto (la misma del hero, ya cacheada). --}}
  <x-ai-designer.how-it-works
    :steps="$steps"
    :image="Vite::asset('resources/images/ai-designer/ai-designer-hero.jpg')"
    :swatch="$howItWorksSwatch"
  >
    <x-slot:actions>
      <x-ai-designer.start :available="$hasTool" />
    </x-slot:actions>
  </x-ai-designer.how-it-works>

  {{-- Qué se puede diseñar: un card por servicio, en carrusel (Swiper, ver
       ai-designer-services-carousel.js). 1/2/3/4 visibles por breakpoint, con el
       borde de la card vecina asomando a cada lado (.ai-services-carousel). --}}
  <section class="bg-surface py-12 lg:py-20">
    <div class="container">
      <div class="flex flex-wrap items-end justify-between gap-6">
        <div>
          <x-home.section-header eyebrow="What You Can Design" lead="Pavers, turf, concrete" emph="and pool renovations." />
          <p class="text-muted mt-6 max-w-2xl text-base font-light leading-relaxed">
            The same upgrades our crews install across Palm Beach and Broward County, previewed on your own home. Pick
            one area or redesign them all.
          </p>
        </div>

        <div class="hidden gap-3 sm:flex">
          <button type="button" data-ai-services-prev aria-label="Previous services"
            class="border-line text-fg hover:border-brand hover:text-brand-light [&.is-disabled]:pointer-events-none [&.is-disabled]:opacity-35 flex size-12 cursor-pointer items-center justify-center rounded-full border transition-colors">
            <x-lucide-chevron-left class="size-5" />
          </button>
          <button type="button" data-ai-services-next aria-label="Next services"
            class="border-line text-fg hover:border-brand hover:text-brand-light [&.is-disabled]:pointer-events-none [&.is-disabled]:opacity-35 flex size-12 cursor-pointer items-center justify-center rounded-full border transition-colors">
            <x-lucide-chevron-right class="size-5" />
          </button>
        </div>
      </div>

      <div class="ai-services-carousel mt-12" data-ai-services-carousel>
        <div class="swiper">
          <ul class="swiper-wrapper">
            @foreach ($designServices as $code => $service)
              @php($photo = $catalogServices->get($code)['image'] ?? null)
              <li class="swiper-slide h-auto!">
                <article class="border-line/60 bg-deep-2/40 flex h-full flex-col overflow-hidden rounded-2xl border">
                  @if ($photo)
                    <img
                      src="{{ $photo }}"
                      alt="{{ $service['title'] }} design example"
                      class="aspect-4/3 w-full object-cover"
                      loading="lazy"
                      decoding="async"
                    />
                  @endif
                  <div class="flex flex-1 flex-col p-6">
                    <h3 class="card-title text-fg font-serif">{{ $service['title'] }}</h3>
                    <p class="text-muted mt-3 flex-1 text-sm leading-relaxed">{{ $service['body'] }}</p>
                    {{-- Pie SIEMPRE apilado (acción arriba, link abajo) y con las
                         dos líneas en todas las cards: el servicio sin página
                         propia (concrete_pour) linkea al estimate. --}}
                    <div class="mt-6 flex flex-col items-start gap-3">
                      @if ($hasTool)
                        <button
                          type="button"
                          data-ai-designer-start
                          data-ai-designer-service="{{ $code }}"
                          class="text-brand-light hover:text-honey flex cursor-pointer items-center gap-1.5 text-sm font-semibold uppercase tracking-wide transition-colors"
                        >
                          Try it <x-lucide-arrow-right class="h-4 w-4" />
                        </button>
                      @endif
                      @if ($service['page'])
                        <a href="{{ $service['page']->url() }}" class="text-muted hover:text-fg text-sm underline underline-offset-4 transition-colors">
                          About {{ strtolower($service['page']->label()) }}
                        </a>
                      @else
                        <a href="{{ route('estimate') }}" class="text-muted hover:text-fg text-sm underline underline-offset-4 transition-colors">
                          Get a free estimate
                        </a>
                      @endif
                    </div>
                  </div>
                </article>
              </li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
  </section>

  {{-- Materiales y acabados: las opciones con foto del catálogo (las mismas que
       elige el visitante dentro de la tool). Sin catálogo, no hay sección. --}}
  @if ($finishGroups !== [])
    <section class="bg-surface-2 py-12 lg:py-20">
      <div class="container">
        <x-home.section-header eyebrow="Materials & Finishes" lead="Real options," emph="not guesswork." />
        <p class="text-muted mt-6 max-w-2xl text-base font-light leading-relaxed">
          Every design uses materials and finishes from the same line-up we install, so what you preview is what you
          can actually order.
        </p>

        @foreach ($finishGroups as $group)
          <div class="mt-12">
            <h3 class="section-subtitle text-fg font-serif">
              {{ $group['title'] }}
              <span class="text-muted text-base italic">— {{ $group['service'] }}</span>
            </h3>
            <ul class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7">
              @foreach ($group['options'] as $option)
                <li>
                  <figure>
                    <img
                      src="{{ $option['image'] }}"
                      alt="{{ $option['label'] }} — {{ strtolower($group['title']) }}"
                      class="aspect-square w-full rounded-xl object-cover"
                      loading="lazy"
                      decoding="async"
                    />
                    <figcaption class="mt-2">
                      <span class="text-fg block text-sm font-semibold">{{ $option['label'] }}</span>
                      @if ($option['description'])
                        <span class="text-muted block text-xs">{{ $option['description'] }}</span>
                      @endif
                    </figcaption>
                  </figure>
                </li>
              @endforeach
            </ul>
          </div>
        @endforeach
      </div>
    </section>
  @endif

  {{-- Lo que hay que saber antes de usarla + cierre con el segundo trigger. --}}
  <section class="bg-surface py-12 lg:py-20">
    <div class="container grid grid-cols-1 gap-12 lg:grid-cols-2 lg:items-center">
      <div>
        <x-home.section-header eyebrow="Good To Know" lead="See it first," emph="then build it right." />
        <p class="text-muted mt-6 max-w-xl text-base font-light leading-relaxed">
          Our {{ $aiName }} Outdoor Designer helps you picture the project before you talk numbers. When you like what you see, our team
          visits your home, measures everything and gives you a written, itemized quote — free and with no obligation.
        </p>
        <div class="mt-10 flex flex-wrap items-center gap-4">
          <x-ai-designer.start :available="$hasTool" label="Design My Backyard" />
          @if ($hasTool)
            <a href="{{ route('estimate') }}" class="btn btn-muted">Get A Free Estimate</a>
          @endif
        </div>
      </div>

      <x-home.checklist-grid :items="$goodToKnow" />
    </div>
  </section>
@endsection

@section('pre-footer')
  <x-seo.faq-section :items="$seoPage['faqs'] ?? []" />
@endsection