<?php
require_once __DIR__ . '/config/config.php';
require_once __DIR__ . '/includes/icons.php';

$tituloPagina = 'Inicio';
$descripcionPagina = $config['site_descripcion'];

$servicios = $conn->query("SELECT * FROM servicios WHERE activo = 1 ORDER BY orden ASC LIMIT 6");
$portafolioDestacado = $conn->query("SELECT * FROM portafolio WHERE activo = 1 AND destacado = 1 ORDER BY orden ASC LIMIT 10");
$testimonios = $conn->query("SELECT * FROM testimonios WHERE activo = 1 ORDER BY orden ASC LIMIT 3");

require __DIR__ . '/includes/header.php';

$heroImg = isset($config['hero_imagen']) ? $config['hero_imagen'] : '';
$heroStyle = $heroImg
    ? 'background-image: linear-gradient(135deg, rgba(10,22,40,0.93) 0%, rgba(13,32,64,0.85) 100%), url(\'' . BASE_URL . e($heroImg) . '\'); background-size: cover; background-position: center;'
    : '';
?>

<!-- ================= HERO ================= -->
<section class="relative overflow-hidden" style="<?= $heroStyle ? $heroStyle : 'background: var(--gradiente-dark);' ?> min-height: 92vh; display: flex; align-items: center;">

  <!-- Glows ambientales -->
  <div class="glow-cian" style="width:600px;height:600px;top:-200px;left:-150px;opacity:0.5;"></div>
  <div class="glow-cian" style="width:400px;height:400px;bottom:-100px;right:-100px;opacity:0.3;"></div>

  <!-- Grid decorativo -->
  <div class="absolute inset-0 opacity-5" style="background-image: linear-gradient(var(--cian) 1px, transparent 1px), linear-gradient(90deg, var(--cian) 1px, transparent 1px); background-size: 60px 60px;"></div>

  <div class="max-w-7xl mx-auto px-6 lg:px-10 py-24 grid lg:grid-cols-2 gap-16 items-center w-full">
    <div class="fade-up relative z-10">
      <p class="eyebrow mb-5">Desarrollo · Automatización · Seguridad</p>
      <h1 class="font-display text-5xl md:text-6xl font-semibold leading-[1.05] mb-7">
        Tecnología a medida para <span class="texto-gradiente">empresas que no se detienen.</span>
      </h1>
      <p class="text-lg mb-9 leading-relaxed" style="color:var(--gris-tech); max-width: 480px;">
        Desarrollamos web, apps móviles y sistemas de automatización. Soporte IT proactivo y ciberseguridad para que tu operación nunca pare.
      </p>
      <div class="flex flex-wrap gap-4">
        <a href="<?= BASE_URL ?>/contacto.php" class="btn-primario">
          Iniciar proyecto
          <span class="w-4 h-4"><?= obtenerIcono('arrow-right') ?></span>
        </a>
        <a href="<?= BASE_URL ?>/portafolio.php" class="btn-secundario">Ver portafolio</a>
      </div>
    </div>

    <!-- Visualización tech decorativa -->
    <?php if (!$heroImg): ?>
    <div class="relative hidden lg:block h-[420px]" aria-hidden="true">
      <div class="absolute inset-0 flex items-center justify-center">
        <img src="<?= BASE_URL ?>/assets/img/logo-mitech.png" alt="" class="w-2/3 drop-shadow-2xl" style="filter: drop-shadow(0 0 40px rgba(0,200,240,0.4));">
      </div>
      <!-- Anillos decorativos -->
      <div class="absolute inset-0 flex items-center justify-center" style="animation: rotar 20s linear infinite;">
        <div style="width:380px;height:380px;border:1px solid rgba(0,200,240,0.2);border-radius:50%;"></div>
      </div>
      <div class="absolute inset-0 flex items-center justify-center" style="animation: rotar 14s linear infinite reverse;">
        <div style="width:280px;height:280px;border:1px dashed rgba(0,200,240,0.15);border-radius:50%;"></div>
      </div>
    </div>
    <style>@keyframes rotar { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }</style>
    <?php endif; ?>
  </div>
</section>

<!-- ================= SERVICIOS ================= -->
<section class="max-w-7xl mx-auto px-6 lg:px-10 py-24">
  <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14">
    <div>
      <p class="eyebrow mb-4">Lo que hacemos</p>
      <div class="divisor-tech"></div>
      <h2 class="font-display text-3xl md:text-4xl font-semibold max-w-lg">Un equipo técnico para todas tus necesidades digitales.</h2>
    </div>
    <a href="<?= BASE_URL ?>/servicios.php" class="whitespace-nowrap flex items-center gap-2 text-[var(--cian)] font-medium hover:gap-3 transition-all">Ver todos los servicios <span class="w-4 h-4"><?= obtenerIcono('arrow-right') ?></span></a>
  </div>
  <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <?php while ($s = $servicios->fetch_assoc()): ?>
    <div class="tarjeta-servicio">
      <div class="icono-wrap"><span class="w-6 h-6"><?= obtenerIcono($s['icono']) ?></span></div>
      <h3 class="font-display text-xl font-semibold mb-2"><?= e($s['titulo']) ?></h3>
      <p class="leading-relaxed" style="color:var(--gris-tech);"><?= e($s['descripcion_corta']) ?></p>
    </div>
    <?php endwhile; ?>
  </div>
</section>

<!-- Separador -->
<div style="height:1px;background:var(--borde);max-width:1280px;margin:0 auto;"></div>

<!-- ================= PRODUCTOS PROPIOS ================= -->
<?php
$productosHome = $conn->query("SELECT * FROM productos WHERE activo = 1 ORDER BY orden ASC LIMIT 4");
if ($productosHome->num_rows > 0):
?>
<section class="py-24" style="background:linear-gradient(180deg,var(--azul-deep) 0%,rgba(13,32,64,0.4) 100%);">
  <div class="max-w-7xl mx-auto px-6 lg:px-10">
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14">
      <div>
        <p class="eyebrow mb-4">Software propio</p>
        <div class="divisor-tech"></div>
        <h2 class="font-display text-3xl md:text-4xl font-semibold max-w-lg">Productos que desarrollamos y usamos en producción real.</h2>
      </div>
      <a href="<?= BASE_URL ?>/productos.php" class="whitespace-nowrap flex items-center gap-2 text-[var(--cian)] font-medium">Ver todos los productos <span class="w-4 h-4"><?= obtenerIcono('arrow-right') ?></span></a>
    </div>
    <div class="grid sm:grid-cols-2 gap-6">
      <?php while ($prod = $productosHome->fetch_assoc()): ?>
      <a href="<?= BASE_URL ?>/producto-detalle.php?slug=<?= e($prod['slug']) ?>" class="group block p-8 relative overflow-hidden" style="background:rgba(13,32,64,0.6);border:1px solid var(--borde);transition:border-color .3s,box-shadow .3s;">
        <div class="absolute top-0 left-0 right-0 h-0.5" style="background:var(--gradiente-cian);transform:scaleX(0);transition:transform .3s;" class="group-hover:scale-x-100"></div>
        <div class="flex items-start justify-between mb-4">
          <span class="text-xs font-bold px-3 py-1 rounded-full" style="background:rgba(0,200,240,0.12);color:var(--cian);border:1px solid rgba(0,200,240,0.25);"><?= e($prod['badge']) ?></span>
          <span class="w-5 h-5 text-[var(--cian)] opacity-0 group-hover:opacity-100 transition"><?= obtenerIcono('arrow-right') ?></span>
        </div>
        <h3 class="font-display text-2xl font-semibold mb-2 texto-gradiente"><?= e($prod['nombre']) ?></h3>
        <p class="text-sm leading-relaxed" style="color:var(--gris-tech);"><?= e($prod['tagline']) ?></p>
        <?php
        $caracts = json_decode($prod['caracteristicas'] ?: '[]', true);
        if (!empty($caracts)):
        ?>
        <ul class="mt-4 space-y-1">
          <?php foreach (array_slice($caracts, 0, 3) as $f): ?>
          <li class="flex items-center gap-2 text-xs" style="color:var(--gris-tech);">
            <span class="w-3 h-3 text-[var(--cian)] flex-shrink-0"><?= obtenerIcono('check') ?></span><?= e($f) ?>
          </li>
          <?php endforeach; ?>
        </ul>
        <?php endif; ?>
      </a>
      <?php endwhile; ?>
    </div>
  </div>
</section>
<?php endif; ?>

<!-- Separador -->
<div style="height:1px;background:var(--borde);max-width:1280px;margin:0 auto;"></div>

<!-- ================= PORTAFOLIO ================= -->
<section class="py-24" style="background: var(--azul-mid);">
  <div class="max-w-7xl mx-auto px-6 lg:px-10">
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14">
      <div>
        <p class="eyebrow mb-4">Trabajo seleccionado</p>
        <div class="divisor-tech"></div>
        <h2 class="font-display text-3xl md:text-4xl font-semibold max-w-lg">Proyectos que hablan por sí solos.</h2>
      </div>
      <a href="<?= BASE_URL ?>/portafolio.php" class="whitespace-nowrap flex items-center gap-2 text-[var(--cian)] font-medium">Ver portafolio completo <span class="w-4 h-4"><?= obtenerIcono('arrow-right') ?></span></a>
    </div>

    <?php if ($portafolioDestacado->num_rows > 0): ?>
    <div class="relative">
      <div id="carruselTrabajos" class="carrusel-scroll flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-2">
        <?php while ($p = $portafolioDestacado->fetch_assoc()): ?>
        <a href="<?= BASE_URL ?>/portafolio-detalle.php?slug=<?= e($p['slug']) ?>" class="tarjeta-portafolio snap-start flex-shrink-0" style="width:min(420px,80vw);">
          <?php if ($p['imagen_principal']): ?>
          <img src="<?= BASE_URL . e($p['imagen_principal']) ?>" alt="<?= e($p['titulo']) ?>">
          <?php endif; ?>
          <div class="overlay">
            <p class="eyebrow mb-2"><?= e($p['categoria']) ?></p>
            <h3 class="font-display text-2xl font-semibold text-white"><?= e($p['titulo']) ?></h3>
          </div>
        </a>
        <?php endwhile; ?>
      </div>
      <?php if ($portafolioDestacado->num_rows > 1): ?>
      <button id="carruselPrev" type="button" aria-label="Anterior" class="hidden md:flex absolute left-0 top-1/2 -translate-y-1/2 -translate-x-5 w-11 h-11 items-center justify-center rounded-full text-[var(--cian)]" style="background:rgba(0,200,240,0.1);border:1px solid var(--borde);">
        <span class="w-5 h-5 rotate-180"><?= obtenerIcono('arrow-right') ?></span>
      </button>
      <button id="carruselNext" type="button" aria-label="Siguiente" class="hidden md:flex absolute right-0 top-1/2 -translate-y-1/2 translate-x-5 w-11 h-11 items-center justify-center rounded-full text-[var(--cian)]" style="background:rgba(0,200,240,0.1);border:1px solid var(--borde);">
        <span class="w-5 h-5"><?= obtenerIcono('arrow-right') ?></span>
      </button>
      <?php endif; ?>
    </div>
    <script>
    (function() {
      var c = document.getElementById('carruselTrabajos');
      var prev = document.getElementById('carruselPrev');
      var next = document.getElementById('carruselNext');
      if (!c) return;
      function mover(d) {
        var t = c.querySelector('a');
        c.scrollBy({ left: d * ((t ? t.offsetWidth : 400) + 24), behavior: 'smooth' });
      }
      if (prev) prev.addEventListener('click', function(){ mover(-1); });
      if (next) next.addEventListener('click', function(){ mover(1); });
    })();
    </script>
    <?php else: ?>
    <p style="color:var(--gris-tech);">El portafolio se publicará próximamente.</p>
    <?php endif; ?>
  </div>
</section>

<?php if ($testimonios->num_rows > 0): ?>
<!-- ================= TESTIMONIOS ================= -->
<section class="max-w-7xl mx-auto px-6 lg:px-10 py-24">
  <p class="eyebrow text-center mb-12">Lo que dicen nuestros clientes</p>
  <div class="grid md:grid-cols-3 gap-8">
    <?php while ($t = $testimonios->fetch_assoc()): ?>
    <div style="border-left:2px solid var(--cian);padding-left:1.5rem;">
      <p class="leading-relaxed mb-4" style="color:var(--gris-tech);">&ldquo;<?= e($t['testimonio']) ?>&rdquo;</p>
      <p class="font-semibold"><?= e($t['cliente']) ?></p>
      <?php if ($t['empresa']): ?><p class="text-sm" style="color:var(--gris-tech);"><?= e($t['empresa']) ?></p><?php endif; ?>
    </div>
    <?php endwhile; ?>
  </div>
</section>
<?php endif; ?>

<!-- ================= CTA ================= -->
<section class="max-w-7xl mx-auto px-6 lg:px-10 pb-24">
  <div class="relative overflow-hidden p-12 md:p-16 text-center" style="background: linear-gradient(135deg, rgba(0,200,240,0.12) 0%, rgba(13,32,64,0.8) 100%); border: 1px solid var(--borde);">
    <div class="glow-cian absolute" style="width:400px;height:400px;top:-150px;left:50%;transform:translateX(-50%);opacity:0.3;"></div>
    <h2 class="font-display text-3xl md:text-4xl font-semibold mb-5 relative z-10">¿Tienes un proyecto en mente?</h2>
    <p class="mb-9 relative z-10 max-w-xl mx-auto" style="color:var(--gris-tech);">Cuéntanos qué necesitas y te proponemos la solución tecnológica más adecuada para tu negocio.</p>
    <a href="<?= BASE_URL ?>/contacto.php" class="btn-primario inline-flex relative z-10">
      Hablemos
      <span class="w-4 h-4"><?= obtenerIcono('arrow-right') ?></span>
    </a>
  </div>
</section>

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