@extends('layouts.app')

@section('title', 'Lavaustral | Lavandería en la Región de Aysén')
@section('description', 'Lavandería a domicilio en Coyhaique y Puerto Aysén. Más de 20 años lavando para la industria de Aysén, ahora en tu hogar: reserva el retiro, nosotros lavamos y te la devolvemos lista. Delivery gratis.')

@section('content')

    <!-- Hero Section -->
    <section id="hero" class="lav-hero" aria-label="Portada Lavaustral">

      <video class="lav-hero-video" autoplay muted loop playsinline preload="auto" aria-hidden="true">
        <source src="{{ asset('theme/guest/assets/img/lavaustral/bg.mp4') }}" type="video/mp4">
      </video>
      <div class="lav-hero-video-overlay" aria-hidden="true"></div>

      <div class="container">
        <div class="lav-hero-grid">

          <div class="lav-hero-content" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">

            <p class="lav-hero-eyebrow">— Lavandería en la Región de Aysén</p>

            <h1 class="lav-hero-headline">
                Tu ropa vuelve limpia,<br>
                <span class="lav-hero-headline-accent">y tú no te mueves de casa.</span>
            </h1>

            <p class="lav-hero-lead">
              Más de 20 años lavando para la industria de Aysén. Ahora llevamos esa misma calidad a tu hogar: reserva el retiro, nosotros lavamos y te la devolvemos lista.
            </p>

            <p class="lav-hero-tagline">— Tu tiempo nos importa · Delivery 100% gratis en todos tus pedidos</p>

            <div class="lav-hero-cta">
              <a href="{{ route('booking') }}" class="lav-hero-btn lav-hero-btn-primary">
                <i class="bi bi-arrow-up-short" aria-hidden="true"></i>
                <span>Pide tu Lavado Aquí</span>
              </a>
              <a href="{{ route('services.public') }}" class="lav-hero-btn lav-hero-btn-secondary">
                <span>Ver Planes</span>
              </a>
            </div>

            <div class="lav-hero-trust" aria-label="Datos de confianza">
              <div class="lav-hero-trust-item">
                <span class="lav-hero-trust-value">+20</span>
                <span class="lav-hero-trust-label">años de experiencia</span>
              </div>
              <div class="lav-hero-trust-item">
                <span class="lav-hero-trust-value">A domicilio</span>
                <span class="lav-hero-trust-label">en Coyhaique y Puerto Aysén</span>
              </div>
              <div class="lav-hero-trust-item">
                <span class="lav-hero-trust-value">2 formas</span>
                <span class="lav-hero-trust-label">a domicilio o en nuestro local</span>
              </div>
              <div class="lav-hero-trust-item">
                <span class="lav-hero-trust-value">Gratis</span>
                <span class="lav-hero-trust-label">retiro y entrega a domicilio</span>
              </div>
            </div>

          </div>

          <aside class="lav-hero-card" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200" aria-label="Cómo reservar tu retiro">
            <span class="lav-hero-card-badge">Nuevo · a domicilio</span>

            <h2 class="lav-hero-card-title">Reservar es simple</h2>
            <p class="lav-hero-card-desc">Coordinamos el retiro en tu puerta y te avisamos cuando esté lista.</p>

            <ol class="lav-hero-card-steps">
              <li class="lav-hero-card-step">
                <span class="lav-hero-card-step-num">1</span>
                <div class="lav-hero-card-step-copy">
                  <strong>Reservas online</strong>
                  <span>Eliges servicio, día y dirección.</span>
                </div>
              </li>
              <li class="lav-hero-card-step">
                <span class="lav-hero-card-step-num">2</span>
                <div class="lav-hero-card-step-copy">
                  <strong>Retiramos tu ropa</strong>
                  <span>Pasamos a buscarla en el horario acordado.</span>
                </div>
              </li>
              <li class="lav-hero-card-step">
                <span class="lav-hero-card-step-num">3</span>
                <div class="lav-hero-card-step-copy">
                  <strong>La devolvemos lista</strong>
                  <span>Limpia, doblada y embolsada en tu hogar.</span>
                </div>
              </li>
            </ol>
          </aside>

        </div>
      </div>

      <a href="https://wa.me/56984284828" target="_blank" rel="noopener noreferrer" class="lav-hero-whatsapp" aria-label="Contactar por WhatsApp"><i class="bi bi-whatsapp" aria-hidden="true"></i></a>

    </section><!-- /Hero Section -->

    <!-- Business Bridge Section (B2B) -->
    <section id="business-bridge" class="lav-biz-bridge" aria-label="Soluciones para empresas">
      <div class="container">
        <div class="lav-biz-bridge-card" data-aos="fade-up" data-aos-duration="800">

          <div class="lav-biz-bridge-copy">
            <p class="lav-biz-bridge-eyebrow">— Para empresas</p>
            <h2 class="lav-biz-bridge-title">¿Buscas lavandería para tu hotel, clínica o industria?</h2>
            <p class="lav-biz-bridge-desc">
              Somos socio estratégico de hotelería, salud, industria acuícola, minería y gastronomía en la Región de Aysén. Capacidad a gran escala, logística propia y trazabilidad de tus prendas.
            </p>
            <ul class="lav-biz-bridge-list">
              <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Volumen industrial garantizado</li>
              <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Retiro y despacho en tus horarios</li>
              <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Más de 20 años trabajando con empresas de la región</li>
            </ul>
          </div>

          <div class="lav-biz-bridge-cta">
            <a href="{{ route('business.quote') }}" class="lav-biz-bridge-btn">
              <span>Solicitar cotización corporativa</span>
              <i class="bi bi-arrow-right" aria-hidden="true"></i>
            </a>
            <a href="{{ route('business') }}" class="lav-biz-bridge-link">Conocer soluciones para empresas</a>
          </div>

        </div>
      </div>
    </section><!-- /Business Bridge Section -->

    <style>
      /* ============================================================
         LAV AUSTRAL — HERO + BUSINESS BRIDGE
         ============================================================ */
    
      #hero.lav-hero,
      #business-bridge.lav-biz-bridge {
        --lav-agua: linear-gradient(
          115deg,
          var(--lav-brand-green) 0%,
          var(--lav-brand-sky) 100%
        );
    
        --lav-agua-texto: linear-gradient(
          100deg,
          #8FD8FF 0%,
          #5FE3E8 55%,
          var(--lav-success) 100%
        );
    
        --lav-texto-claro-suave: #A9BCD8;
      }
    
    
      /* ============================================================
         HERO
         ============================================================ */
    
      #hero.lav-hero {
        position: relative !important;
        overflow: hidden !important;
        background: var(--lav-navy-deep) !important;
        padding: 96px 0 !important;
        min-height: calc(100vh - 84px) !important;
    
        display: flex !important;
        align-items: center !important;
      }
    
    
      /* ============================================================
         VIDEO DE FONDO
         ============================================================ */
    
      .lav-hero-video {
        position: absolute;
        inset: 0;
    
        width: 100%;
        height: 100%;
    
        object-fit: cover;
    
        z-index: 0;
        pointer-events: none;
    
        opacity: 1;
      }
    
    
      @media (prefers-reduced-motion: reduce) {
        .lav-hero-video {
          display: none !important;
        }
      }
    
    
      @media (max-width: 768px) {
        .lav-hero-video {
          display: none !important;
        }
      }
    
    
      /* ============================================================
         CONTENEDOR
         ============================================================ */
    
      #hero.lav-hero .container {
        position: relative;
        z-index: 1;
    
        max-width: 1400px !important;
        width: 100%;
      }
    
    
      /* ============================================================
         GRID PRINCIPAL
         ============================================================ */
    
      .lav-hero-grid {
        display: grid;
    
        grid-template-columns: minmax(0, 1fr) 480px;
    
        gap: 72px;
    
        align-items: center;
      }
    
    
      /* ============================================================
         EYEBROW
         ============================================================ */
    
      .lav-hero-eyebrow {
        display: inline-block;
    
        font-size: 15px;
        font-weight: 600;
    
        letter-spacing: .04em;
    
        text-transform: uppercase;
    
        color: var(--lav-brand-sky) !important;
    
        margin-bottom: 22px;
      }
    
    
      /* ============================================================
         TITULO PRINCIPAL
         ============================================================ */
    
      .lav-hero-headline {
        font-size: clamp(42px, 4.5vw, 64px) !important;
    
        font-weight: 800 !important;
    
        line-height: 1.05 !important;
    
        letter-spacing: -1.8px !important;
    
        color: #FFFFFF !important;
    
        margin: 0 0 28px 0 !important;
    
        max-width: 760px;
    
        text-shadow:
          0 3px 20px rgba(0, 0, 0, 0.45);
      }
    
    
      /* ============================================================
         PARTE DESTACADA DEL TITULO
         ============================================================ */
    
      .lav-hero-headline-accent {
        display: inline;
    
        background: var(--lav-agua-texto) !important;
    
        -webkit-background-clip: text !important;
        background-clip: text !important;
    
        -webkit-text-fill-color: transparent !important;
    
        color: transparent !important;
      }
    
    
      /* ============================================================
         TEXTO DESCRIPTIVO
         ============================================================ */
    
      .lav-hero-lead {
        font-size: 19px !important;
    
        line-height: 1.65 !important;
    
        color: var(--lav-texto-claro-suave) !important;
    
        max-width: 560px;
    
        margin-bottom: 24px !important;
    
        text-shadow:
          0 1px 12px rgba(0, 0, 0, .6);
      }
    
    
      /* ============================================================
         TAGLINE
         ============================================================ */
    
      .lav-hero-tagline {
        font-size: 18px !important;
    
        font-weight: 700 !important;
    
        color: #FFFFFF !important;
    
        margin-bottom: 40px !important;
    
        text-shadow:
          0 1px 12px rgba(0, 0, 0, .6);
      }
    
    
      /* ============================================================
         BOTONES / CTA
         ============================================================ */
    
      .lav-hero-cta {
        display: flex;
    
        align-items: center;
    
        gap: 18px;
    
        margin-bottom: 56px;
    
        flex-wrap: wrap;
      }
    
    
      .lav-hero-btn {
        display: inline-flex !important;
    
        align-items: center;
    
        justify-content: center;
    
        gap: 8px;
    
        padding: 18px 34px !important;
    
        border-radius: 999px !important;
    
        font-size: 17px !important;
    
        font-weight: 600 !important;
    
        white-space: nowrap;
    
        transition:
          background-color .2s ease,
          color .2s ease,
          border-color .2s ease,
          box-shadow .2s ease,
          transform .2s ease;
      }
    
    
      /* ============================================================
         BOTON PRINCIPAL
         ============================================================ */
    
      .lav-hero-btn-primary {
        background: var(--lav-agua) !important;
    
        color: #06243B !important;
    
        border: 1px solid transparent !important;
    
        box-shadow:
          0 10px 26px -12px rgba(47, 159, 224, .85);
      }
    
    
      .lav-hero-btn-primary:hover {
        box-shadow:
          0 16px 34px -12px rgba(47, 159, 224, .95);
    
        color: #06243B !important;
    
        transform: translateY(-1px);
      }
    
    
      /* ============================================================
         BOTON SECUNDARIO
         ============================================================ */
    
      .lav-hero-btn-secondary {
        background-color: rgba(6, 12, 30, .35) !important;
    
        color: #FFFFFF !important;
    
        border: 1px solid rgba(255, 255, 255, .45) !important;
    
        backdrop-filter: blur(4px);
      }
    
    
      .lav-hero-btn-secondary:hover {
        background-color: rgba(6, 12, 30, .5) !important;
    
        border-color: rgba(255, 255, 255, .6) !important;
    
        color: #FFFFFF !important;
    
        transform: translateY(-1px);
      }
    
    
      /* ============================================================
         INDICADORES / CONFIANZA
         ============================================================ */
    
      .lav-hero-trust {
        display: flex;
    
        gap: 40px;
    
        row-gap: 24px;
    
        flex-wrap: wrap;
      }
    
    
      .lav-hero-trust-item {
        display: flex;
    
        flex-direction: column;
    
        gap: 4px;
      }
    
    
      .lav-hero-trust-value {
        font-size: 20px;
    
        font-weight: 700;
    
        color: #FFFFFF !important;
    
        text-shadow:
          0 1px 10px rgba(0, 0, 0, .6);
      }
    
    
      .lav-hero-trust-label {
        font-size: 14px;
    
        color: var(--lav-texto-claro-suave) !important;
    
        text-shadow:
          0 1px 10px rgba(0, 0, 0, .6);
      }
    
    
      /* ============================================================
         CARD LATERAL
         ============================================================ */
    
      .lav-hero-card {
        background: #FFFFFF !important;
    
        border-radius: 20px;
    
        padding: 40px;
    
        box-shadow:
          0 20px 48px rgba(0, 0, 0, 0.28);
      }
    
    
      .lav-hero-card-badge {
        display: inline-block;
    
        font-size: 12px;
    
        font-weight: 700;
    
        letter-spacing: .03em;
    
        text-transform: uppercase;
    
        color: var(--lav-primary) !important;
    
        background: var(--lav-bg-light) !important;
    
        padding: 7px 14px;
    
        border-radius: 999px;
    
        margin-bottom: 20px;
      }
    
    
      .lav-hero-card-title {
        font-size: 24px;
    
        font-weight: 700;
    
        color: var(--lav-dark) !important;
    
        margin-bottom: 8px;
      }
    
    
      .lav-hero-card-desc {
        font-size: 15px;
    
        color: var(--lav-text-secondary) !important;
    
        line-height: 1.55;
    
        margin-bottom: 32px;
      }
    
    
      /* ============================================================
         PASOS DEL CARD
         ============================================================ */
    
      .lav-hero-card-steps {
        list-style: none;
    
        margin: 0;
    
        padding: 0;
    
        display: flex;
    
        flex-direction: column;
    
        gap: 26px;
      }
    
    
      .lav-hero-card-step {
        display: flex;
    
        gap: 16px;
    
        align-items: flex-start;
      }
    
    
      .lav-hero-card-step-num {
        flex-shrink: 0;
    
        width: 32px;
        height: 32px;
    
        border-radius: 50%;
    
        background: var(--lav-agua) !important;
    
        color: #06243B !important;
    
        font-size: 14px;
    
        font-weight: 700;
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
      }
    
    
      .lav-hero-card-step-copy {
        display: flex;
    
        flex-direction: column;
    
        gap: 3px;
      }
    
    
      .lav-hero-card-step-copy strong {
        font-size: 15px;
    
        color: var(--lav-dark) !important;
      }
    
    
      .lav-hero-card-step-copy span {
        font-size: 14px;
    
        color: var(--lav-text-secondary) !important;
    
        line-height: 1.45;
      }
    
    
      /* ============================================================
         WHATSAPP FLOTANTE
         ============================================================ */
    
      .lav-hero-whatsapp {
        position: fixed !important;
    
        bottom: 24px !important;
        right: 24px !important;
    
        width: 52px;
        height: 52px;
    
        border-radius: 50%;
    
        background: #25D366 !important;
    
        color: #FFFFFF !important;
    
        display: flex !important;
    
        align-items: center;
        justify-content: center;
    
        font-size: 24px;
    
        box-shadow:
          0 8px 20px rgba(37, 211, 102, 0.35);
    
        z-index: 999 !important;
    
        transition:
          transform .2s ease,
          box-shadow .2s ease;
      }
    
    
      .lav-hero-whatsapp:hover {
        transform: scale(1.06);
    
        color: #FFFFFF !important;
    
        box-shadow:
          0 10px 25px rgba(37, 211, 102, 0.45);
      }
    
    
      /* ============================================================
         RESPONSIVE — 1200px
         ============================================================ */
    
      @media (max-width: 1200px) {
    
        .lav-hero-grid {
          grid-template-columns: minmax(0, 1fr) 420px;
    
          gap: 48px;
        }
    
    
        .lav-hero-headline {
          font-size: 52px !important;
    
          line-height: 1.08 !important;
        }
    
      }
    
    
      /* ============================================================
         RESPONSIVE — 992px
         ============================================================ */
    
      @media (max-width: 992px) {
    
        #hero.lav-hero {
          min-height: auto !important;
    
          padding: 72px 0 !important;
        }
    
    
        .lav-hero-grid {
          grid-template-columns: 1fr;
    
          gap: 48px;
        }
    
    
        .lav-hero-headline {
          font-size: 42px !important;
    
          line-height: 1.08 !important;
    
          letter-spacing: -1px !important;
        }
    
    
        .lav-hero-lead {
          max-width: none;
        }
    
    
        .lav-hero-card {
          max-width: 600px;
    
          width: 100%;
    
          margin: 0 auto;
        }
    
      }
    
    
      /* ============================================================
         RESPONSIVE — 768px
         ============================================================ */
    
      @media (max-width: 768px) {
    
        #hero.lav-hero {
          padding: 60px 0 !important;
        }
    
    
        .lav-hero-grid {
          gap: 40px;
        }
    
    
        .lav-hero-eyebrow {
          font-size: 13px;
    
          margin-bottom: 16px;
        }
    
    
        .lav-hero-headline {
          font-size: 38px !important;
    
          line-height: 1.08 !important;
    
          letter-spacing: -.8px !important;
    
          margin-bottom: 22px !important;
        }
    
    
        .lav-hero-lead {
          font-size: 17px !important;
    
          line-height: 1.55 !important;
        }
    
    
        .lav-hero-tagline {
          font-size: 16px !important;
    
          margin-bottom: 30px !important;
        }
    
    
        .lav-hero-cta {
          gap: 12px;
    
          margin-bottom: 40px;
        }
    
    
        .lav-hero-btn {
          padding: 16px 26px !important;
    
          font-size: 16px !important;
        }
    
    
        .lav-hero-trust {
          gap: 28px;
        }
    
    
        .lav-hero-card {
          padding: 30px;
    
          border-radius: 18px;
        }
    
      }
    
    
      /* ============================================================
         RESPONSIVE — 576px
         ============================================================ */
    
      @media (max-width: 576px) {
    
        #hero.lav-hero {
          padding: 48px 0 !important;
        }
    
    
        .lav-hero-headline {
          font-size: 34px !important;
    
          line-height: 1.1 !important;
    
          letter-spacing: -.6px !important;
    
          margin-bottom: 22px !important;
        }
    
    
        .lav-hero-lead {
          font-size: 16px !important;
        }
    
    
        .lav-hero-cta {
          flex-direction: column;
    
          align-items: stretch;
    
          width: 100%;
        }
    
    
        .lav-hero-btn {
          width: 100%;
    
          justify-content: center;
    
          padding: 16px 22px !important;
        }
    
    
        .lav-hero-trust {
          gap: 22px;
    
          justify-content: flex-start;
        }
    
    
        .lav-hero-trust-value {
          font-size: 18px;
        }
    
    
        .lav-hero-trust-label {
          font-size: 13px;
        }
    
    
        .lav-hero-card {
          padding: 26px;
    
          border-radius: 16px;
        }
    
    
        .lav-hero-card-title {
          font-size: 21px;
        }
    
    
        .lav-hero-card-steps {
          gap: 22px;
        }
    
    
        .lav-hero-whatsapp {
          width: 48px;
          height: 48px;
    
          right: 18px;
          bottom: 18px;
    
          font-size: 21px;
        }
    
      }
    
    
      /* ============================================================
         BUSINESS BRIDGE
         ============================================================ */
    
      .lav-biz-bridge {
        padding: 72px 0;
    
        background: #FFFFFF;
      }
    
    
      #business-bridge.lav-biz-bridge .container {
        max-width: 1400px;
      }
    
    
      .lav-biz-bridge-card {
        display: grid;
    
        grid-template-columns: 1fr auto;
    
        gap: 48px;
    
        align-items: center;
    
        background: var(--lav-navy-deep);
    
        background-image:
          radial-gradient(
            26vw 26vw at -6vw -10vw,
            rgba(47, 159, 224, .4),
            transparent 60%
          ),
          radial-gradient(
            20vw 20vw at 104vw 110vw,
            rgba(141, 198, 63, .25),
            transparent 60%
          );
    
        border-radius: 24px;
    
        padding: 56px 64px;
      }
    
    
      .lav-biz-bridge-eyebrow {
        font-size: 14px;
    
        font-weight: 600;
    
        letter-spacing: .04em;
    
        text-transform: uppercase;
    
        color: var(--lav-brand-sky);
    
        margin-bottom: 16px;
      }
    
    
      .lav-biz-bridge-title {
        font-size: 32px;
    
        font-weight: 800;
    
        line-height: 1.2;
    
        color: #FFFFFF;
    
        margin-bottom: 16px;
      }
    
    
      .lav-biz-bridge-desc {
        font-size: 16px;
    
        line-height: 1.6;
    
        color: var(
          --lav-texto-claro-suave,
          #B3C4DF
        );
    
        max-width: 560px;
    
        margin-bottom: 24px;
      }
    
    
      .lav-biz-bridge-list {
        list-style: none;
    
        margin: 0;
    
        padding: 0;
    
        display: flex;
    
        flex-direction: column;
    
        gap: 10px;
      }
    
    
      .lav-biz-bridge-list li {
        display: flex;
    
        align-items: center;
    
        gap: 10px;
    
        font-size: 15px;
    
        color: #C6D5EC;
      }
    
    
      .lav-biz-bridge-list li i {
        color: var(--lav-success);
    
        font-size: 16px;
      }
    
    
      .lav-biz-bridge-cta {
        display: flex;
    
        flex-direction: column;
    
        align-items: flex-start;
    
        gap: 16px;
    
        white-space: nowrap;
      }
    
    
      .lav-biz-bridge-btn {
        display: inline-flex;
    
        align-items: center;
    
        gap: 10px;
    
        background: var(--lav-agua);
    
        color: #06243B !important;
    
        font-size: 16px;
    
        font-weight: 700;
    
        padding: 16px 28px;
    
        border-radius: 999px;
    
        transition:
          box-shadow .2s ease,
          transform .2s ease;
      }
    
    
      .lav-biz-bridge-btn:hover {
        box-shadow:
          0 10px 24px -10px rgba(47, 159, 224, .7);
    
        transform: translateX(2px);
      }
    
    
      .lav-biz-bridge-link {
        font-size: 14px;
    
        font-weight: 600;
    
        color:
          var(--lav-texto-claro-suave, #B3C4DF) !important;
    
        text-decoration: underline;
    
        text-underline-offset: 4px;
      }
    
    
      .lav-biz-bridge-link:hover {
        color: #FFFFFF !important;
      }
    
    
      /* ============================================================
         BUSINESS BRIDGE — TABLET / MOBILE
         ============================================================ */
    
      @media (max-width: 992px) {
    
        .lav-biz-bridge {
          padding: 56px 0;
        }
    
    
        .lav-biz-bridge-card {
          grid-template-columns: 1fr;
    
          gap: 32px;
    
          padding: 40px 32px;
        }
    
    
        .lav-biz-bridge-cta {
          align-items: flex-start;
        }
    
    
        .lav-biz-bridge-title {
          font-size: 26px;
        }
    
      }
    
    
      @media (max-width: 576px) {
    
        .lav-biz-bridge {
          padding: 48px 0;
        }
    
    
        .lav-biz-bridge-card {
          padding: 32px 24px;
    
          border-radius: 18px;
        }
    
    
        .lav-biz-bridge-title {
          font-size: 24px;
        }
    
    
        .lav-biz-bridge-desc {
          font-size: 15px;
        }
    
    
        .lav-biz-bridge-btn {
          width: 100%;
    
          justify-content: center;
        }
    
      }
    
    </style>

@endsection