@props([
  'steps' => [],
  'image',
  'available' => false,
  'swatch' => null,
])

{{-- How It Works del diseñador con IA. A propósito DISTINTO del how-it-works
     del resto del sitio: un "lienzo" que simula lo que hace la tool con la foto
     (escaneo + áreas detectadas + material elegido) al lado de un stepper
     vertical. Todo es decorativo y estático (CSS, sin JS): la tool real la monta
     la isla de Tools. Estilos propios en app.css (.ai-backdrop —el fondo, que
     comparte con el survey de la tool—, .ai-scan-line, .ai-area); respetan
     prefers-reduced-motion.

     $swatch (opcional): ['image' => url, 'label' => nombre] de una opción real
     del catálogo para el chip de "material elegido". Sin catálogo, el chip va
     con un degradé neutro.

     El arranque de la tool vive en ESTA ventana (decisión de la owner): todos los
     botones de inicio traen la página hasta acá, el mockup (`.ai-mockup`: la foto,
     el escaneo, las áreas y los dos chips) se oculta y la isla dibuja en los
     `data-ai-start-*` la carga de la foto, el giro, el análisis y los badges de
     las áreas (StartWindow.jsx). `data-ai-phase` en la sección es la única fuente
     de «se arrancó» (ai-designer/phase.js): en `init` el mockup se ve como siempre
     (y sin JS, también); en cualquier otra fase, la isla. `data-ai-window` dice la
     etapa de la ventana. Cuando las áreas están listas, el survey toma el lugar de
     esta sección ([data-ai-designer-host]). --}}
@php
  // Áreas marcadas sobre la foto de ejemplo (la del hero), en % de la imagen.
  // Los nombres son áreas reales de la tool; las posiciones calzan con la foto.
  $areas = [
      ['label' => 'Pool deck', 'service' => 'Pavers', 'box' => 'left-[2%] top-[58%] w-[40%] h-[38%]', 'delay' => '0.4s'],
      ['label' => 'Walkway', 'service' => 'Pavers', 'box' => 'left-[38%] top-[50%] w-[26%] h-[9%]', 'delay' => '1.1s'],
      ['label' => 'Pool', 'service' => 'Renovation', 'box' => 'left-[45%] top-[60%] w-[53%] h-[37%]', 'delay' => '1.8s'],
  ];
@endphp

<section data-ai-designer-host data-ai-how data-ai-phase="init" class="relative isolate overflow-hidden py-16 lg:py-28">
  <div class="ai-backdrop" aria-hidden="true"></div>

  <div class="container grid grid-cols-1 items-center gap-14 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)] lg:gap-16">
    {{-- Texto + stepper --}}
    <div>
      <x-home.section-header eyebrow="How It Works" lead="From photo to" emph="dream project." />
      <p class="text-muted mt-6 max-w-lg text-base font-light leading-relaxed">
        Four steps, one photo. The {{ \App\Support\AiDesignerShowcase::AI_NAME }} reads your space, you make the calls, and your own home comes back redesigned.
      </p>

      <ol class="relative mt-10 space-y-8">
        {{-- Línea conectora: degradé de marca que se apaga hacia el último paso. --}}
        <span
          class="from-brand via-brand/40 absolute left-6 top-6 bottom-6 w-px bg-linear-to-b to-transparent"
          aria-hidden="true"
        ></span>

        @foreach ($steps as $step)
          <li class="relative flex gap-5">
            <span
              class="border-brand/40 bg-surface-3 text-brand-light shadow-brand/20 relative z-10 flex size-12 flex-none items-center justify-center rounded-2xl border shadow-lg"
            >
              <x-dynamic-component :component="'lucide-' . $step['icon']" class="size-5" />
            </span>
            <div class="pt-1">
              <p class="text-brand-light text-xs font-semibold uppercase tracking-[0.2em]">Step {{ $step['n'] }}</p>
              <h3 class="text-fg mt-1 text-lg font-semibold">{{ $step['title'] }}</h3>
              <p class="text-muted mt-1 max-w-md text-sm leading-relaxed">{{ $step['body'] }}</p>
            </div>
          </li>
        @endforeach
      </ol>

      {{-- Con la tool arrancada en la ventana, estos botones se van (app.css). --}}
      @isset($actions)
        <div class="mt-10 flex flex-wrap items-center gap-4" data-ai-how-actions>
          {{ $actions }}
        </div>
      @endisset
    </div>

    {{-- Lienzo: la foto "siendo analizada". Decorativo (aria-hidden) hasta que la
         isla arranca acá y lo vuelve interactivo. Los botones del arranque van
         FUERA de la ventana (debajo), así los badges colgantes siguen anclados a
         ella. Desde lg cuelgan en absoluto: la columna se centra contra el texto
         y, si ocuparan lugar, la ventana se movería entre el mockup y cada etapa
         del arranque. Abajo de lg la columna va apilada y la ventana no depende
         de lo que tenga debajo. --}}
    <div class="relative">
    <div class="relative" aria-hidden="true" data-ai-start-column>
      <div class="border-fg/10 bg-deep-1/70 rounded-3xl border p-2.5 shadow-2xl shadow-black/40 backdrop-blur sm:p-3">
        {{-- Barra superior estilo app --}}
        <div class="flex items-center gap-3 px-2 pb-2.5 pt-1">
          <span class="flex gap-1.5">
            <span class="bg-fg/20 size-2.5 rounded-full"></span>
            <span class="bg-fg/20 size-2.5 rounded-full"></span>
            <span class="bg-fg/20 size-2.5 rounded-full"></span>
          </span>
          <span class="text-muted-2 truncate text-xs" data-ai-start-filename>my-backyard.jpg</span>
          <span data-ai-start-pill class="bg-brand/15 text-brand-light ml-auto flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[0.65rem] font-semibold uppercase tracking-wider">
            <span class="bg-brand-light size-1.5 rounded-full motion-safe:animate-pulse"></span>
            {{ \App\Support\AiDesignerShowcase::AI_NAME }} analyzing
          </span>
        </div>

        <div class="relative aspect-16/10 overflow-hidden rounded-2xl" data-ai-start-frame>
          <img src="{{ $image }}" alt="" class="ai-mockup absolute inset-0 h-full w-full object-cover" loading="lazy" decoding="async" />
          <div class="ai-mockup bg-deep-3/25 absolute inset-0"></div>
          <div class="ai-mockup ai-scan-line"></div>

          {{-- La carga de la foto y su vista (la dibuja la isla). --}}
          <div data-ai-start-stage class="absolute inset-0 hidden"></div>

          @foreach ($areas as $area)
            <div class="ai-mockup ai-area {{ $area['box'] }} absolute" style="--ai-delay: {{ $area['delay'] }}">
              <div class="border-brand-bright/90 bg-brand/10 h-full w-full rounded-lg border-2 border-dashed"></div>
              <span
                class="bg-deep-3/85 text-fg absolute -top-3 left-2 flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-1 text-[0.65rem] font-semibold shadow-md backdrop-blur sm:text-xs"
              >
                <span class="bg-brand-light size-1.5 rounded-full"></span>
                {{ $area['label'] }}
                <span class="text-muted-2 hidden font-normal sm:inline">· {{ $area['service'] }}</span>
              </span>
            </div>
          @endforeach
        </div>
      </div>

      {{-- Los badges del arranque (áreas detectadas y una por área): la isla. --}}
      <div data-ai-start-chips class="contents"></div>

      {{-- Chip flotante: áreas detectadas --}}
      <div
        class="ai-mockup border-fg/10 bg-deep-2/90 absolute -bottom-6 left-4 flex items-center gap-3 rounded-2xl border px-4 py-3 shadow-xl backdrop-blur sm:-left-6"
      >
        <span class="bg-brand/20 text-brand-light flex size-9 items-center justify-center rounded-xl">
          <x-lucide-scan-search class="size-5" />
        </span>
        <span>
          <span class="text-fg block text-sm font-semibold">3 areas detected</span>
          <span class="text-muted block text-xs">Pick an upgrade for each one</span>
        </span>
      </div>

      {{-- Chip flotante: material elegido --}}
      <div
        class="ai-mockup border-fg/10 bg-deep-2/90 absolute -top-5 right-4 hidden items-center gap-3 rounded-2xl border py-2 pl-2 pr-4 shadow-xl backdrop-blur sm:flex lg:-right-6"
      >
        @if ($swatch)
          <img src="{{ $swatch['image'] }}" alt="" class="size-10 rounded-xl object-cover" loading="lazy" decoding="async" />
        @else
          <span class="from-sand to-sand-muted size-10 rounded-xl bg-linear-to-br"></span>
        @endif
        <span>
          <span class="text-muted-2 block text-[0.65rem] font-semibold uppercase tracking-wider">Pool deck</span>
          <span class="text-fg block text-sm font-semibold">{{ $swatch['label'] ?? 'Travertine' }} pavers</span>
        </span>
      </div>
    </div>

    {{-- Los controles del arranque debajo de la ventana (Analyze, Continue…). --}}
    <div data-ai-start-actions class="lg:absolute lg:inset-x-0 lg:top-full"></div>
    </div>
  </div>
</section>