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

<MainLayout
  title="Corporativo & Business | MNQ Catering y Evento"
  description="Elevamos la imagen de su empresa a través de experiencias gastronómicas impecables. Lanzamientos, galas institucionales y coffee breaks premium."
  activeNav="corporativo"
>

<!-- ─── HERO ─── -->
  <header style="padding-top:calc(var(--nav-h) + var(--space-8));padding-bottom:var(--space-8);overflow:hidden;">
    <div class="page-wrap">
      <div class="grid-12" style="align-items:center;gap:var(--space-8);">

        <div style="grid-column:span 12;z-index:10;">
          <p class="section-eyebrow reveal">Excelencia en Eventos</p>
          <h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-6);">Corporativo<br />&amp; Business</h1>
          <p class="text-muted reveal" style="--reveal-delay: 250;max-width:32rem;line-height:1.7;margin-bottom:var(--space-8);">
            Elevamos la imagen de su empresa a través de experiencias gastronómicas impecables. Desde lanzamientos de marca disruptivos hasta galas institucionales de alto nivel.
          </p>
          <div class="corp-hero-actions">
            <a href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20propuesta%20corporativa" class="btn btn-primary" target="_blank" rel="noreferrer">Solicitar Propuesta</a>
            <a href="#servicios" class="btn-underline">Ver Servicios</a>
          </div>
        </div>

        <div style="grid-column:span 12;position:relative;" class="reveal" style="--reveal-delay: 350;">
          <div style="aspect-ratio: 16/9;" class="overflow-hidden rounded-lg border-outline-soft">
            <img
              src="/images/foto-corporativo.jpg"
              alt="Eventos corporativos premium — MNQ"
              style="width:100%;height:100%;object-fit:cover;object-position:center top;"
              loading="eager"
            />
          </div>
        </div>

      </div>
    </div>
  </header>

  <!-- ─── SERVICIOS BENTO ─── -->
  <section id="servicios" class="section-pad bg-container-low">
    <div class="page-wrap">
      <div style="text-align:center;margin-bottom:var(--space-16);">
        <h2 class="text-headline-lg reveal">Servicios Especializados</h2>
        <div class="gold-line mx-auto reveal" style="margin-top:var(--space-4);--reveal-delay: 200;"></div>
      </div>

      <div class="corp-bento">

        <div class="bento-card corp-wide">
          <img src="/images/foto-corporativo.jpg" alt="Lanzamientos de marca" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;" loading="lazy" />
          <div class="bento-card-overlay"></div>
          <div class="bento-card-body">
            <h3 class="text-headline-md" style="color:var(--color-on-surface);">Lanzamientos de Marca</h3>
            <p class="text-muted" style="max-width:28rem;">Impacto visual y conceptual para presentaciones que trascienden.</p>
          </div>
        </div>

        <div class="bento-card corp-tall">
          <img src="/images/generated/gallery-2.webp" alt="Coffee Breaks Premium" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;" loading="lazy" />
          <div class="bento-card-overlay"></div>
          <div class="bento-card-body">
            <h3 class="text-headline-md" style="color:var(--color-on-surface);">Coffee Breaks Premium</h3>
            <p class="text-muted">Pausas que inspiran productividad y networking de calidad.</p>
          </div>
        </div>

        <div class="bento-card corp-wide">
          <img src="/images/foto-bodas.jpg" alt="Galas y Cenas Anuales" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;" loading="lazy" />
          <div class="bento-card-overlay"></div>
          <div class="bento-card-body">
            <h3 class="text-headline-md" style="color:var(--color-on-surface);">Galas &amp; Cenas Anuales</h3>
            <p class="text-muted" style="max-width:28rem;">Protocolo impecable para los momentos más solemnes de su organización.</p>
          </div>
        </div>

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

  <!-- ─── EMPRESAS ─── -->
  <section class="section-pad-sm bg-surface">
    <div class="page-wrap" style="text-align:center;">
      <p class="label-caps text-muted" style="margin-bottom:var(--space-12);opacity:0.8;">Empresas que confían en nuestra visión</p>
      <div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-16);opacity:0.4;filter:grayscale(1);">
        <span style="font-size:1.5rem;font-weight:700;letter-spacing:0.2em;color:var(--color-on-surface-variant);">LUMINA</span>
        <span style="font-size:1.5rem;font-style:italic;color:var(--color-on-surface-variant);">Vanguard</span>
        <span style="font-size:1.5rem;font-weight:900;text-transform:uppercase;color:var(--color-on-surface-variant);">Ethereal.</span>
        <span style="font-size:1.5rem;color:var(--color-on-surface-variant);">Nordic Corp</span>
        <span style="font-size:1.5rem;letter-spacing:-0.03em;color:var(--color-on-surface-variant);">Apex Sol.</span>
      </div>
    </div>
  </section>

  <!-- ─── FORMULARIO COTIZACIÓN ─── -->
  <section class="section-pad bg-container-high" style="position:relative;overflow:hidden;">
    <div class="page-wrap" style="position:relative;z-index:10;">
      <div class="bg-surface rounded-lg border-outline-soft" style="padding:var(--space-12) var(--space-10);max-width:52rem;margin-inline:auto;">
        <div style="text-align:center;margin-bottom:var(--space-16);">
          <h2 class="text-headline-lg" style="margin-bottom:var(--space-4);">Cotización Corporativa</h2>
          <p class="text-muted">Diseñamos una propuesta a la medida de sus objetivos empresariales.</p>
        </div>
        <form class="form-grid" aria-label="Formulario cotización corporativa" method="dialog">
          <div class="form-field">
            <label class="form-label" for="empresa">Empresa</label>
            <input class="form-input" id="empresa" name="empresa" type="text" placeholder="Nombre de su empresa" />
          </div>
          <div class="form-field">
            <label class="form-label" for="email-corp">Correo Corporativo</label>
            <input class="form-input" id="email-corp" name="email" type="email" placeholder="nombre@empresa.com" />
          </div>
          <div class="form-field">
            <label class="form-label" for="tipo-corp">Tipo de Evento</label>
            <select class="form-select" id="tipo-corp" name="tipo">
              <option value="">Tipo de Evento</option>
              <option>Lanzamiento de Marca</option>
              <option>Gala / Cena</option>
              <option>Coffee Break</option>
              <option>Otro</option>
            </select>
          </div>
          <div class="form-field">
            <label class="form-label" for="asistentes">Nº Asistentes</label>
            <input class="form-input" id="asistentes" name="asistentes" type="number" placeholder="Cantidad estimada" min="1" />
          </div>
          <div class="form-field form-span-full">
            <label class="form-label" for="detalles">Detalles Adicionales</label>
            <textarea class="form-textarea" id="detalles" name="detalles" rows="3" placeholder="Cuéntenos sus objetivos y requerimientos..."></textarea>
          </div>
          <div class="form-span-full" style="display:flex;justify-content:center;padding-top:var(--space-8);">
            <button type="submit" class="btn btn-primary" style="min-width:16rem;">Enviar Solicitud</button>
          </div>
        </form>
      </div>
    </div>
    <div style="position:absolute;top:0;right:-4rem;width:30%;height:100%;background:rgb(208 197 175/10%);transform:skewX(-10deg);pointer-events:none;"></div>
  </section>

</MainLayout>

<style>
  .corp-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .corp-wide, .corp-tall { position: relative; min-height: 14rem; }

  /* Hero actions stack on mobile */
  .corp-hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
  }

  @media (min-width: 30rem) {
    .corp-hero-actions {
      flex-direction: row;
      align-items: center;
    }
  }

  @media (min-width: 48rem) {
    .corp-bento {
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 22rem 22rem;
      gap: var(--space-8);
    }
    .corp-wide { grid-column: span 2; }
    .corp-tall { grid-row: span 2; min-height: auto; }
    .corp-wide, .corp-tall { min-height: 20rem; }
    [style*="grid-column:span 12"] { grid-column: span 6 !important; }
  }
</style>