<?php 
$root = dirname(__DIR__);
require $root . '/core/DB.php'; 
require $root . '/core/config.php';
require $root . '/core/Security.php';

Security::init();

$siteName = 'Cuboid IA';
$siteTitle = 'Soluciones productivas accesibles';
$siteDescription = 'Descarga archivos digitales de manera segura e instantánea. Productos digitales con entrega inmediata.';
$siteURL = $config['app']['url'];
$siteImage = $siteURL . '/og-image.png';

$products=$pdo->query("SELECT * FROM products WHERE active = 1 ORDER BY id DESC")->fetchAll(); 
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?=htmlspecialchars($siteTitle)?></title>
    
    <meta name="description" content="<?=htmlspecialchars($siteDescription)?>">
    <meta name="keywords" content="archivos digitales, descargas, archivos zip, productos digitales">
    <meta name="author" content="Sebastián Contreras">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="<?=htmlspecialchars($siteURL)?>/">
    
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="<?=htmlspecialchars($siteName)?>">
    <meta property="og:title" content="<?=htmlspecialchars($siteTitle)?>">
    <meta property="og:description" content="<?=htmlspecialchars($siteDescription)?>">
    <meta property="og:url" content="<?=htmlspecialchars($siteURL)?>/">
    <meta property="og:image" content="<?=htmlspecialchars($siteImage)?>">
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="<?=htmlspecialchars($siteTitle)?>">
    <meta name="twitter:description" content="<?=htmlspecialchars($siteDescription)?>">
    <meta name="twitter:image" content="<?=htmlspecialchars($siteImage)?>">
    
    <link rel="alternate" hreflang="es" href="<?=htmlspecialchars($siteURL)?>/">
    
    <link href="styles.css" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    
    <script>
        if (localStorage.getItem('darkMode') === 'true' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        }
    </script>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-content">
            <a href="index.php" class="logo">Cuboid</a>
            <div class="nav-links">
                <a href="index.php" class="nav-link">Productos</a>
                <button class="dark-toggle" onclick="toggleDarkMode()" title="Cambiar modo">
                    <svg class="sun-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    <svg class="moon-icon" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="display:none">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="hero">
            <h1>Bienvenido a Cuboid IA</h1>
            <p>Descarga archivos digitales de manera segura e instantánea</p>
        </div>

        <div class="products-grid">
            <?php foreach($products as $p): ?>
            <div class="product-card">
                <?php if(!empty($p['image'])): ?>
                <img src="<?=htmlspecialchars($p['image'])?>" alt="<?=htmlspecialchars($p['name'])?> - <?=htmlspecialchars($p['description'])?>" class="product-image-img" loading="lazy">
                <?php else: ?>
                <div class="product-image-placeholder">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </div>
                <?php endif; ?>
                <div class="product-content">
                    <h3 class="product-title"><?=htmlspecialchars($p['name'])?></h3>
                    <p class="product-description"><?=htmlspecialchars($p['description'])?></p>
                    <div class="product-footer">
                        <span class="product-price">$<?=number_format($p['price'], 0, ',', '.')?> CLP</span>
                        <a href="product.php?id=<?=$p['id']?>" class="btn btn-primary">Comprar</a>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h3>Cuboid Store</h3>
                <p>Tu tienda de archivos digitales segura y confiable.</p>
            </div>
            <div class="footer-section">
                <h3>Enlaces</h3>
                <a href="index.php">Inicio</a>
                <a href="admin/index.php">Admin</a>
            </div>
            <div class="footer-section">
                <h3>Soporte</h3>
                <a href="#">Ayuda</a>
                <a href="#">Términos</a>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2026 Cuboid IA. Todos los derechos reservados.</p>
        </div>
    </footer>

    <script>
        function toggleDarkMode() {
            document.documentElement.classList.toggle('dark');
            const isDark = document.documentElement.classList.contains('dark');
            localStorage.setItem('darkMode', isDark);
            updateIcons(isDark);
        }

        function updateIcons(isDark) {
            document.querySelector('.sun-icon').style.display = isDark ? 'none' : 'block';
            document.querySelector('.moon-icon').style.display = isDark ? 'block' : 'none';
        }

        updateIcons(document.documentElement.classList.contains('dark'));
    </script>
</body>
</html>
