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

import Icon from '../components/Icon.astro';

const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';

const heroPhoto = {
  src: '/images/nosotros-hero.webp',
  alt: 'Responsable de MNQ acompañando la puesta a punto de un evento nocturno',
  width: 1014,
  height: 747,
};

const teamGallery = {
  lead: {
    src: '/images/team/mnq-team-service.jpg',
    alt: 'Montaje y coordinación del servicio de MNQ',
    width: 1080,
    height: 1440,
    pos: 'center 28%',
  },
  support: [
    {
      src: '/images/team/mnq-team-lead.webp',
      alt: 'Equipo de MNQ durante un servicio',
      width: 1439,
      height: 1919,
      pos: 'center 24%',
      caption: 'Equipo al completo, listo para acompañar el servicio.',
    },
    {
      src: '/images/team/mnq-team-kitchen.webp',
      alt: 'Preparación gastronómica del equipo de MNQ',
      width: 1439,
      height: 1439,
      pos: 'center center',
      caption: 'Cocina en movimiento, detalle en cada pase.',
    },
  ],
};
---

<MainLayout
  title="Nosotros | MNQ Catering y Evento"
  description="Conozca el equipo real de MNQ Catering y Evento: oficio, cercanía y una hospitalidad cuidada en cada servicio."
  activeNav="nosotros"
>

  <!-- ─── HERO EDITORIAL ─── -->
  <section class="section-pad" style="padding-top:calc(var(--nav-h) + var(--space-section));">
    <div class="page-wrap">
      <div class="nosotros-hero-grid">

        <div class="nosotros-text">
          <span class="section-eyebrow reveal">Nuestra Esencia</span>
          <h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-8);">Hospitalidad con oficio, calma y cercanía.</h1>
          <p class="text-muted leading-relaxed" style="max-width:32rem;">
            En MNQ cada evento se construye desde dentro: cocina en movimiento, coordinación real y un equipo que cuida el ambiente con discreción. Nos importa que todo salga bien y que se sienta natural.
          </p>
        </div>

        <div class="nosotros-image" style="position:relative;">
          <div class="overflow-hidden rounded-lg" style="aspect-ratio:4/3;">
            <img
              src={heroPhoto.src}
              alt={heroPhoto.alt}
              width={heroPhoto.width}
              height={heroPhoto.height}
              style="width:100%;height:100%;object-fit:cover;object-position:center;"
              loading="eager"
              fetchpriority="high"
            />
          </div>
          <div class="quote-card-desktop border-outline-soft" style="position:absolute;bottom:-2.5rem;left:-2.5rem;background:var(--color-surface-container);padding:var(--space-10);display:none;">
            <p class="text-headline-md text-primary italic">"Detrás de cada servicio hay manos reales, ritmo y mucho cuidado."</p>
          </div>
        </div>

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

  <!-- ─── FILOSOFÍA ─── -->
  <section class="section-pad bg-container-low" style="border-top:1px solid rgb(208 197 175/10%);border-bottom:1px solid rgb(208 197 175/10%);">
    <div class="page-wrap">
      <div class="grid-2" style="gap:var(--space-16);">
        <h2 class="text-headline-lg" style="margin-bottom:var(--space-8);">Filosofía de servicio</h2>
        <div style="display:flex;flex-direction:column;gap:var(--space-6);">
          <p class="text-muted leading-relaxed">Creemos que un buen catering no solo se nota en el plato: también se nota en cómo acompaña, en cómo resuelve y en la tranquilidad que deja a quien organiza el evento.</p>
          <p class="text-muted leading-relaxed">Trabajamos con producto bien seleccionado, proveedores de confianza y una coordinación muy cuidada para que cocina, sala y montaje hablen el mismo idioma.</p>
          <div style="padding-top:var(--space-4);">
            <a href="/contacto" class="btn-underline" style="display:inline-flex;align-items:center;gap:var(--space-3);">Explorar propuesta gastronómica</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ─── VALORES ─── -->
  <section class="section-pad">
    <div class="page-wrap">
      <div style="text-align:center;margin-bottom:var(--space-24);">
        <span class="section-eyebrow reveal">Pilares de Marca</span>
        <h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">Valores que nos definen</h2>
      </div>
      <div class="grid-3">
        <div class="value-card value-card-animate" data-value-delay="0">
          <Icon name="verified" class="text-primary icon-lg" />
          <h3 class="text-headline-md">Calidad</h3>
          <p class="text-body-sm text-muted leading-relaxed">Innegociable. Desde la frescura del producto hasta el último detalle del servicio de sala.</p>
        </div>
        <div class="value-card value-card-animate" data-value-delay="150">
          <Icon name="history-edu" class="text-primary icon-lg" />
          <h3 class="text-headline-md">Tradición</h3>
          <p class="text-body-sm text-muted leading-relaxed">Honramos las técnicas clásicas que han forjado la gran cocina, aplicándolas con respeto.</p>
        </div>
        <div class="value-card value-card-animate" data-value-delay="300">
          <Icon name="architecture" class="text-primary icon-lg" />
          <h3 class="text-headline-md">Vanguardia</h3>
          <p class="text-body-sm text-muted leading-relaxed">Innovamos en presentaciones y texturas para sorprender a los paladares contemporáneos.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ─── EQUIPO ─── -->
  <section class="section-pad bg-container-low team-gallery-section" style="overflow:hidden;">
    <div class="page-wrap">
      <div class="team-gallery-grid">
        <div class="team-gallery-copy">
          <div>
            <span class="section-eyebrow reveal">El Equipo</span>
            <h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">Personas reales detrás de cada servicio</h2>
          </div>
          <p class="text-muted leading-relaxed">Nos gusta que quien nos contrata sienta que hay un equipo presente, resolutivo y cercano. Desde la primera conversación hasta el último detalle del montaje, acompañamos con calma y criterio.</p>
          <p class="text-muted leading-relaxed">Esta galería muestra parte de esa energía de trabajo: menos pose, más coordinación, más cocina viva y más confianza en el trato.</p>

          <div class="team-trust-points">
            <div class="team-trust-point">
              <span class="label-caps">Cercanía</span>
              <p class="text-body-sm text-muted">Comunicación clara y acompañamiento real durante todo el proceso.</p>
            </div>
            <div class="team-trust-point">
              <span class="label-caps">Coordinación</span>
              <p class="text-body-sm text-muted">Cocina, sala y montaje trabajando con un mismo ritmo.</p>
            </div>
            <div class="team-trust-point">
              <span class="label-caps">Presencia</span>
              <p class="text-body-sm text-muted">Un servicio atento y discreto para que el evento fluya sin tensión.</p>
            </div>
          </div>

          <div style="padding-top:var(--space-2);">
            <a
              href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20hablar%20con%20el%20equipo%20sobre%20mi%20evento"
              class="btn-underline"
              target="_blank"
              rel="noreferrer"
              aria-label={whatsappAriaLabel}
            >Hablar con el equipo</a>
          </div>
        </div>

        <div class="team-gallery-visuals">
          <figure class="team-photo-card team-photo-lead">
            <div class="overflow-hidden rounded-lg team-photo-frame" style="aspect-ratio:4/5;">
              <img
                src={teamGallery.lead.src}
                alt={teamGallery.lead.alt}
                width={teamGallery.lead.width}
                height={teamGallery.lead.height}
                style={`width:100%;height:100%;object-fit:cover;object-position:${teamGallery.lead.pos};`}
                loading="lazy"
                decoding="async"
              />
            </div>
            <figcaption class="team-photo-caption">Coordinación cercana, montaje cuidado y una forma de trabajar que se nota en el ambiente.</figcaption>
          </figure>

          <div class="team-support-grid">
            {teamGallery.support.map(({ src, alt, width, height, pos, caption }) => (
              <figure class="team-photo-card">
                <div class="overflow-hidden rounded-lg team-photo-frame" style="aspect-ratio:1/1;">
                  <img
                    src={src}
                    alt={alt}
                    width={width}
                    height={height}
                    style={`width:100%;height:100%;object-fit:cover;object-position:${pos};`}
                    loading="lazy"
                    decoding="async"
                  />
                </div>
                <figcaption class="team-photo-caption">{caption}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ─── CTA ─── -->
  <section class="section-pad" style="text-align:center;">
    <div class="page-wrap">
      <div style="max-width:40rem;margin-inline:auto;">
        <h2 class="text-display" style="margin-bottom:var(--space-8);">¿Planeamos algo extraordinario?</h2>
        <p class="text-muted" style="margin-bottom:var(--space-12);">Estamos listos para transformar su visión en una realidad gastronómica sin precedentes.</p>
        <a href="/contacto" class="btn btn-primary" style="min-width:18rem;">Solicitar Dosier Exclusivo</a>
      </div>
    </div>
  </section>

</MainLayout>

<style>
  .nosotros-hero-grid {
    display: grid;
    gap: var(--space-12);
  }

  .team-gallery-section {
    border-top: 1px solid rgb(208 197 175 / 16%);
    border-bottom: 1px solid rgb(208 197 175 / 16%);
  }

  .team-gallery-grid {
    display: grid;
    gap: var(--space-12);
  }

  .team-gallery-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .team-trust-points {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-8) 0;
    border-top: 1px solid rgb(208 197 175 / 28%);
    border-bottom: 1px solid rgb(208 197 175 / 28%);
  }

  .team-trust-point {
    display: grid;
    gap: var(--space-2);
  }

  .team-gallery-visuals {
    display: grid;
    gap: var(--space-8);
  }

  .team-support-grid {
    display: grid;
    gap: var(--space-6);
  }

  .team-photo-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .team-photo-frame {
    border: 1px solid rgb(208 197 175 / 22%);
    background: var(--color-surface-container-high);
  }

  .team-photo-frame img {
    transition: transform 700ms ease;
  }

  .team-photo-card:hover img {
    transform: scale(1.03);
  }

  .team-photo-caption {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-on-surface-variant);
  }

  @media (min-width: 48rem) {
    .nosotros-hero-grid {
      grid-template-columns: 5fr 7fr;
      align-items: center;
    }
    .quote-card-desktop { display: block !important; }

    .team-trust-points {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-6);
    }

    .team-support-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .team-gallery-grid {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      align-items: start;
    }

  }

  /* ─── VALUE CARD TIMELINE ANIMATION ──────────── */
  .value-card-animate {
    opacity: 0;
    transform: translateY(20px) rotate(var(--card-tilt, 0deg));
    transition:
      opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--value-delay, 0) * 1ms);
  }

  .value-card-animate.visible {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }

  .value-card-animate:nth-child(1) { --card-tilt: 0deg; }
  .value-card-animate:nth-child(2) { --card-tilt: 0deg; }
  .value-card-animate:nth-child(3) { --card-tilt: 0deg; }

  /* subtle stacking effect */
  @media (min-width: 48rem) {
    .value-card-animate:nth-child(1) { --card-tilt: -1.5deg; }
    .value-card-animate:nth-child(2) { --card-tilt: 0deg; }
    .value-card-animate:nth-child(3) { --card-tilt: 1.5deg; }
  }
</style>

<script>
  // Override IntersectionObserver to also handle value-card timing
  const valueCards = document.querySelectorAll('.value-card-animate');
  valueCards.forEach((card) => {
    const delay = (card as HTMLElement).dataset.valueDelay || '0';
    (card as HTMLElement).style.setProperty('--value-delay', delay);
  });
</script>