@extends('front.layouts.marketplace')

@section('title', 'Contacto | Mariachis.co')
@section('meta_description', 'Escríbenos para resolver dudas sobre contrataciones, cuentas, anuncios o soporte general en Mariachis.co.')
@section('body_page', 'contact')

@if($recaptcha['enabled'])
  @push('head')
    <script src="https://www.google.com/recaptcha/api.js?render={{ urlencode($recaptcha['siteKey']) }}"></script>
  @endpush
@endif

@push('styles')
  <style>
    .contact-page-shell {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at top left, rgba(0, 104, 71, 0.12), transparent 32%),
        radial-gradient(circle at bottom right, rgba(217, 119, 6, 0.12), transparent 28%),
        linear-gradient(180deg, #f8fbf9 0%, #ffffff 42%, #f7faf8 100%);
    }

    .contact-page-shell::before,
    .contact-page-shell::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
      opacity: 0.7;
    }

    .contact-page-shell::before {
      top: -8rem;
      right: -6rem;
      width: 18rem;
      height: 18rem;
      background: rgba(0, 104, 71, 0.08);
    }

    .contact-page-shell::after {
      bottom: -9rem;
      left: -5rem;
      width: 16rem;
      height: 16rem;
      background: rgba(148, 163, 184, 0.12);
    }

    .contact-card {
      position: relative;
      z-index: 1;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 2rem;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 32px 70px -42px rgba(15, 23, 42, 0.35);
      backdrop-filter: blur(16px);
    }

    .contact-highlight {
      border: 1px solid rgba(0, 104, 71, 0.12);
      border-radius: 1.65rem;
      background: linear-gradient(160deg, rgba(0, 104, 71, 0.1), rgba(255, 255, 255, 0.98) 58%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    }

    .contact-email-card {
      border-radius: 1.35rem;
      border: 1px solid rgba(0, 104, 71, 0.14);
      background: rgba(255, 255, 255, 0.78);
      padding: 1.15rem 1.2rem;
    }

    .contact-email-label {
      display: block;
      margin-bottom: 0.4rem;
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #64748b;
    }

    .contact-email-link {
      font-size: clamp(1.15rem, 2vw, 1.5rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #0b5d43;
      text-decoration: none;
      word-break: break-word;
    }

    .contact-email-link:hover {
      color: #084c36;
    }

    .contact-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      border-radius: 999px;
      background: rgba(0, 104, 71, 0.08);
      color: #0b5d43;
      padding: 0.52rem 0.9rem;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .contact-input,
    .contact-textarea {
      width: 100%;
      border: 1px solid rgba(148, 163, 184, 0.24);
      border-radius: 1rem;
      background: rgba(255, 255, 255, 0.96);
      color: #0f172a;
      padding: 0.95rem 1rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
    }

    .contact-input:focus,
    .contact-textarea:focus {
      outline: none;
      border-color: rgba(0, 104, 71, 0.38);
      box-shadow: 0 0 0 4px rgba(0, 104, 71, 0.08);
      transform: translateY(-1px);
    }

    .contact-textarea {
      min-height: 12rem;
      resize: vertical;
    }

    .contact-label {
      display: block;
      margin-bottom: 0.55rem;
      color: #334155;
      font-size: 0.92rem;
      font-weight: 700;
    }

    .contact-note {
      border-radius: 1.1rem;
      background: rgba(15, 23, 42, 0.03);
      padding: 0.9rem 1rem;
      color: #475569;
      font-size: 0.92rem;
      line-height: 1.65;
    }

    .contact-note strong {
      color: #0f172a;
    }

    .contact-error {
      margin-top: 0.45rem;
      color: #b91c1c;
      font-size: 0.84rem;
      font-weight: 600;
    }

    .contact-success {
      border: 1px solid rgba(16, 185, 129, 0.2);
      border-radius: 1.2rem;
      background: rgba(236, 253, 245, 0.92);
      color: #065f46;
      padding: 1rem 1.15rem;
      font-weight: 600;
    }

    .contact-failure {
      border: 1px solid rgba(239, 68, 68, 0.16);
      border-radius: 1.2rem;
      background: rgba(254, 242, 242, 0.95);
      color: #991b1b;
      padding: 1rem 1.15rem;
    }

    .contact-honeypot {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .contact-captcha-note {
      font-size: 0.8rem;
      line-height: 1.6;
      color: #64748b;
    }

    .contact-captcha-note a {
      color: #0b5d43;
      text-decoration: none;
    }

    .contact-captcha-note a:hover {
      text-decoration: underline;
    }
  </style>
@endpush

@section('content')
  <main class="contact-page-shell">
    <section class="layout-shell py-12 md:py-16">
      <div class="contact-card p-6 md:p-10">
        <div class="grid gap-8 lg:grid-cols-[0.95fr_1.2fr] lg:items-start">
          <section class="contact-highlight p-6 md:p-8">
            <span class="contact-chip">Contacto directo</span>
            <h1 class="mt-4 text-4xl font-extrabold tracking-[-0.03em] text-slate-900">Hablemos</h1>

            <div class="mt-8 grid gap-4">
              <div class="contact-email-card">
                <span class="contact-email-label">Correo directo</span>
                <a href="mailto:{{ $supportEmail }}" class="contact-email-link">{{ $supportEmail }}</a>
              </div>
              <div class="contact-note">
                Tu mensaje se envía de forma segura a nuestro buzón principal.
              </div>
            </div>
          </section>

          <section>
            @if(session('status'))
              <div class="contact-success mb-5">{{ session('status') }}</div>
            @endif

            @if($errors->has('contact'))
              <div class="contact-failure mb-5">{{ $errors->first('contact') }}</div>
            @endif

            <form action="{{ route('contact.store') }}" method="POST" class="grid gap-5" data-contact-form>
              @csrf
              <div class="contact-honeypot">
                <label for="company">Empresa</label>
                <input id="company" name="company" type="text" tabindex="-1" autocomplete="off" />
              </div>
              <input type="hidden" name="recaptcha_token" value="{{ old('recaptcha_token') }}" data-contact-recaptcha-token />

              <div class="grid gap-5 md:grid-cols-2">
                <div>
                  <label class="contact-label" for="name">Nombre</label>
                  <input id="name" name="name" type="text" value="{{ old('name', $prefill['name']) }}" class="contact-input" placeholder="Tu nombre completo" autocomplete="name" required />
                  @error('name')<p class="contact-error">{{ $message }}</p>@enderror
                </div>

                <div>
                  <label class="contact-label" for="email">Correo electrónico</label>
                  <input id="email" name="email" type="email" value="{{ old('email', $prefill['email']) }}" class="contact-input" placeholder="tucorreo@ejemplo.com" autocomplete="email" required />
                  @error('email')<p class="contact-error">{{ $message }}</p>@enderror
                </div>
              </div>

              <div class="grid gap-5 md:grid-cols-[0.85fr_1.15fr]">
                <div>
                  <label class="contact-label" for="phone">Teléfono</label>
                  <input id="phone" name="phone" type="text" value="{{ old('phone', $prefill['phone']) }}" class="contact-input" placeholder="+57 300 123 4567" autocomplete="tel" />
                  @error('phone')<p class="contact-error">{{ $message }}</p>@enderror
                </div>

                <div>
                  <label class="contact-label" for="subject">Asunto</label>
                  <input id="subject" name="subject" type="text" value="{{ old('subject') }}" class="contact-input" placeholder="¿En qué te ayudamos?" autocomplete="off" required />
                  @error('subject')<p class="contact-error">{{ $message }}</p>@enderror
                </div>
              </div>

              <div>
                <label class="contact-label" for="message">Mensaje</label>
                <textarea id="message" name="message" class="contact-textarea" placeholder="Cuéntanos tu caso con el mayor contexto posible." required>{{ old('message') }}</textarea>
                @error('message')<p class="contact-error">{{ $message }}</p>@enderror
              </div>

              <div class="flex flex-col items-start gap-3 md:flex-row md:items-center md:justify-between">
                <p class="max-w-2xl text-sm leading-6 text-slate-500">
                  Al enviarnos este formulario aceptas que usemos tus datos para responder esta solicitud y continuar la conversación relacionada con tu mensaje.
                </p>
                <button type="submit" class="inline-flex min-w-[220px] items-center justify-center rounded-2xl bg-brand-500 px-6 py-4 text-base font-extrabold text-white shadow-[0_24px_40px_-24px_rgba(0,104,71,0.85)] transition hover:bg-brand-600">
                  Enviar mensaje
                </button>
              </div>

              @if($recaptcha['enabled'])
                <p class="contact-captcha-note" data-contact-recaptcha-status hidden>
                  No pudimos cargar la verificación anti-spam. Revisa tu conexión e intenta nuevamente.
                </p>
                <p class="contact-captcha-note">
                  Este sitio está protegido por reCAPTCHA y aplican la
                  <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Política de privacidad</a>
                  y los
                  <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Términos de servicio</a>
                  de Google.
                </p>
              @endif
            </form>
          </section>
        </div>
      </div>
    </section>
  </main>
@endsection

@if($recaptcha['enabled'])
  @push('scripts')
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('[data-contact-form]');
        const tokenInput = document.querySelector('[data-contact-recaptcha-token]');
        const status = document.querySelector('[data-contact-recaptcha-status]');

        if (!form || !tokenInput || typeof window.grecaptcha === 'undefined') {
          if (status) {
            status.hidden = false;
          }
          return;
        }

        const siteKey = @json($recaptcha['siteKey']);
        const action = @json($recaptcha['action']);
        const submitButtons = Array.from(form.querySelectorAll('button[type="submit"]'));

        const setButtonsDisabled = (disabled) => {
          submitButtons.forEach((button) => {
            button.disabled = disabled;
          });
        };

        const refreshToken = () => window.grecaptcha.execute(siteKey, { action }).then((token) => {
          tokenInput.value = token;
          if (status) {
            status.hidden = true;
          }
        });

        window.grecaptcha.ready(function () {
          refreshToken().catch(function () {
            if (status) {
              status.hidden = false;
            }
          });
        });

        form.addEventListener('submit', function (event) {
          if (form.dataset.recaptchaSubmitting === '1') {
            return;
          }

          event.preventDefault();
          form.dataset.recaptchaSubmitting = '1';
          setButtonsDisabled(true);

          refreshToken()
            .then(function () {
              HTMLFormElement.prototype.submit.call(form);
            })
            .catch(function () {
              form.dataset.recaptchaSubmitting = '0';
              setButtonsDisabled(false);
              if (status) {
                status.hidden = false;
              }
            });
        });
      });
    </script>
  @endpush
@endif