<?php
/**
 * Landing Page Header - Template landing_v1
 * Contém: DOCTYPE, head, CSS e <header> completo
 */

// Garantir que as variáveis estejam disponíveis
if (!isset($pdo)) {
    require_once __DIR__ . '/../../includes/config.php';
    $pdo = getDB();
}

// Caminho base do template
$template_path = 'templates/landing_v1';

// Funcao para obter configuracao da landing page
if (!function_exists('getLandingConfig')) {
    function getLandingConfig($pdo, $key, $default = '') {
        static $cache = [];
        if (!isset($cache[$key])) {
            $stmt = $pdo->prepare("SELECT section_value, is_active FROM landing_page_config WHERE section_key = ?");
            $stmt->execute([$key]);
            $result = $stmt->fetch(PDO::FETCH_ASSOC);
            $cache[$key] = $result ?: ['section_value' => $default, 'is_active' => 1];
        }
        return $cache[$key]['section_value'] ?: $default;
    }
}

// Carregar configuracoes da landing page
$siteName = getLandingConfig($pdo, 'header_logo_text', 'MontaLoja');
$siteDescription = getLandingConfig($pdo, 'seo_description', 'Crie sua loja virtual em minutos');
$siteLogo = getLandingConfig($pdo, 'header_logo', '');
$siteLogoType = getLandingConfig($pdo, 'header_logo_type', 'text');

// Botoes do Header
$headerBtnLoginText = getLandingConfig($pdo, 'header_btn_login_text', 'Entrar');
$headerBtnLoginLink = getLandingConfig($pdo, 'header_btn_login_link', '/pages/login.php');
$headerBtnCtaText = getLandingConfig($pdo, 'header_btn_cta_text', 'Começar Grátis');
$headerBtnCtaLink = getLandingConfig($pdo, 'header_btn_cta_link', '#precos');

// Menu de Navegacao
$navMenusJson = getLandingConfig($pdo, 'header_menu', '[]');
// Funcao para processar URLs do menu (garante que ancoras vao para a homepage)
    function processMenuUrl($url) {
        if (preg_match('/^#/', $url)) {
            return '/' . $url;
        }
        return $url;
    }

$navMenus = json_decode($navMenusJson, true) ?: [
    ['label' => 'Recursos', 'url' => '#recursos', 'icon' => 'solar:star-bold', 'active' => 1],
    ['label' => 'Precos', 'url' => '#precos', 'icon' => 'solar:tag-price-bold', 'active' => 1],
    ['label' => 'Contato', 'url' => '#contato', 'icon' => 'solar:phone-bold', 'active' => 1]
];

// Cores
$colorPreset = getLandingConfig($pdo, 'color_preset', 'dark');
$colors = json_decode(getLandingConfig($pdo, 'colors', '{}'), true) ?: [
    'primary' => '#CCA43B',
    'secondary' => '#1A1A1A',
    'accent' => '#FFD700',
    'background' => '#0D0D0D',
    'text' => '#FFFFFF'
];

// Definir cores baseado no preset
$presetColors = [
    'light' => ['primary' => '#CCA43B', 'secondary' => '#1A1A1A', 'accent' => '#FFD700', 'background' => '#FFFFFF', 'text' => '#1A1A1A', 'bg_darker' => '#F8F9FA', 'bg_card' => '#FFFFFF', 'text_secondary' => '#6B7280', 'border' => 'rgba(0,0,0,0.1)'],
    'dark' => ['primary' => '#CCA43B', 'secondary' => '#FFFFFF', 'accent' => '#FFD700', 'background' => '#0D0D0D', 'text' => '#FFFFFF', 'bg_darker' => '#1A1A1A', 'bg_card' => '#1A1A1A', 'text_secondary' => '#9CA3AF', 'border' => 'rgba(255,255,255,0.1)'],
    'gold' => ['primary' => '#CCA43B', 'secondary' => '#1A1A1A', 'accent' => '#FFD700', 'background' => '#1A1614', 'text' => '#FFFFFF', 'bg_darker' => '#2D2520', 'bg_card' => '#2D2520', 'text_secondary' => '#BFA98E', 'border' => 'rgba(204,164,59,0.2)'],
    'blue' => ['primary' => '#3B82F6', 'secondary' => '#1E40AF', 'accent' => '#60A5FA', 'background' => '#0F172A', 'text' => '#FFFFFF', 'bg_darker' => '#1E293B', 'bg_card' => '#1E293B', 'text_secondary' => '#94A3B8', 'border' => 'rgba(59,130,246,0.2)'],
    'green' => ['primary' => '#22C55E', 'secondary' => '#166534', 'accent' => '#4ADE80', 'background' => '#052E16', 'text' => '#FFFFFF', 'bg_darker' => '#14532D', 'bg_card' => '#14532D', 'text_secondary' => '#86EFAC', 'border' => 'rgba(34,197,94,0.2)'],
];

if ($colorPreset !== 'custom' && isset($presetColors[$colorPreset])) {
    $themeColors = $presetColors[$colorPreset];
} else {
    $isLightBg = hexdec(substr($colors['background'], 1, 2)) > 128;
    $themeColors = [
        'primary' => $colors['primary'],
        'secondary' => $colors['secondary'],
        'accent' => $colors['accent'],
        'background' => $colors['background'],
        'text' => $colors['text'],
        'bg_darker' => $isLightBg ? '#F8F9FA' : '#1A1A1A',
        'bg_card' => $isLightBg ? '#FFFFFF' : '#1A1A1A',
        'text_secondary' => $isLightBg ? '#6B7280' : '#9CA3AF',
        'border' => $isLightBg ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'
    ];
}

$seoTitle = $siteName . " - " . $siteDescription;
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo htmlspecialchars($seoTitle); ?></title>
<meta name="description" content="<?php echo htmlspecialchars($siteDescription); ?>">
<meta name="keywords" content="loja virtual, ecommerce, criar loja online, plataforma ecommerce">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo htmlspecialchars($seoTitle); ?>">
<meta property="og:description" content="<?php echo htmlspecialchars($siteDescription); ?>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.7/dist/iconify-icon.min.js"></script>
<style>
:root{
--gold:<?php echo $themeColors['primary']; ?>;
--accent:<?php echo $themeColors['accent']; ?>;
--bg-dark:<?php echo $themeColors['background']; ?>;
--bg-darker:<?php echo $themeColors['bg_darker']; ?>;
--bg-card:<?php echo $themeColors['bg_card']; ?>;
--text-primary:<?php echo $themeColors['text']; ?>;
--text-secondary:<?php echo $themeColors['text_secondary']; ?>;
--text-muted:<?php echo $themeColors['text_secondary']; ?>;
--success:#22C55E;
--border:<?php echo $themeColors['border']; ?>;
--gradient-gold:linear-gradient(135deg,<?php echo $themeColors['primary']; ?> 0%,<?php echo $themeColors['accent']; ?> 50%,<?php echo $themeColors['primary']; ?> 100%)
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg-dark);color:var(--text-primary);line-height:1.6}
.header{position:fixed;top:0;left:0;right:0;z-index:2;padding:1rem 2rem;background:rgba(<?php echo hexdec(substr($themeColors['background'],1,2)); ?>,<?php echo hexdec(substr($themeColors['background'],3,2)); ?>,<?php echo hexdec(substr($themeColors['background'],5,2)); ?>,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.header-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:0.5rem;font-size:1.5rem;font-weight:800;color:var(--text-primary);text-decoration:none;line-height:1}
.logo iconify-icon{color:var(--gold);font-size:1.75rem;display:flex;align-items:center}
.logo-img{max-height:40px;width:auto;object-fit:contain}
.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:color .2s;padding:0.5rem 1rem;display:inline-flex;align-items:center}
.nav-links a:hover{color:var(--gold)}
.nav-links a iconify-icon{margin-right:0.35rem;display:inline-flex;align-items:center;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;text-decoration:none;transition:all .3s;cursor:pointer;border:none;font-size:1rem}
.btn-primary{background:var(--gradient-gold);color:#000}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(204,164,59,0.3)}
.btn-outline{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:#fff}
.btn-large{padding:1rem 2.5rem;font-size:1.1rem}
.mobile-menu-toggle{display:none;background:none;border:none;color:var(--text-primary);font-size:1.75rem;cursor:pointer;padding:0.5rem}
.menu-close{display:none;position:fixed;top:1rem;right:1rem;background:none;border:none;color:var(--text-primary);font-size:1.75rem;cursor:pointer;z-index:10001}
.nav-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9998}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}


/* Desktop Nav */
.desktop-nav{display:flex;gap:1rem;align-items:center}
.desktop-nav a{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:color .2s;padding:0.5rem 1rem;display:inline-flex;align-items:center;gap:0.35rem}
.desktop-nav a iconify-icon{font-size:1.1rem}
.desktop-nav a:hover{color:var(--text-primary)}
@media(max-width:767px){
.desktop-nav{display:none}
}

/* Mobile Styles */
@media(max-width:767px){
.nav-overlay.active{display:block}
.menu-close.active{display:block}
.nav-links{position:fixed;top:0;left:0;bottom:0;width:85%;max-width:320px;background:var(--bg-dark);flex-direction:column;padding:0;transform:translateX(-100%);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);z-index:10000;box-shadow:10px 0 50px rgba(0,0,0,0.5);overflow-y:auto;-webkit-overflow-scrolling:touch;align-items:stretch;justify-content:flex-start;gap:0}
.nav-links.active{transform:translateX(0)}
.mobile-nav-items{display:flex;flex-direction:column;padding:5rem 0 1.5rem;gap:0}
.nav-links a:not(.btn){display:flex;align-items:center;gap:0.75rem;padding:1rem 1.5rem;color:var(--text-secondary);font-size:1rem;font-weight:500;border-bottom:1px solid var(--border);text-decoration:none;opacity:0;transform:translateX(-20px);transition:all 0.3s}
.nav-links.active .mobile-nav-items a{opacity:1;transform:translateX(0)}
.nav-links a:not(.btn) iconify-icon{font-size:1.25rem;color:var(--gold);flex-shrink:0}
.nav-links a:not(.btn) span{flex:1}
.nav-links a:not(.btn):hover,.nav-links a:not(.btn):active{background:rgba(204,164,59,0.08);color:var(--text-primary)}
.mobile-menu-footer{padding:1.5rem;background:var(--bg-darker);margin-top:auto;opacity:0;transform:translateY(20px);transition:all 0.4s 0.4s}
.nav-links.active .mobile-menu-footer{opacity:1;transform:translateY(0);display:block!important}
.mobile-menu-buttons{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem}
.mobile-menu-footer .btn{display:flex;align-items:center;justify-content:center;gap:0.375rem;font-size:0.875rem;padding:1rem;width:100%;font-weight:600;border-radius:12px;text-align:center}
.mobile-menu-footer .btn-outline{border:2px solid var(--border);background:var(--bg-card);color:var(--text-primary)}
.mobile-menu-footer .btn-outline:hover,.mobile-menu-footer .btn-outline:active{border-color:var(--gold);background:rgba(204,164,59,0.1);color:var(--gold)}
.mobile-menu-footer .btn-primary{background:var(--gold);color:#000;border:none;box-shadow:0 4px 20px rgba(204,164,59,0.25)}
.mobile-menu-toggle{display:block}
.header{padding:1rem}
}
</style>
</head>
<body>
<header class="header">
<div class="header-inner">
<a href="/" class="logo">
<?php if ($siteLogoType === 'image' && !empty($siteLogo)): ?>
    <img src="<?php echo htmlspecialchars($siteLogo); ?>" alt="<?php echo htmlspecialchars($siteName); ?>" class="logo-img" style="max-height: 40px; width: auto;">
<?php else: ?>
    <iconify-icon icon="mdi:store"></iconify-icon>
    <?php echo htmlspecialchars($siteName); ?>
<?php endif; ?>
</a>
<!-- Desktop Nav -->
<nav class="desktop-nav">
<?php foreach ($navMenus as $menu): ?>
<?php if ($menu['active'] ?? true): ?>
<a href="<?php echo htmlspecialchars(processMenuUrl($menu['url'])); ?>"><iconify-icon icon="<?php echo htmlspecialchars($menu['icon']); ?>"></iconify-icon><?php echo htmlspecialchars($menu['label']); ?></a>
<?php endif; ?>
<?php endforeach; ?>
<a href="<?php echo htmlspecialchars($headerBtnLoginLink); ?>" class="btn btn-outline"><?php echo htmlspecialchars($headerBtnLoginText); ?></a>
<a href="<?php echo htmlspecialchars(processMenuUrl($headerBtnCtaLink)); ?>" class="btn btn-primary"><?php echo htmlspecialchars($headerBtnCtaText); ?></a>
</nav>
<button class="mobile-menu-toggle" onclick="toggleMobileMenu()" aria-label="Menu">
<iconify-icon icon="mdi:menu"></iconify-icon>
</button>
</div>
</header>
<!-- Mobile Menu (fora do header) -->
<button class="menu-close" onclick="toggleMobileMenu()" aria-label="Fechar">
<iconify-icon icon="mdi:close"></iconify-icon>
</button>
<div class="nav-overlay" onclick="toggleMobileMenu()"></div>
<nav class="nav-links" id="mobileNav">
<div class="mobile-nav-items">
<?php foreach ($navMenus as $menu): ?>
<?php if ($menu['active'] ?? true): ?>
<a href="<?php echo htmlspecialchars(processMenuUrl($menu['url'])); ?>"><iconify-icon icon="<?php echo htmlspecialchars($menu['icon']); ?>"></iconify-icon><span><?php echo htmlspecialchars($menu['label']); ?></span></a>
<?php endif; ?>
<?php endforeach; ?>
</div>
<div class="mobile-menu-footer" id="mobileFooter">
<div class="mobile-menu-buttons">
<a href="<?php echo htmlspecialchars($headerBtnLoginLink); ?>" class="btn btn-outline"><?php echo htmlspecialchars($headerBtnLoginText); ?></a>
<a href="<?php echo htmlspecialchars(processMenuUrl($headerBtnCtaLink)); ?>" class="btn btn-primary"><?php echo htmlspecialchars($headerBtnCtaText); ?></a>
</div>
</div>
</nav>
