<?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 = 'Sobre Nosotros - ' . $nombreWeb;
$pageDescription = 'Conoce más sobre ' . $nombreWeb . ', nuestra misión, visión y el equipo que cuida de tus mascotas.';
require './includes/header.php'; 
?>

<!-- Hero visual -->
<section class="py-5 position-relative hero-confirmacion" style="background: url('images/banner-image-bg.jpg') center/cover no-repeat; min-height: 350px;">
  <div class="container-lg position-relative z-2">
    <div class="row justify-content-center align-items-center text-center" style="min-height: 350px;">
      <div class="col-lg-8 mx-auto">
        <div class="bg-dark bg-opacity-75 rounded-4 p-5 shadow-lg">
          <h1 class="display-3 fw-bold text-white mb-3">Sobre Nosotros</h1>
          <p class="lead text-white-50 mb-0">Pasión, compromiso y excelencia en el cuidado de tus mascotas.</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>

<!-- Cards de misión, visión y valores -->
<section class="section-padding bg-light">
  <div class="container-lg">
    <div class="row justify-content-center mb-5">
      <div class="col-lg-8 text-center">
        <h2 class="fw-bold mb-3">¿Quiénes somos?</h2>
        <p class="lead">En <strong><?= htmlspecialchars($nombreWeb) ?></strong> trabajamos cada día para mejorar la vida de los animales y sus familias, combinando tecnología, experiencia y un trato humano y cercano.</p>
      </div>
    </div>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm text-center p-4 animate__animated animate__fadeInUp">
          <div class="mb-3">
            <i class="fas fa-bullseye text-primary" style="font-size: 3rem;"></i>
          </div>
          <h4 class="fw-bold">Nuestra Misión</h4>
          <p>Ofrecer servicios veterinarios de excelencia, productos innovadores y asesoramiento personalizado, promoviendo la salud y felicidad de los animales de compañía y la tranquilidad de sus familias.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm text-center p-4 animate__animated animate__fadeInUp animate__delay-1s">
          <div class="mb-3">
            <i class="fas fa-eye text-primary" style="font-size: 3rem;"></i>
          </div>
          <h4 class="fw-bold">Nuestra Visión</h4>
          <p>Ser la veterinaria de referencia en la región, reconocida por la calidad profesional, la calidez humana y el compromiso con el bienestar animal.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 border-0 shadow-sm text-center p-4 animate__animated animate__fadeInUp animate__delay-2s">
          <div class="mb-3">
            <i class="fas fa-heart text-primary" style="font-size: 3rem;"></i>
          </div>
          <h4 class="fw-bold">Nuestros Valores</h4>
          <p>Empatía, profesionalismo, innovación y amor por los animales. Nos esforzamos por crear un ambiente de confianza y respeto para todos.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Sección de equipo -->
<section class="section-padding bg-white">
  <div class="container-lg">
    <div class="row justify-content-center mb-5">
      <div class="col-lg-8 text-center">
        <h2 class="fw-bold mb-3">Nuestro Equipo</h2>
        <p class="lead">Un grupo de profesionales apasionados y dedicados al bienestar animal.</p>
      </div>
    </div>
    <div class="row g-4 justify-content-center">
      <div class="col-md-4 col-sm-6">
        <div class="card border-0 shadow-sm text-center p-4 h-100 animate__animated animate__fadeInUp">
          <div class="d-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary rounded-circle mb-3 mx-auto" style="width:120px;height:120px;">
            <i class="fas fa-user-md" style="font-size: 3.5rem;"></i>
          </div>
          <h5 class="fw-bold mb-1">Dra. Ana López</h5>
          <p class="text-primary mb-1">Veterinaria General</p>
          <p class="small text-muted">Especialista en medicina interna y apasionada por el bienestar animal.</p>
        </div>
      </div>
      <div class="col-md-4 col-sm-6">
        <div class="card border-0 shadow-sm text-center p-4 h-100 animate__animated animate__fadeInUp animate__delay-1s">
          <div class="d-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary rounded-circle mb-3 mx-auto" style="width:120px;height:120px;">
            <i class="fas fa-user-md" style="font-size: 3.5rem;"></i>
          </div>
          <h5 class="fw-bold mb-1">Dr. Juan Pérez</h5>
          <p class="text-primary mb-1">Cirujano Veterinario</p>
          <p class="small text-muted">Experto en cirugía y atención de emergencias veterinarias.</p>
        </div>
      </div>
      <div class="col-md-4 col-sm-6">
        <div class="card border-0 shadow-sm text-center p-4 h-100 animate__animated animate__fadeInUp animate__delay-2s">
          <div class="d-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary rounded-circle mb-3 mx-auto" style="width:120px;height:120px;">
            <i class="fas fa-user-nurse" style="font-size: 3.5rem;"></i>
          </div>
          <h5 class="fw-bold mb-1">Lic. Marta Gómez</h5>
          <p class="text-primary mb-1">Asistente Veterinaria</p>
          <p class="small text-muted">Atención al cliente y apoyo en procedimientos clínicos.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Llamado a la acción final -->
<section class="py-5 bg-primary text-white text-center">
  <div class="container-lg">
    <h2 class="fw-bold mb-3">¿Listo para brindarle lo mejor a tu mascota?</h2>
    <p class="lead mb-4">Visítanos, agenda una consulta o contáctanos para cualquier duda. ¡En <?= htmlspecialchars($nombreWeb) ?> estamos para ayudarte!</p>
    <a href="./contacto" class="btn btn-light btn-lg px-4 py-2 fw-bold">Contáctanos</a>
  </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" /> 