{{-- /estimate (item 4) — página real del form de presupuesto. LAYOUT copiado TAL
     CUAL de Apex (X:\Work\Apex\landing/resources/views/estimate.blade.php): grid
     de 4 columnas con las DOS secciones de video full-bleed apiladas (cada una su
     fila de ~800px, con su título overlay gigante) y el FORM como card SUPERPUESTA
     flotando sobre ellas (col-start-3 + md:-top-50). Lo único que cambia respecto
     de Apex es el BRANDING: tokens del tema OSCURO del sitio (no el blanco/azul de
     Apex) y el contenido del form (backend propio Estimate*, pool solo
     Renovation). El estado reactivo (type→scope→features→tamaño) es Alpine SIN
     GSAP; opciones desde EstimateOptions (fuente única). Los dos video-placeholder
     usan la flag apagada (solo poster). JS en resources/js/estimate-form.js. --}}
@extends('layouts.landing')

@php
  $estimateOptions = \App\Support\EstimateOptions::forAlpine();
  $timeframes = \App\Support\EstimateOptions::timeframes();
@endphp

@section('hero')
  <x-heroes.service
    :image="Vite::asset('resources/images/estimate/estimate-hero.jpg')"
    alt="Renovated backyard pool with travertine paver deck at golden hour"
    title="Get Your Free Estimate"
    subtitle="Tell us about your pool, patio or driveway project — we'll get back to you fast, no obligation."
  />
@endsection

@section('content')
  {{-- Grid de Apex: [auto | 700 | 700 | auto], filas de 800px en md+. Las dos
       secciones de video ocupan las 4 columnas (una por fila); el form flota en la
       tercera columna, superpuesto (z-40) sobre los videos. --}}
  <section class="grid grid-cols-[auto_minmax(0,700px)_minmax(0,700px)_auto] md:auto-rows-240 lg:auto-rows-200">
    {{-- Espacios laterales (solo estructura del grid). --}}
    <div class="col-start-1 row-span-full hidden md:block"></div>
    <div class="col-start-4 row-span-full hidden md:block"></div>

    {{-- Form: en mobile full-width con fondo degradé (cae primero, sobre los
         posters ocultos); en md+ pasa a la 3ª columna, centrado, y la card flota
         hacia arriba (md:-top-50) sobre las secciones de video. --}}
    <div
      class="z-40 col-span-full col-start-1 row-span-2 row-start-1 bg-linear-to-b from-surface-3 to-surface px-4 py-12 md:col-span-1 md:col-start-3 md:justify-self-center md:bg-none md:py-0 md:pl-0 md:pr-4 lg:pr-10"
    >
      <div
        class="relative rounded-2xl border border-line/60 bg-deep-2/75 px-6 py-10 shadow-xl backdrop-blur-lg md:-top-30 md:p-10"
      >
        <h2 class="section-title text-center font-serif text-fg">Book a Free Consultation</h2>
        <p class="mx-auto mt-3 mb-8 max-w-lg text-center text-base text-muted">
          Take a moment to fill out our form and we'll get in touch with you as soon as we're available.
        </p>

        {{-- x-data en el <form> (como Apex): monta el estado reactivo con las
             opciones inyectadas desde el backend. El submit lo maneja el JS
             (estimate-form.js) con preventDefault; el lead se enviará DIRECTO a
             Espo desde el navegador (pendiente de cablear), no a un endpoint del
             backend — por eso ya no hay action/method/@csrf. --}}
        <form
          id="estimateForm"
          novalidate
          x-data="estimateForm(@js($estimateOptions))"
          class="space-y-6"
        >

          {{-- Section: About you --}}
          <fieldset>
            <legend class="mb-1.5 block font-serif text-xl text-fg">About you</legend>
            <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
              <div class="form-group">
                <label for="first_name" class="field-label">First name</label>
                <input type="text" id="first_name" name="first_name" class="field-input" autocomplete="given-name" />
                <p data-error="first_name" class="mt-1 hidden text-sm text-red-400"></p>
              </div>
              <div class="form-group">
                <label for="last_name" class="field-label">Last name</label>
                <input type="text" id="last_name" name="last_name" class="field-input" autocomplete="family-name" />
                <p data-error="last_name" class="mt-1 hidden text-sm text-red-400"></p>
              </div>
            </div>
            <div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
              <div class="form-group">
                <label for="email" class="field-label">Email</label>
                <input type="email" id="email" name="email" class="field-input" autocomplete="email" />
                <p data-error="email" class="mt-1 hidden text-sm text-red-400"></p>
              </div>
              <div class="form-group">
                <label for="phone" class="field-label">Mobile phone</label>
                <input type="tel" id="phone" name="phone" class="field-input" autocomplete="tel" placeholder="XXX-XXX-XXXX" />
                <p data-error="phone" class="mt-1 hidden text-sm text-red-400"></p>
              </div>
            </div>
          </fieldset>

          {{-- Section: Your Property --}}
          <fieldset>
            <legend class="mb-1.5 block font-serif text-xl text-fg">Your Property</legend>
            <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
              <div class="form-group">
                <label for="city" class="field-label">City</label>
                <input type="text" id="city" name="city" class="field-input" autocomplete="address-level2" />
                <p data-error="city" class="mt-1 hidden text-sm text-red-400"></p>
              </div>
              <div class="form-group">
                <label for="state" class="field-label">State</label>
                <input type="text" id="state" name="state" class="field-input" value="Florida" autocomplete="address-level1" />
              </div>
              <div class="form-group">
                <label for="zip_code" class="field-label">Zip code</label>
                <input type="text" id="zip_code" name="zip_code" class="field-input" inputmode="numeric" autocomplete="postal-code" />
                <p data-error="zip_code" class="mt-1 hidden text-sm text-red-400"></p>
              </div>
            </div>
          </fieldset>

          {{-- Section: About Your Project (reactivo) --}}
          <fieldset>
            <legend class="mb-1.5 block font-serif text-xl text-fg">About Your Project</legend>

            {{-- Project type (Pool/Pavers) — radios sr-only estilizados como botones. --}}
            <div class="form-group mb-4">
              <label class="field-label">Project</label>
              <div class="mt-1.5 flex gap-2">
                <label class="btn-choice w-full">
                  <input type="radio" name="project_type" value="pool" x-model="projectType" @change="onTypeChange()" class="sr-only" />
                  <x-lucide-waves class="size-5" />
                  <span>Pool</span>
                </label>
                <label class="btn-choice w-full">
                  <input type="radio" name="project_type" value="pavers" x-model="projectType" @change="onTypeChange()" class="sr-only" />
                  <x-lucide-layout-grid class="size-5" />
                  <span>Pavers</span>
                </label>
              </div>
              <p data-error="project_type" class="mt-1 hidden text-sm text-red-400"></p>
            </div>

            {{-- Project scope — botones dependientes del tipo (pool SOLO ofrece
                 Renovation; pavers, New Construction y Renovation). Aparece al
                 elegir el tipo. Las columnas siguen a la CANTIDAD de opciones: un
                 grid fijo de 3 dejaba huecos (uno con pool, medio con pavers).
                 Con una sola opción el JS además la preselecciona. --}}
            <div class="form-group mb-4" x-show="showScope" x-transition x-cloak>
              <label class="field-label">Project Type</label>
              <div
                class="mt-1.5 grid gap-2"
                :class="{
                  'grid-cols-1': availableScopes.length === 1,
                  'grid-cols-2': availableScopes.length === 2,
                  'grid-cols-2 sm:grid-cols-3': availableScopes.length > 2,
                }"
              >
                <template x-for="scope in availableScopes" :key="scope">
                  <label class="btn-choice w-full">
                    <input type="radio" name="project_scope" :value="scope" x-model="projectScope" class="sr-only" />
                    <span x-text="scope"></span>
                  </label>
                </template>
              </div>
              <p data-error="project_scope" class="mt-1 hidden text-sm text-red-400"></p>
            </div>

            {{-- Desired project features — checkboxes dependientes del tipo. --}}
            <div class="form-group mb-4" x-show="showFeatures" x-transition x-cloak>
              <label class="field-label">Desired Project Features <span class="text-muted-2">(optional)</span></label>
              <div class="mt-1.5 grid grid-cols-2 gap-2 sm:grid-cols-3">
                <template x-for="feature in availableFeatures" :key="feature">
                  <label class="flex cursor-pointer items-center gap-2 rounded-md border border-line bg-surface px-3 py-2.5 text-sm text-fg transition has-[:checked]:border-brand-light has-[:checked]:bg-brand/15">
                    <input type="checkbox" name="project_features[]" :value="feature" x-model="features" class="accent-brand" />
                    <span x-text="feature"></span>
                  </label>
                </template>
              </div>
              <p data-error="project_features" class="mt-1 hidden text-sm text-red-400"></p>
            </div>

            {{-- Tamaño del proyecto — radios dependientes de type+scope (reemplazó
                 a la vieja pregunta de budget). Los values son los codes del enum
                 cProjectAreaSize de Espo; el label visible se arma con label+range.
                 El wrapper interno tiene su propio x-show (areaVisible) para que el
                 SWAP de opciones al cambiar de scope se vea con fade — el
                 x-transition de afuera solo anima aparecer/desaparecer. --}}
            <div class="form-group mb-4" x-show="showAreaSize" x-transition x-cloak>
              <label class="field-label">What is the approximate size of the project?</label>
              <div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2" x-show="areaVisible" x-transition.opacity>
                <template x-for="size in availableAreaSizes" :key="size.value">
                  <label class="btn-choice btn-choice-stacked w-full">
                    <input type="radio" name="project_area_size" :value="size.value" x-model="projectAreaSize" :required="showAreaSize" class="sr-only" />
                    <span>
                      <span x-text="size.label"></span>
                      <span class="font-light italic whitespace-nowrap" x-show="size.range" x-text="`(${size.range})`"></span>
                    </span>
                    <span class="text-xs text-muted-2" x-show="size.description" x-text="size.description"></span>
                  </label>
                </template>
              </div>
              <p data-error="project_area_size" class="mt-1 hidden text-sm text-red-400"></p>
            </div>

            {{-- How soon are you looking to start (estático). --}}
            <div class="form-group mb-4">
              <label for="start_timeframe" class="field-label">How Soon Are You Looking To Start</label>
              <select id="start_timeframe" name="start_timeframe" class="field-input appearance-none">
                <option value="" disabled selected>Please select</option>
                @foreach ($timeframes as $value => $label)
                  <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
              </select>
              <p data-error="start_timeframe" class="mt-1 hidden text-sm text-red-400"></p>
            </div>

            {{-- Description (opcional). --}}
            <div class="form-group mb-4">
              <label for="project_description" class="field-label">Give us a brief description about your project <span class="text-muted-2">(optional)</span></label>
              <textarea id="project_description" name="project_description" rows="4" class="field-input resize-y" placeholder="Description"></textarea>
              <p data-error="project_description" class="mt-1 hidden text-sm text-red-400"></p>
            </div>

            {{-- Foto opcional — dropzone VISUAL (recuadro punteado) con input file
                 nativo detrás (sin la lib Dropzone) + drag&drop nativo (JS). --}}
            <div class="form-group">
              <label for="photo" class="field-label">Upload an image <span class="text-muted-2">(optional)</span></label>
              <label
                id="photoDropzone"
                for="photo"
                data-dropzone
                class="mt-1.5 flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-line bg-surface px-4 py-8 text-center transition hover:border-brand-light hover:bg-surface-3"
              >
                <x-lucide-image-up class="size-8 text-muted-2" />
                <span class="mt-2 text-sm text-muted" data-dropzone-label>Drag &amp; drop an image here or click to select</span>
                <span class="mt-1 text-xs text-muted-2">PNG or JPG, up to 8&nbsp;MB</span>
                <input type="file" id="photo" name="photo" accept="image/*" class="sr-only" />
              </label>
              <p data-error="photo" class="mt-1 hidden text-sm text-red-400"></p>
            </div>
          </fieldset>

          {{-- Section: Best time to contact you — pickers Preact (isla, mismo
               patrón que la galería). El div target lo hidrata estimate/index.jsx:
               calcula fecha sugerida, bloquea días cerrados y genera los slots de
               hora (todo en la TZ del negocio, config('company.schedule')). Los dos
               hidden inputs son los que el submit (estimate-form.js) y el server
               leen por name; los pickers los rellenan. --}}
          <fieldset>
            <legend class="mb-1.5 block font-serif text-xl text-fg">Best time to contact you</legend>

            <div data-schedule-pickers data-schedule="{{ Js::encode(config('company.schedule')) }}"></div>

            {{-- Valores reales del submit (rellenados por los pickers). --}}
            <input type="hidden" name="preferred_date" />
            <input type="hidden" name="preferred_time" />
            <p data-error="preferred_date" class="mt-1 hidden text-sm text-red-400"></p>
            <p data-error="preferred_time" class="mt-1 hidden text-sm text-red-400"></p>
          </fieldset>

          {{-- Disclaimer TCPA. --}}
          {{--  <p class="text-xs leading-relaxed text-muted">
            By submitting this form you agree to be contacted by {{ config('company.legal_name') }} about your project by
            phone, text or email at the number and address provided, including by automated means. Consent is not a
            condition of purchase. Message and data rates may apply.
          </p> --}}

          {{-- Opt-in de SMS: OPCIONAL. El form se envía marcado o sin marcar —
               a propósito, porque los ToS y la privacy prometen que el consentimiento
               no es condición para trabajar con nosotros. Por eso `sms_consent` NO
               está en REQUIRED_SELECTIONS de estimate-form.js. El slot de error se
               deja montado: no lo usa nadie hoy, pero es el mismo patrón que el
               resto de los campos y evita un caso especial en showFieldError(). --}}
          <div class="form-group mb-2">
            <label class="flex cursor-pointer items-start gap-2.5 text-xs leading-relaxed text-muted">
              {{-- Caja dibujada por nosotros (no el checkbox nativo, que ignora
                   background-color): mismo bg/borde/radio que .field-input. El input
                   real queda encima, transparente y clickeable; el tilde se muestra
                   por peer-checked. El has-[.border-red-400] pinta el recuadro cuando
                   showFieldError() marca el input (que es invisible). --}}
              <span
                class="relative mt-px flex size-4 flex-none items-center justify-center rounded border border-line bg-surface transition has-checked:border-brand has-checked:bg-brand has-[.border-red-400]:border-red-400"
              >
                <input type="checkbox" name="sms_consent" value="yes" class="peer absolute inset-0 cursor-pointer opacity-0" />
                <x-lucide-check class="pointer-events-none size-3 text-white opacity-0 transition peer-checked:opacity-100" />
              </span>
              <span>
                Yes, I would like to receive automated text messages from {{ config('company.legal_name') }} about
                important updates and account payment activity. I understand I will receive up to 5 messages per month.
              </span>
            </label>
            <p data-error="sms_consent" class="mt-1 hidden text-sm text-red-400"></p>
          </div>

          {{-- Detalle del programa de SMS: se SUMA al disclaimer TCPA de arriba (no
               lo reemplaza). El "checking the box above" se refiere al checkbox
               anterior, así que este bloque va después. --}}
          {{-- Las etiquetas en negrita NO usan text-fg (cream, se despegaba del
               párrafo): mismo bloque de color que el resto, un punto más oscuro —
               text-surface es el bg de los .field-input. --}}
          <div class="space-y-2 text-xs leading-relaxed text-muted">
            <p>
              <strong class="font-semibold text-muted/80">Message Frequency:</strong> You will receive up to 5 messages
              per month.
            </p>
            <p>
              <strong class="font-semibold text-muted/80">Standard Rates:</strong> Message and data rates may apply
              depending on your mobile phone service plan.
            </p>
            <p>
              <strong class="font-semibold text-muted/80">Help &amp; Stop:</strong> Reply HELP for help or STOP to cancel
              any time. By providing your phone number and checking the box above, you agree to receive text messages
              from {{ config('company.legal_name') }}. Consent is not required to make a purchase.
            </p>
            <p>
              <a href="{{ route('legal.terms') }}" target="_blank" rel="noopener" class="hover:text-brand-light hover:underline">
                Terms of Service
              </a>
              <span aria-hidden="true" class="px-1">|</span>
              <a href="{{ route('legal.privacy') }}" target="_blank" rel="noopener" class="hover:text-brand-light hover:underline">
                Privacy Policy
              </a>
            </p>
          </div>

          <fieldset class="text-center">
            <button type="submit" class="btn btn-primary px-8 mx-auto">Submit</button>
          </fieldset>
          {{-- El estado del envío sale por toast (resources/js/toast.js): este form
               mide varias pantallas y un bloque inline quedaba fuera de vista. --}}
        </form>
      </div>
    </div>

    {{-- Sección de video 1 (pool) — full-bleed, fila 1, oculta en mobile. --}}
    <div class="col-span-4 col-start-1 row-start-1 hidden md:flex">
      <x-video-display
        project-type="pool"
        :poster="Vite::asset('resources/images/estimate/estimate-pool.jpg')"
        alt="Freshly renovated swimming pool with new tile and paver deck"
        class="h-full w-full"
      >
        <x-slot:heading>
          <div class="text-cream-2 drop-shadow max-w-110">
            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-muted">POOL TRANSFORMATIONS —</p>
            <h2 class="section-title mt-4 font-serif text-fg">
              A Refreshed Pool. <span class="italic text-muted md:whitespace-nowrap">A Renewed Backyard.</span>
            </h2>
          </div>
        </x-slot:heading>
      </x-video-display>
    </div>

    {{-- Sección de video 2 (pavers) — full-bleed, fila 2, oculta en mobile. --}}
    <div class="col-span-4 col-start-1 row-start-2 hidden md:flex">
      <x-video-display
        project-type="pavers"
        :poster="Vite::asset('resources/images/estimate/estimate-pavers.jpg')"
        alt="Elegant travertine paver patio in a landscaped backyard"
        class="h-full w-full"
      >
        <x-slot:heading>
          <div class="text-cream-2 drop-shadow max-w-120">
            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-muted">OUTDOOR SURFACES —</p>
            <h2 class="section-title mt-4 font-serif text-fg">
              Beautifully Finished. <span class="italic text-muted md:whitespace-nowrap">Built for Everyday Living.</span>
            </h2>
          </div>
        </x-slot:heading>
      </x-video-display>
    </div>
  </section>

  {{-- Secciones que "viajan" al content en estimate: social-proof → how-it-works.
       NO va Service Areas ni Quote (Quote excluido por el @unless del layout);
       Reviews sí aparece (global). Orden final: form → proof → process → Reviews. --}}
  <x-home.proof-and-process />
@endsection