---
import MainLayout from '../layouts/MainLayout.astro';
---

<MainLayout
  title="Contacto | MNQ Catering y Evento"
  description="Hablemos de su próximo evento. Diseñamos experiencias gastronómicas a medida para bodas, corporativos y celebraciones familiares."
  activeNav="contacto"
>

  <!-- ─── HERO ─── -->
  <section class="contacto-hero">
    <div class="page-wrap">
      <div class="contacto-hero-grid">

        <div class="contacto-hero-text">
          <span class="section-eyebrow">Contacto</span>
          <h1 class="text-display" style="margin-bottom: var(--space-8);">
            Hablemos de su próximo evento.
          </h1>
          <p class="text-muted" style="line-height: 1.7; max-width: 32rem;">
            Diseñamos experiencias gastronómicas a medida. Permítanos conocer sus necesidades para crear una propuesta única y exclusiva.
          </p>
        </div>

        <div class="contacto-hero-img overflow-hidden rounded-lg">
          <img
            src="/images/foto-bodas.png"
            alt="MNQ Catering — salón de eventos premium"
            style="width:100%;height:100%;object-fit:cover;object-position:center 35%;"
            loading="eager"
            fetchpriority="high"
          />
        </div>

      </div>
    </div>
  </section>

  <!-- ─── CONTACT GRID ─── -->
  <section class="section-pad">
    <div class="page-wrap">
      <div class="contacto-grid">

        <!-- Info lateral -->
        <aside class="contacto-info">

          <div class="stack-4">
            <span class="label-caps text-primary">Teléfono</span>
            <div style="display:flex;align-items:center;gap:var(--space-4);">
              <span class="material-symbols-outlined text-primary">call</span>
              <p class="text-muted">+34 678 17 15 13</p>
            </div>
          </div>

          <div class="stack-4">
            <span class="label-caps text-primary">Email</span>
            <div style="display:flex;align-items:center;gap:var(--space-4);">
              <span class="material-symbols-outlined text-primary">mail</span>
              <p class="text-muted">eventos@mnqcatering.com</p>
            </div>
          </div>

          <div class="stack-4">
            <span class="label-caps text-primary">WhatsApp</span>
            <div style="display:flex;align-items:center;gap:var(--space-4);">
              <span class="material-symbols-outlined text-primary">chat</span>
              <p class="text-muted">Canal exclusivo de atención</p>
            </div>
          </div>

          <div class="border-left-gold" style="padding-block:var(--space-4);">
            <p class="text-headline-md text-primary italic">
              "Excelencia en cada detalle, pasión en cada plato."
            </p>
          </div>

          <a
            href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20hablar%20sobre%20mi%20evento"
            class="btn btn-primary"
            target="_blank"
            rel="noreferrer"
            style="width:fit-content;"
          >
            Iniciar por WhatsApp
          </a>

        </aside>

        <!-- Formulario -->
        <div>
          <form class="form-grid" aria-label="Formulario de contacto" method="dialog">

            <div class="form-field">
              <label class="form-label" for="nombre">Nombre Completo</label>
              <input class="form-input" id="nombre" name="nombre" type="text" placeholder="Ej. Javier Sotomayor" />
            </div>

            <div class="form-field">
              <label class="form-label" for="email">Correo Electrónico</label>
              <input class="form-input" id="email" name="email" type="email" placeholder="javier@empresa.com" />
            </div>

            <div class="form-field">
              <label class="form-label" for="tipo">Tipo de Evento</label>
              <select class="form-select" id="tipo" name="tipo">
                <option value="">Seleccione una opción</option>
                <option value="boda">Boda</option>
                <option value="corporativo">Evento Corporativo</option>
                <option value="social">Celebración Social</option>
                <option value="otro">Otro</option>
              </select>
            </div>

            <div class="form-field">
              <label class="form-label" for="fecha">Fecha Estimada</label>
              <input class="form-input" id="fecha" name="fecha" type="date" />
            </div>

            <div class="form-field form-span-full">
              <label class="form-label" for="mensaje">Mensaje o Requerimientos Especiales</label>
              <textarea
                class="form-textarea"
                id="mensaje"
                name="mensaje"
                rows="5"
                placeholder="Cuéntenos más sobre su visión..."
              ></textarea>
            </div>

            <div class="form-span-full" style="display:flex;justify-content:flex-end;">
              <button type="submit" class="btn-underline" style="display:inline-flex;align-items:center;gap:var(--space-3);">
                Enviar Solicitud
                <span class="material-symbols-outlined">arrow_forward</span>
              </button>
            </div>

          </form>
        </div>

      </div>
    </div>
  </section>

</MainLayout>

<style>
  /* Hero */
  .contacto-hero {
    padding-top: calc(var(--nav-h) + var(--space-section));
    padding-bottom: var(--space-section);
  }

  .contacto-hero-grid {
    display: grid;
    gap: var(--space-12);
  }

  .contacto-hero-img {
    aspect-ratio: 4/3;
  }

  /* Contact layout */
  .contacto-grid {
    display: grid;
    gap: var(--space-16);
  }

  .contacto-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }

  @media (min-width: 48rem) {
    .contacto-hero-grid {
      grid-template-columns: 7fr 5fr;
      align-items: center;
    }

    .contacto-grid {
      grid-template-columns: 2fr 3fr;
      align-items: start;
    }
  }
</style>