<?php 
require './config/database.php';
// Obtener nombre de la veterinaria
$stmtWeb = $conn->prepare("SELECT * FROM web_info LIMIT 1");
$stmtWeb->execute();
$webInfo = $stmtWeb->get_result()->fetch_assoc();
$nombreWeb = isset($webInfo['nombre']) && $webInfo['nombre'] ? $webInfo['nombre'] : 'Veterinaria';
$pageTitle = 'Contacto - ' . $nombreWeb;
$pageDescription = 'Contacta con ' . $nombreWeb . ' para consultas, turnos o información sobre nuestros servicios veterinarios.';
require './includes/header.php'; 
// Obtener datos de contacto desde la base de datos
$stmtWeb = $conn->prepare("SELECT * FROM web_info LIMIT 1");
$stmtWeb->execute();
$webInfo = $stmtWeb->get_result()->fetch_assoc();
$direccion = $webInfo['direccion'] ?? '';
$telefono = $webInfo['telefono'] ?? '';
$email = $webInfo['email'] ?? '';
$whatsapp = $webInfo['whatsapp'] ?? '';
$ubicacion_maps = $webInfo['ubicacion_maps'] ?? '';
?>

<!-- Hero visual -->
<section class="py-5 position-relative hero-confirmacion" style="background: url('images/banner-image-bg.jpg') center/cover no-repeat; min-height: 300px;">
  <div class="container-lg position-relative z-2">
    <div class="row justify-content-center align-items-center text-center" style="min-height: 300px;">
      <div class="col-lg-8 mx-auto">
        <div class="bg-dark bg-opacity-75 rounded-4 p-5 shadow-lg">
          <h1 class="display-4 fw-bold text-white mb-3">Contáctanos</h1>
          <p class="lead text-white-50 mb-0">¿Tienes dudas, consultas o quieres agendar un turno? ¡Estamos para ayudarte!</p>
        </div>
      </div>
    </div>
  </div>
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-50" style="z-index:1;"></div>
</section>
<style>
  /* Estilos para las tarjetas y espaciado */
.card {
  transition: transform 0.2s ease-in-out;
}
.card:hover {
  transform: translateY(-5px);
}
.icon-wrapper {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-success-soft {
  background-color: rgba(25, 135, 84, 0.1) !important;
}
.bg-primary-soft {
  background-color: rgba(13, 110, 253, 0.1) !important;
}
</style>
<!-- Sección de Contacto -->
<section class="section-padding bg-light">
  <div class="container-lg">
    <!-- Primera fila: WhatsApp y Horarios -->
    <div class="row g-4 mb-4">
      <!-- Columna Izquierda: WhatsApp -->
      <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body p-4">
            <div class="d-flex align-items-center mb-4">
              <div class="icon-wrapper bg-success-soft rounded-circle p-3 me-3">
                <i class="fab fa-whatsapp text-success fs-4"></i>
              </div>
              <h2 class="h4 fw-bold mb-0">Escríbenos por WhatsApp</h2>
            </div>
            <p class="mb-4">Completa el formulario para enviarnos un mensaje directo. Te responderemos a la brevedad.</p>
            <?php if($whatsapp): ?>
              <form id="whatsappForm" onsubmit="enviarWhatsApp(event)">
                <div class="mb-3">
                  <label for="wa_nombre" class="form-label fw-semibold">Nombre</label>
                  <input type="text" class="form-control bg-light border-0" id="wa_nombre" required placeholder="Tu nombre">
                </div>
                <div class="mb-4">
                  <label for="wa_mensaje" class="form-label fw-semibold">Mensaje</label>
                  <textarea class="form-control bg-light border-0" id="wa_mensaje" rows="4" required placeholder="¿En qué te podemos ayudar?"></textarea>
                </div>
                <button type="submit" class="btn btn-success btn-lg w-100 d-inline-flex align-items-center justify-content-center gap-2 py-3 fw-bold shadow-sm">
                  <i class="fab fa-whatsapp fs-5"></i>
                  Enviar mensaje
                </button>
              </form>
              <script>
                function enviarWhatsApp(event) {
                  event.preventDefault();
                  var nombre = document.getElementById('wa_nombre').value;
                  var mensaje = document.getElementById('wa_mensaje').value;
                  var telefono = "<?= preg_replace('/[^0-9]/', '', $whatsapp) ?>";
                  var texto = "Hola! Soy " + nombre + ".\n\n" + mensaje;
                  var url = "https://wa.me/" + telefono + "?text=" + encodeURIComponent(texto);
                  window.open(url, '_blank');
                }
              </script>
            <?php else: ?>
              <div class="alert alert-warning mb-0">El número de WhatsApp no está configurado.</div>
            <?php endif; ?>
          </div>
        </div>
      </div>

      <!-- Columna Derecha: Horarios -->
      <div class="col-md-6">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body p-4">
            <div class="d-flex align-items-center mb-4">
              <div class="icon-wrapper bg-primary-soft rounded-circle p-3 me-3">
                <i class="fas fa-clock text-primary fs-4"></i>
              </div>
              <h2 class="h4 fw-bold mb-0">Horarios de Atención</h2>
            </div>
            <div class="mb-4">
              <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                <span class="text-muted">Lunes - Viernes</span>
                <span class="badge bg-primary-soft text-primary">9:00 - 12:30 . 17:00 - 20:00</span>
              </div>
              <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                <span class="text-muted">Sábados</span>
                <span class="badge bg-primary-soft text-primary">9:00 - 12:30</span>
              </div>
              <div class="d-flex justify-content-between align-items-center py-2">
                <span class="text-muted">Domingos</span>
                <span class="badge bg-light text-muted">Cerrado</span>
              </div>
            </div>
            <div class="alert bg-light border border-2 border-primary-subtle rounded-3 p-3 mb-0">
              <div class="d-flex align-items-center">
                <i class="fas fa-ambulance text-danger me-2"></i>
                <span class="small">Servicio de urgencias 24/7</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Segunda fila: Ubicación -->
    <div class="row">
      <div class="col-12">
        <div class="card border-0 shadow-sm">
          <div class="card-body p-4">
            <h2 class="h4 fw-bold mb-3">Ubicación</h2>
            <div class="ratio ratio-16x9 rounded-4 overflow-hidden shadow-sm">
              <?php if($ubicacion_maps): ?>
                <?= str_replace('height="450"', 'height="100%" style="min-height: 100%;"', $webInfo['ubicacion_maps'] ?? ''); ?>
              <?php else: ?>
                <iframe 
                  src="https://www.google.com/maps?q=<?= urlencode($direccion) ?>&output=embed" 
                  class="w-100 h-100 border-0" 
                  allowfullscreen 
                  loading="lazy" 
                  referrerpolicy="no-referrer-when-downgrade">
                </iframe>
              <?php endif; ?>
            </div>
            <?php if($direccion): ?>
              <div class="mt-3">
                <a href="https://www.google.com/maps?ll=-31.696293,-60.759211&z=15&t=m&hl=es-419&gl=AR&mapclient=embed&cid=15736821148612608526" 
                   target="_blank" 
                   class="btn btn-outline-primary w-100 d-flex align-items-center justify-content-center gap-2">
                  <i class="fas fa-directions"></i>
                  Cómo llegar
                </a>
              </div>
            <?php endif; ?>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<?php require './includes/footer.php'; ?>

<!-- Animaciones CSS (opcional, si tienes animate.css) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> 