<?php
/**
 * TechShop Perú - Página de Inicio
 * 
 * Hero banner, categorías, productos destacados, ofertas, marcas y beneficios.
 * 
 * @package TechShop Perú
 * @version 1.0
 */

$page_title = 'Inicio';
define('SECURE_ACCESS', true);
require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/database.php';
require_once __DIR__ . '/includes/functions.php';

// Obtener banners activos
try {
    $stmt = db()->query('SELECT * FROM banners WHERE activo = 1 ORDER BY orden LIMIT 5');
    $banners = $stmt->fetchAll();
    if (empty($banners)) {
        // Banners por defecto si no hay en BD
        $banners = [
            ['titulo' => '¡Ofertas de Verano!', 'subtitulo' => 'Hasta 30% de descuento', 'descripcion' => 'En laptops, monitores y accesorios seleccionados.', 'texto_boton' => 'Ver Ofertas', 'enlace' => 'pages/ofertas.php'],
            ['titulo' => 'Laptops Gamer', 'subtitulo' => 'Potencia sin límites', 'descripcion' => 'Descubre nuestra selección de laptops gaming con las últimas RTX serie 40.', 'texto_boton' => 'Explorar Laptops', 'enlace' => 'pages/productos.php?categoria=laptops'],
            ['titulo' => 'Tecnología para tu Hogar', 'subtitulo' => 'Smart Home & Oficina', 'descripcion' => 'Equipa tu espacio de trabajo con routers WiFi 6, impresoras EcoTank y más.', 'texto_boton' => 'Comprar Ahora', 'enlace' => 'pages/productos.php'],
        ];
    }
} catch (PDOException $e) {
    $banners = [];
}

// Obtener categorías
try {
    $stmt = db()->query('SELECT * FROM categorias WHERE activo = 1 ORDER BY orden');
    $categorias = $stmt->fetchAll();
} catch (PDOException $e) {
    $categorias = [];
}

// Obtener productos destacados, en oferta y nuevos (helpers reutilizables)
$destacados = get_productos_home('destacados');
$ofertas    = get_productos_home('ofertas');
$nuevos     = get_productos_home('nuevos');

// Obtener testimonios
try {
    $stmt = db()->query('
        SELECT t.*, u.nombres, u.apellidos 
        FROM testimonios t 
        JOIN usuarios u ON t.usuario_id = u.id 
        WHERE t.activo = 1 
        ORDER BY t.fecha_creacion DESC 
        LIMIT 3
    ');
    $testimonios = $stmt->fetchAll();
    if (empty($testimonios)) {
        $testimonios = [
            ['nombres' => 'Carlos', 'apellidos' => 'Mendoza', 'calificacion' => 5, 'comentario' => 'Excelente servicio de entrega a Arequipa. La laptop HP llegó sellada, con factura y en 48 horas.'],
            ['nombres' => 'María', 'apellidos' => 'Flores', 'calificacion' => 5, 'comentario' => 'Compré accesorios gaming Logitech. Muy buena atención y productos 100% originales con garantía oficial.'],
            ['nombres' => 'Jorge', 'apellidos' => 'Sánchez', 'calificacion' => 5, 'comentario' => 'El proceso de compra en línea fue súper rápido y seguro. Altamente recomendado para tecnología en Perú.']
        ];
    }
} catch (PDOException $e) {
    $testimonios = [
        ['nombres' => 'Carlos', 'apellidos' => 'Mendoza', 'calificacion' => 5, 'comentario' => 'Excelente servicio de entrega a Arequipa. La laptop HP llegó sellada, con factura y en 48 horas.'],
        ['nombres' => 'María', 'apellidos' => 'Flores', 'calificacion' => 5, 'comentario' => 'Compré accesorios gaming Logitech. Muy buena atención y productos 100% originales con garantía oficial.'],
        ['nombres' => 'Jorge', 'apellidos' => 'Sánchez', 'calificacion' => 5, 'comentario' => 'El proceso de compra en línea fue súper rápido y seguro. Altamente recomendado para tecnología en Perú.']
    ];
}

include __DIR__ . '/includes/header.php';
?>

<!-- ============================================
     HERO BANNER / CAROUSEL
     ============================================ -->
<section class="hero-section">
    <div id="heroCarousel" class="carousel slide hero-carousel" data-bs-ride="carousel" data-bs-interval="5000">
        <?php if (count($banners) > 1): ?>
        <div class="carousel-indicators">
            <?php foreach ($banners as $i => $b): ?>
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="<?= $i ?>" <?= $i === 0 ? 'class="active" aria-current="true"' : '' ?> aria-label="Slide <?= $i + 1 ?>"></button>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <div class="carousel-inner rounded-3 overflow-hidden">
            <?php foreach ($banners as $i => $banner): 
                $bannerImg = !empty($banner['imagen']) && file_exists(__DIR__ . '/uploads/banners/' . $banner['imagen'])
                    ? UPLOADS_URL . '/banners/' . $banner['imagen']
                    : null;
                $styleAttr = $bannerImg ? 'style="background: linear-gradient(90deg, rgba(15,23,42,0.88) 0%, rgba(15,23,42,0.65) 60%, rgba(15,23,42,0.4) 100%), url(\''.$bannerImg.'\') center/cover no-repeat;"' : '';
            ?>
            <div class="carousel-item <?= $i === 0 ? 'active' : '' ?>">
                <div class="hero-slide text-white" <?= $styleAttr ?>>
                    <div class="container py-2">
                        <div class="row align-items-center">
                            <div class="col-md-8 col-lg-7">
                                <span class="hero-badge mb-2"><i class="bi bi-stars me-1"></i> Destacado TechShop</span>
                                <h2 class="hero-title mb-2 display-6 fw-extrabold text-white" style="text-shadow:0 2px 10px rgba(0,0,0,0.5);"><?= e($banner['titulo']) ?></h2>
                                <p class="hero-subtitle mb-2 fs-5 text-warning fw-semibold"><?= e($banner['subtitulo']) ?></p>
                                <p class="mb-4 text-white-50 fs-6"><?= e($banner['descripcion']) ?></p>
                                <div class="d-flex flex-wrap gap-3">
                                    <a href="<?= url($banner['enlace'] ?? 'pages/productos.php') ?>" class="btn btn-primary btn-lg px-4 rounded-pill shadow btn-shine">
                                        <?= e($banner['texto_boton'] ?? 'Ver más') ?> <i class="bi bi-arrow-right ms-1"></i>
                                    </a>
                                    <a href="<?= url('pages/productos.php') ?>" class="btn btn-outline-light btn-lg px-4 rounded-pill">
                                        Ver Catálogo
                                    </a>
                                </div>

                                <!-- Mini-stats de confianza (estilo e-commerce profesional) -->
                                <div class="hero-stats d-flex flex-wrap gap-4 mt-4">
                                    <div class="hero-stat">
                                        <span class="hero-stat-num">+25,000</span>
                                        <span class="hero-stat-label">Clientes en Perú</span>
                                    </div>
                                    <div class="hero-stat">
                                        <span class="hero-stat-num">+40</span>
                                        <span class="hero-stat-label">Marcas oficiales</span>
                                    </div>
                                    <div class="hero-stat">
                                        <span class="hero-stat-num">24-48h</span>
                                        <span class="hero-stat-label">Entrega en Lima</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <?php if (count($banners) > 1): ?>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Anterior</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Siguiente</span>
        </button>
        <?php endif; ?>
    </div>
</section>

<!-- ============================================
     BARRA DE BENEFICIOS
     ============================================ -->
<section class="benefits-bar bg-white shadow-sm py-3 mb-4 animate-in">
    <div class="container">
        <div class="row text-center g-3">
            <div class="col-6 col-md-3">
                <div class="benefit-item">
                    <div class="benefit-icon"><i class="bi bi-truck"></i></div>
                    <div class="benefit-title">Envíos a Todo el Perú</div>
                    <small class="text-muted">Lima, costa, sierra y selva</small>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="benefit-item">
                    <div class="benefit-icon"><i class="bi bi-shield-check"></i></div>
                    <div class="benefit-title">Compra 100% Segura</div>
                    <small class="text-muted">Protegemos tus datos</small>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="benefit-item">
                    <div class="benefit-icon"><i class="bi bi-arrow-counterclockwise"></i></div>
                    <div class="benefit-title">Garantía Oficial</div>
                    <small class="text-muted">Productos con garantía</small>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="benefit-item">
                    <div class="benefit-icon"><i class="bi bi-headset"></i></div>
                    <div class="benefit-title">Soporte Técnico</div>
                    <small class="text-muted">Asesoría personalizada</small>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================
     CATEGORÍAS
     ============================================ -->
<section class="mb-5">
    <div class="container">
        <div class="section-header">
            <h3 class="section-title">Categorías</h3>
            <a href="<?= url('pages/productos.php') ?>" class="btn btn-outline-primary btn-sm">Ver todas</a>
        </div>
        <div class="row g-3">
            <?php foreach ($categorias as $cat): ?>
            <div class="col-6 col-md-4 col-lg-3">
                <a href="<?= url('pages/productos.php?categoria=' . $cat['slug']) ?>" class="category-card">
                    <div class="category-icon">
                        <i class="bi bi-<?= e($cat['icono'] ?? 'tag') ?>"></i>
                    </div>
                    <div class="category-name"><?= e($cat['nombre']) ?></div>
                    <small class="text-muted"><?= e($cat['descripcion'] ?? '') ?></small>
                </a>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- ============================================
     PRODUCTOS DESTACADOS
     ============================================ -->
<?php if (!empty($destacados)): ?>
<section class="mb-5">
    <div class="container">
        <div class="section-header">
            <h3 class="section-title">Productos Destacados</h3>
            <a href="<?= url('pages/productos.php') ?>" class="btn btn-outline-primary btn-sm">Ver todos</a>
        </div>
        <div class="row g-3">
            <?php foreach ($destacados as $p): ?>
            <div class="col-6 col-md-4 col-lg-3">
                <?php include __DIR__ . '/includes/product-card.php'; ?>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ============================================
     OFERTAS ESPECIALES
     ============================================ -->
<?php if (!empty($ofertas)): ?>
<section class="mb-5 animate-in animate-delay-2">
    <div class="container">
        <div class="ofertas-section-bg text-white shadow-lg animate-in animate-delay-2">
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between mb-4 pb-3 border-bottom" style="border-color: rgba(255,255,255,0.1) !important;">
                <div>
                    <h3 class="fw-bold mb-1 text-white">
                        <i class="bi bi-lightning-charge-fill text-warning me-2"></i>Ofertas Especiales
                    </h3>
                    <p class="text-white-50 mb-0">Hasta agotar stock. ¡No te las pierdas!</p>
                </div>
                <div class="d-flex align-items-center gap-4 mt-3 mt-md-0">
                    <div class="text-end">
                        <small class="text-warning fw-bold text-uppercase d-block mb-1" style="font-size: 0.7rem; letter-spacing:1px;">¡La oferta termina en!</small>
                        <div class="countdown-timer" data-date="<?= date('Y-m-d\T23:59:59', strtotime('+2 days')) ?>"></div>
                    </div>
                    <a href="<?= url('pages/ofertas.php') ?>" class="btn btn-warning fw-bold px-4 rounded-pill">Ver todas</a>
                </div>
            </div>
            <div class="row g-3">
                <?php foreach ($ofertas as $p): ?>
                <div class="col-6 col-md-4 col-lg-3">
                    <?php include __DIR__ . '/includes/product-card.php'; ?>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ============================================
     PRODUCTOS NUEVOS
     ============================================ -->
<?php if (!empty($nuevos)): ?>
<section class="mb-5 animate-in animate-delay-1">
    <div class="container">
        <div class="section-header">
            <h3 class="section-title">Lo Más Nuevo</h3>
            <a href="<?= url('pages/productos.php?orden=nuevos') ?>" class="btn btn-outline-primary btn-sm">Ver más</a>
        </div>
        <div class="row g-3">
            <?php foreach ($nuevos as $p): ?>
            <div class="col-6 col-md-4 col-lg-3">
                <?php include __DIR__ . '/includes/product-card.php'; ?>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- ============================================
     MARCAS DESTACADAS
     ============================================ -->
<section class="mb-5 animate-in animate-delay-3 overflow-hidden">
    <div class="container">
        <div class="section-header">
            <h3 class="section-title">Marcas</h3>
            <a href="<?= url('pages/marcas.php') ?>" class="btn btn-outline-primary btn-sm">Ver todas</a>
        </div>
        <div class="brands-wrapper overflow-hidden py-2" style="mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);">
            <div class="brands-track">
                <?php
                try {
                    $stmt = db()->query('SELECT * FROM marcas WHERE activo = 1 ORDER BY nombre');
                    $marcas_home = $stmt->fetchAll();
                } catch (PDOException $e) {
                    $marcas_home = [];
                }
                // Duplicar marcas para el efecto infinito si son pocas
                if (count($marcas_home) > 0 && count($marcas_home) < 10) {
                    $marcas_home = array_merge($marcas_home, $marcas_home, $marcas_home);
                }
                foreach ($marcas_home as $m):
                ?>
                <a href="<?= url('pages/productos.php?marca=' . $m['slug']) ?>" class="brand-card text-decoration-none">
                    <?= e($m['nombre']) ?>
                </a>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>

<!-- ============================================
     TESTIMONIOS DE CLIENTES
     ============================================ -->
<?php if (!empty($testimonios)): ?>
<section class="mb-5 bg-white p-4 p-md-5 rounded-3 shadow-sm">
    <div class="container">
        <div class="text-center mb-4">
            <h3 class="section-title">Lo que dicen nuestros clientes</h3>
            <p class="text-muted mb-0">Clientes en todo el Perú respaldan nuestro compromiso, garantía y rapidez</p>
        </div>
        <div class="row g-4">
            <?php foreach ($testimonios as $t): ?>
            <div class="col-md-4">
                <div class="card h-100 border-0 bg-light p-3">
                    <div class="card-body text-center">
                        <div class="mb-2">
                            <?= render_estrellas($t['calificacion']) ?>
                        </div>
                        <p class="card-text text-muted fst-italic mb-3">"<?= e($t['comentario']) ?>"</p>
                        <div class="fw-bold text-dark">
                            <i class="bi bi-person-circle text-primary me-1"></i>
                            <?= e($t['nombres'] . ' ' . substr($t['apellidos'], 0, 1) . '.') ?>
                        </div>
                        <small class="text-success"><i class="bi bi-patch-check-fill me-1"></i>Comprador verificado</small>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>


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