{{-- /contact (item 3) — página de contacto. Diseño portado de Apex (banner + 2
     columnas info | form), backend de email portado de Protexiones. Adaptado al
     sistema de diseño OSCURO del sitio (tokens surface/fg/brand), no al white/gray
     de Apex. Hero por el patrón heroes (variante service). El JS del form vive en
     resources/js/contact-form.js (init en app.js, early-return si no hay #contactForm). --}}
@extends('layouts.landing')

@push('head')
  {{-- reCAPTCHA Enterprise: solo se carga si el flag está activo Y hay site key,
       así en dev sin credenciales la página no arrastra el script de Google. --}}
  @if (config('services.recaptcha.enabled') && config('services.recaptcha.site_key'))
    <script src="https://www.google.com/recaptcha/enterprise.js?render={{ config('services.recaptcha.site_key') }}"></script>
  @endif
@endpush

@section('hero')
  <x-heroes.service
    :image="Vite::asset('resources/images/contact/contact-hero.jpg')"
    alt="Outdoor pool and paver patio at dusk"
    title="Contact Us"
    subtitle="Tell us about your pool, patio or driveway project — we'll get back to you fast."
  />
@endsection

@section('content')
  <section class="bg-surface/55 py-14 lg:py-20">
    <div class="container">
      {{-- flex-col-reverse en mobile: el FORM va primero; en lg+ pasa a grid de 2
           columnas con la info a la izquierda. --}}
      <div class="flex flex-col-reverse gap-10 lg:grid lg:grid-cols-2 lg:gap-16">
        {{-- Columna izquierda: info real de la empresa (solo datos de config). --}}
        <div class="flex flex-col">
          <div class="mb-8 flex items-center gap-4">
            <img
              src="{{ Vite::asset('resources/images/logo-pools.svg') }}"
              alt="{{ config('company.legal_name') }}"
              width="159"
              height="129"
              class="h-16 w-16 object-contain"
            />
            <div>
              <p class="card-title font-serif text-fg">{{ config('company.legal_name') }}</p>
              <p class="mt-1 text-sm text-muted">
                {{ trim(config('company.address.street'), ', ') }}<br />
                {{ config('company.address.city') }}
              </p>
            </div>
          </div>

          <div class="space-y-5">
            <a
              href="{{ config('company.phone.href') }}"
              data-callrail-gate
              class="flex items-center gap-3 text-fg transition hover:text-brand-bright"
            >
              <span class="flex size-10 flex-none items-center justify-center rounded-full bg-surface-2 text-brand-light">
                <x-lucide-phone class="size-5" />
              </span>
              <span class="text-lg font-semibold">{{ config('company.phone.label') }}</span>
            </a>

            <a
              href="mailto:{{ config('company.email') }}"
              class="flex items-center gap-3 text-fg transition hover:text-brand-bright"
            >
              <span class="flex size-10 flex-none items-center justify-center rounded-full bg-surface-2 text-brand-light">
                <x-lucide-mail class="size-5" />
              </span>
              <span class="text-lg font-semibold break-all">{{ config('company.email') }}</span>
            </a>

            <div class="flex items-center gap-3 text-fg">
              <span class="flex size-10 flex-none items-center justify-center rounded-full bg-surface-2 text-brand-light">
                <x-lucide-map-pin class="size-5" />
              </span>
              <span class="text-base text-muted">
                {{ trim(config('company.address.street'), ', ') }}, {{ config('company.address.city') }}
              </span>
            </div>
          </div>

          {{-- TODO: horarios de atención no viven en config/company.php; si
               se quieren mostrar, agregarlos como fuente de datos (no hardcode). --}}

          <div class="mt-10 border-t border-line pt-8">
            <h2 class="card-title font-serif text-fg">Prefer a full quote?</h2>
            <p class="mt-2 text-sm text-muted">
              Book a free, no-obligation in-person estimate for your project.
            </p>
            <a href="{{ route('estimate') }}" class="btn btn-primary mt-5 w-full sm:w-fit">
              Get a Free Estimate
            </a>
          </div>
        </div>

        {{-- Columna derecha: card con el formulario. --}}
        <div class="rounded-2xl bg-surface-2 p-6 ring-1 ring-line/60 md:p-10">
          <h2 class="section-title font-serif text-fg">We're here to help</h2>
          <p class="mt-2 text-sm text-muted">
            Fill out the form and our team will reach out as soon as we're available.
          </p>

          {{-- action = route del POST; el JS (contact-form.js) lo lee de form.action
               y postea por fetch con X-CSRF-TOKEN desde el <meta>. novalidate: la
               validación la maneja el JS (y el servidor). --}}
          <form
            id="contactForm"
            action="{{ route('contact.store') }}"
            method="POST"
            data-recaptcha-site-key="{{ config('services.recaptcha.site_key') }}"
            novalidate
            class="mt-8 space-y-5"
          >
            @csrf

            <div class="grid grid-cols-1 gap-5 sm: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 class="error-message 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 class="error-message mt-1 hidden text-sm text-red-400"></p>
              </div>
            </div>

            <div class="grid grid-cols-1 gap-5 sm: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 class="error-message 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 class="error-message mt-1 hidden text-sm text-red-400"></p>
              </div>
            </div>

            <div class="form-group">
              <label for="inquiry_type" class="field-label">What is your inquiry about?</label>
              <select id="inquiry_type" name="inquiry_type" class="field-input appearance-none">
                <option value="" disabled selected>Please select</option>
                @foreach (\App\Enums\InquiryType::cases() as $type)
                  <option value="{{ $type->value }}">{{ $type->value }}</option>
                @endforeach
              </select>
              <p class="error-message mt-1 hidden text-sm text-red-400"></p>
            </div>

            <div class="form-group">
              <label for="message" class="field-label">Message</label>
              <textarea id="message" name="message" rows="5" class="field-input resize-y"></textarea>
              <p class="error-message mt-1 hidden text-sm text-red-400"></p>
            </div>

            <div class="pt-1">
              <button type="submit" class="btn btn-primary w-full sm:w-auto">Send message</button>
            </div>
            {{-- El estado del envío sale por toast (resources/js/toast.js). --}}
          </form>
        </div>
      </div>
    </div>
  </section>
@endsection