@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-grid">

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

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

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

              <div class="lav-contact-alt-item">
                <span class="lav-contact-alt-icon"><i class="bi bi-whatsapp" aria-hidden="true"></i></span>
                <div>
                  <span class="lav-contact-alt-label">Teléfono / WhatsApp</span>
                  <p class="lav-contact-alt-value"><a href="https://wa.me/56984284828" target="_blank" rel="noopener noreferrer">+56 9 8428 4828 (Puerto Aysén)</a></p>
                  <p class="lav-contact-alt-value"><a href="https://wa.me/56987023764" target="_blank" rel="noopener noreferrer">+56 9 8702 3764 (Coyhaique)</a></p>
                </div>
              </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-card" data-aos="fade-left" data-aos-duration="800" aria-label="Formulario de contacto">

            <div id="lavContactAlert" class="lav-contact-alert lav-contact-alert-success" role="status" hidden>
              Se abrió WhatsApp / tu correo con el mensaje listo para enviar.
            </div>

            <h2 class="lav-contact-card-title">Escríbenos aquí</h2>
            <p class="lav-contact-card-desc">Elige cómo prefieres que te respondamos.</p>

            <form id="lavContactForm" class="lav-contact-form" novalidate>

              <div class="lav-form-row">
                <div class="lav-form-group">
                  <label for="name">Nombre</label>
                  <input type="text" id="name" name="name" placeholder="Tu nombre" required>
                </div>

                <div class="lav-form-group">
                  <label for="phone">Teléfono (opcional)</label>
                  <input type="tel" id="phone" name="phone" placeholder="+56 9 ...">
                </div>
              </div>

              <div class="lav-form-group">
                <label for="message">Mensaje</label>
                <textarea id="message" name="message" rows="4" placeholder="Cuéntanos qué necesitas: retiro, cotización, dudas..." required></textarea>
              </div>

              <div class="lav-form-group">
                <label>Enviar por</label>
                <div class="lav-contact-channel-options">
                  <label class="lav-contact-channel">
                    <input type="radio" name="channel" value="whatsapp-aysen" checked>
                    <i class="bi bi-whatsapp" aria-hidden="true"></i>
                    <span>Puerto Aysén</span>
                  </label>
                  <label class="lav-contact-channel">
                    <input type="radio" name="channel" value="whatsapp-coyhaique">
                    <i class="bi bi-whatsapp" aria-hidden="true"></i>
                    <span>Coyhaique</span>
                  </label>
                  <label class="lav-contact-channel">
                    <input type="radio" name="channel" value="email">
                    <i class="bi bi-envelope" aria-hidden="true"></i>
                    <span>Correo</span>
                  </label>
                </div>
              </div>

              <button type="submit" class="lav-contact-submit">
                <i class="bi bi-send" aria-hidden="true"></i>
                <span>Enviar mensaje</span>
              </button>

              <p class="lav-contact-form-note">
                Se abrirá WhatsApp o tu app de correo con el mensaje ya escrito, listo para enviar.
              </p>
            </form>
          </div>

        </div>

        <div class="lav-contact-map" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
          <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>
    </section><!-- /Contacto Section -->

    <style>
      .lav-contact { padding: 72px 0; background: var(--lav-bg-light); }
      .lav-contact .container { max-width: 1300px; }

      .lav-contact-grid {
        display: grid;
        grid-template-columns: 460px 1fr;
        gap: 64px;
        align-items: start;
        margin-bottom: 40px;
      }

      .lav-contact-eyebrow {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--lav-primary);
        margin-bottom: 18px;
      }

      .lav-contact-title {
        font-size: 34px;
        font-weight: 800;
        line-height: 1.25;
        color: var(--lav-dark);
        margin-bottom: 18px;
      }

      .lav-contact-desc {
        font-size: 16px;
        line-height: 1.6;
        color: var(--lav-text-secondary);
        margin-bottom: 32px;
      }

      /* Card de datos de contacto (mismo lenguaje visual que el "alt" de cotización) */
      .lav-contact-alt {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 24px;
      }

      .lav-contact-alt-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
      }

      .lav-contact-alt-icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: var(--lav-bg-light);
        color: var(--lav-primary);
        font-size: 16px;
      }

      .lav-contact-alt-label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--lav-text-secondary);
        margin-bottom: 4px;
      }

      .lav-contact-alt-value {
        font-size: 15px;
        font-weight: 600;
        color: var(--lav-dark);
        margin: 0;
      }

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

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

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

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

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

      /* Card del formulario */
      .lav-contact-card {
        background: #FFFFFF;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 20px 48px rgba(27, 43, 58, 0.08);
      }

      .lav-contact-card-title {
        font-size: 22px;
        font-weight: 700;
        color: var(--lav-dark);
        margin-bottom: 4px;
      }

      .lav-contact-card-desc {
        font-size: 14px;
        color: var(--lav-text-secondary);
        margin-bottom: 28px;
      }

      .lav-contact-alert {
        padding: 14px 16px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 24px;
      }

      .lav-contact-alert-success {
        background: #E4F3EC;
        color: #1F6E4A;
      }

      .lav-contact-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .lav-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      .lav-form-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .lav-form-group label {
        font-size: 13px;
        font-weight: 700;
        color: var(--lav-dark);
      }

      .lav-form-group input,
      .lav-form-group textarea {
        border: 1px solid var(--lav-border);
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 15px;
        color: var(--lav-dark);
        background: #FFFFFF;
        font-family: inherit;
        width: 100%;
      }

      .lav-form-group input:focus,
      .lav-form-group textarea:focus {
        outline: none;
        border-color: var(--lav-primary);
      }

      .lav-form-group textarea {
        resize: vertical;
      }

      .lav-contact-channel-options {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .lav-contact-channel {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
        white-space: nowrap;
        border: 1px solid var(--lav-border);
        border-radius: 999px;
        padding: 9px 16px;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--lav-dark);
        cursor: pointer;
        transition: border-color .2s ease, background-color .2s ease;
      }

      .lav-contact-channel:has(input:checked) {
        border-color: var(--lav-primary);
        background: var(--lav-bg-light);
      }

      .lav-contact-channel input[type="radio"] {
        accent-color: var(--lav-primary);
        width: 15px;
        height: 15px;
        margin: 0;
        flex-shrink: 0;
      }

      .lav-contact-channel i {
        color: var(--lav-primary);
        font-size: 14px;
        flex-shrink: 0;
      }

      .lav-contact-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: var(--lav-dark);
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 700;
        padding: 16px 24px;
        border: none;
        border-radius: 999px;
        cursor: pointer;
        transition: background-color .2s ease;
        margin-top: 4px;
      }

      .lav-contact-submit:hover {
        background: #0F1C27;
      }

      .lav-contact-form-note {
        font-size: 12px;
        line-height: 1.5;
        color: var(--lav-text-secondary);
        text-align: center;
        margin: 4px 0 0;
      }

      .lav-contact-map {
        border-radius: 20px;
        overflow: hidden;
        height: 380px;
        background: #FFFFFF;
      }

      .lav-contact-map iframe {
        display: block;
      }

      @media (max-width: 992px) {
        .lav-contact-grid { grid-template-columns: 1fr; }
        .lav-contact-title { font-size: 28px; }
      }

      @media (max-width: 576px) {
        .lav-form-row { grid-template-columns: 1fr; }
        .lav-contact-card { padding: 28px 22px; }
        .lav-contact-map { height: 260px; }
      }
    </style>

    <script>
      (function () {
        var form = document.getElementById('lavContactForm');
        var alertBox = document.getElementById('lavContactAlert');
        if (!form) return;

        var WHATSAPP_NUMBERS = {
          'whatsapp-aysen': '56984284828',
          'whatsapp-coyhaique': '56987023764'
        };
        var CONTACT_EMAIL = 'ventas@lavaustral.cl';

        form.addEventListener('submit', function (e) {
          e.preventDefault();

          var name = form.name.value.trim();
          var phone = form.phone.value.trim();
          var message = form.message.value.trim();
          var channel = form.channel.value;

          var lines = [
            'Hola, mi nombre es ' + name + '.',
            phone ? 'Mi teléfono es ' + phone + '.' : null,
            message
          ].filter(Boolean);
          var body = lines.join('\n');

          if (channel === 'email') {
            var subject = encodeURIComponent('Contacto desde la web — ' + name);
            window.location.href = 'mailto:' + CONTACT_EMAIL + '?subject=' + subject + '&body=' + encodeURIComponent(body);
          } else {
            var number = WHATSAPP_NUMBERS[channel] || WHATSAPP_NUMBERS['whatsapp-aysen'];
            window.open('https://wa.me/' + number + '?text=' + encodeURIComponent(body), '_blank', 'noopener');
          }

          if (alertBox) {
            alertBox.hidden = false;
          }
        });
      })();
    </script>

    <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