@extends('layouts.app')

@section('title', 'Contacto | Lavaustral')
@section('description', 'Escríbenos, llámanos o visítanos. Coordinamos tu retiro cuando quieras. Camino Puerto Aysén – Puerto Chacabuco Km 6.')

@section('content')

    <!-- Contacto Section -->
    <section id="contacto" class="lav-contact" aria-label="Contacto y ubicación Lavaustral">

      <div class="container">

        <div class="lav-contact-header" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
          <p class="lav-contact-eyebrow">— Contacto y ubicación</p>
          <h1 class="lav-contact-headline">Estamos para ayudarte</h1>
          <p class="lav-contact-lead">Escríbenos, llámanos o visítanos. Coordinamos tu retiro cuando quieras.</p>
        </div>

        <div class="lav-contact-grid">

          <div class="lav-contact-info" data-aos="fade-up" data-aos-duration="800" data-aos-delay="150">

            <div class="lav-contact-item">
              <span class="lav-contact-item-icon"><i class="bi bi-geo-alt" aria-hidden="true"></i></span>
              <div>
                <span class="lav-contact-item-label">Dirección</span>
                <p class="lav-contact-item-value">Camino Puerto Aysén – Puerto Chacabuco Km 6</p>
              </div>
            </div>

            <div class="lav-contact-item">
              <span class="lav-contact-item-icon"><i class="bi bi-envelope" aria-hidden="true"></i></span>
              <div>
                <span class="lav-contact-item-label">Correo</span>
                <p class="lav-contact-item-value"><a href="mailto:ventas@lavaustral.cl">ventas@lavaustral.cl</a></p>
              </div>
            </div>

            <div class="lav-contact-item">
              <span class="lav-contact-item-icon"><i class="bi bi-telephone" aria-hidden="true"></i></span>
              <div>
                <span class="lav-contact-item-label">Teléfono / WhatsApp</span>
                <p class="lav-contact-item-value"><a href="https://wa.me/56984284828">+56 9 8428 4828 (Puerto Aysen)</a></p>
                <p class="lav-contact-item-value"><a href="https://wa.me/56987023764">+56 9 8702 3764 (Coyhaique)</a></p>
              </div>
            </div>

            <div class="lav-contact-social">
              <a href="#" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><i class="bi bi-facebook" aria-hidden="true"></i></a>
              <a href="#" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><i class="bi bi-instagram" aria-hidden="true"></i></a>
              <a href="#" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><i class="bi bi-linkedin" aria-hidden="true"></i></a>
            </div>

          </div>

          <div class="lav-contact-map" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200">
            <iframe
              title="Ubicación Lavaustral"
              src="https://www.google.com/maps?q=Camino+Puerto+Ays%C3%A9n+-+Puerto+Chacabuco+Km+6&output=embed"
              width="100%"
              height="100%"
              style="border:0;"
              allowfullscreen=""
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade">
            </iframe>
          </div>

        </div>

      </div>

    </section><!-- /Contacto Section -->

    <style>
      #contacto.lav-contact {
        position: relative !important;
        background: var(--lav-bg-light) !important;
        padding: 96px 0 !important;
      }

      .lav-contact-header {
        max-width: 640px;
        margin-bottom: 48px;
      }

      .lav-contact-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-contact-headline {
        font-size: 42px !important;
        font-weight: 800 !important;
        line-height: 1.18 !important;
        color: var(--lav-dark) !important;
        margin-bottom: 18px !important;
      }

      .lav-contact-lead {
        font-size: 17px !important;
        line-height: 1.65 !important;
        color: var(--lav-text-secondary) !important;
      }

      .lav-contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: stretch;
      }

      .lav-contact-info {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .lav-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--lav-border) !important;
      }

      .lav-contact-item-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #FFFFFF !important;
        color: var(--lav-primary) !important;
        font-size: 18px;
      }

      .lav-contact-item-label {
        display: block;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--lav-text-secondary) !important;
        margin-bottom: 4px;
      }

      .lav-contact-item-value {
        font-size: 15.5px;
        font-weight: 600;
        color: var(--lav-dark) !important;
        margin: 0;
      }

      .lav-contact-item-value a {
        color: var(--lav-dark) !important;
      }

      .lav-contact-item-value a:hover {
        color: var(--lav-primary) !important;
      }

      .lav-contact-social {
        display: flex;
        gap: 12px;
        margin-top: 8px;
      }

      .lav-contact-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: #FFFFFF !important;
        color: var(--lav-dark) !important;
        font-size: 16px;
        transition: background-color .2s ease, color .2s ease;
      }

      .lav-contact-social a:hover {
        background: var(--lav-primary) !important;
        color: #FFFFFF !important;
      }

      .lav-contact-map {
        border-radius: 20px;
        overflow: hidden;
        min-height: 340px;
        background: #FFFFFF !important;
      }

      @media (max-width: 992px) {
        .lav-contact-grid {
          grid-template-columns: 1fr;
        }
        .lav-contact-headline {
          font-size: 32px !important;
        }
        .lav-contact-map {
          min-height: 260px;
        }
      }
    </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