@extends('layouts.app')

@section('title', 'Nosotros | Lavaustral')
@section('description', 'Más de 20 años de experiencia industrial en la Región de Aysén, ahora al servicio de tu hogar. Conoce a Lavaustral.')

@section('content')

    <!-- Nosotros Section -->
    <section id="nosotros" class="lav-about" aria-label="Nuestra empresa Lavaustral">

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

          <div class="lav-about-content" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
            <p class="lav-about-eyebrow">— Nuestra empresa</p>
            <h1 class="lav-about-headline">La experiencia industrial, ahora en tu casa</h1>

            <p class="lav-about-text">Durante más de 20 años Lavaustral ha lavado para las exigencias más altas de la industria en la Región de Aysén: uniformes de trabajo, ropa de la industria acuícola e insumos industriales.</p>

            <p class="lav-about-text">Esa misma tecnología, procesos y cuidado los ponemos hoy al servicio de tu hogar. Contamos con instalaciones equipadas y logística propia para el retiro y la entrega en los horarios que acuerdes.</p>

            <p class="lav-about-text">Cuidamos tus prendas para alargar su vida útil, con productos biodegradables y un servicio personalizado prenda por prenda.</p>
          </div>

          <div class="lav-about-features" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">

            <div class="lav-about-feature">
              <span class="lav-about-feature-icon"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
              <h2 class="lav-about-feature-title">+20 años</h2>
              <p class="lav-about-feature-desc">De trayectoria lavando para la industria de la región.</p>
            </div>

            <div class="lav-about-feature">
              <span class="lav-about-feature-icon"><i class="bi bi-water" aria-hidden="true"></i></span>
              <h2 class="lav-about-feature-title">Máquinas industriales</h2>
              <p class="lav-about-feature-desc">Proceso al agua con equipos de alto estándar.</p>
            </div>

            <div class="lav-about-feature">
              <span class="lav-about-feature-icon"><i class="bi bi-truck" aria-hidden="true"></i></span>
              <h2 class="lav-about-feature-title">Logística propia</h2>
              <p class="lav-about-feature-desc">Retiro y despacho en la región de Aysén.</p>
            </div>

            <div class="lav-about-feature">
              <span class="lav-about-feature-icon"><i class="bi bi-droplet" aria-hidden="true"></i></span>
              <h2 class="lav-about-feature-title">Cuidado de tus prendas</h2>
              <p class="lav-about-feature-desc">Suavizante hipoalergénico y productos biodegradables.</p>
            </div>

          </div>

        </div>
      </div>

      
    </section><!-- /Nosotros Section -->

    <style>
      #nosotros.lav-about {
        position: relative !important;
        background: #FFFFFF !important;
        padding: 96px 0 !important;
      }

      .lav-about-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: start;
      }

      .lav-about-eyebrow {
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--lav-primary) !important;
        margin-bottom: 18px;
      }

      .lav-about-headline {
        font-size: 38px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        color: var(--lav-dark) !important;
        margin-bottom: 24px !important;
      }

      .lav-about-text {
        font-size: 15.5px !important;
        line-height: 1.7 !important;
        color: var(--lav-text-secondary) !important;
        margin-bottom: 18px !important;
      }

      .lav-about-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }

      .lav-about-feature {
        background: var(--lav-bg-light) !important;
        border-radius: 18px;
        padding: 28px;
      }

      .lav-about-feature-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--lav-icon-bg) !important;
        border: 1px solid var(--lav-icon-border) !important;
        color: var(--lav-primary) !important;
        font-size: 20px;
        margin-bottom: 18px;
      }

      .lav-about-feature-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--lav-dark) !important;
        margin-bottom: 6px;
      }

      .lav-about-feature-desc {
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--lav-text-secondary) !important;
        margin: 0;
      }

      .lav-about-whatsapp {
        position: fixed !important;
        bottom: 24px !important;
        right: 24px !important;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--lav-whatsapp) !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;
      }

      .lav-about-whatsapp:hover {
        transform: scale(1.06);
        color: #FFFFFF !important;
      }

      @media (max-width: 992px) {
        .lav-about-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .lav-about-headline {
          font-size: 30px !important;
        }
      }

      @media (max-width: 560px) {
        .lav-about-features {
          grid-template-columns: 1fr;
        }
      }
    </style>

    <a href="https://wa.me/56984284828"
       target="_blank"
       rel="noopener noreferrer"
       aria-label="Contactar por WhatsApp"
       style="position:fixed; bottom:24px; right:24px; width:52px; height:52px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(37,211,102,0.35); z-index:999; text-decoration:none;">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="#FFFFFF" aria-hidden="true">
        <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.71.45 3.38 1.29 4.86L2 22l5.36-1.4a9.9 9.9 0 0 0 4.68 1.19h.01c5.46 0 9.9-4.45 9.9-9.9C21.95 6.45 17.5 2 12.04 2Zm0 18.02h-.01a8.1 8.1 0 0 1-4.13-1.13l-.3-.18-3.08.81.82-3-.19-.31a8.1 8.1 0 0 1-1.25-4.31c0-4.48 3.65-8.13 8.15-8.13 2.17 0 4.21.85 5.75 2.39a8.08 8.08 0 0 1 2.38 5.75c0 4.49-3.65 8.14-8.14 8.14Zm4.47-6.1c-.24-.12-1.45-.72-1.68-.8-.23-.08-.39-.12-.56.12-.16.24-.64.8-.78.97-.14.16-.29.18-.53.06-.24-.12-1.02-.38-1.94-1.2-.72-.64-1.2-1.43-1.35-1.67-.14-.24-.02-.37.11-.49.11-.11.24-.29.36-.43.12-.14.16-.24.24-.4.08-.16.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.42-.14 0-.31-.02-.47-.02-.16 0-.43.06-.66.31-.23.24-.86.84-.86 2.05s.88 2.38 1 2.54c.12.16 1.73 2.64 4.2 3.7.59.25 1.05.4 1.41.52.59.19 1.13.16 1.55.1.47-.07 1.45-.59 1.66-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28Z"/>
      </svg>
    </a>

@endsection