<?php
$localeNames = [
    'pt' => 'PT',
    'en' => 'EN',
    'es' => 'ES',
];

$primaryNavItems = [
    ['href' => '#problem', 'label' => lang('Landing.navProblem')],
    ['href' => '#solution', 'label' => lang('Landing.navSolution')],
];

$platformNavItems = [
    ['href' => '#features', 'label' => lang('Landing.navFeatures')],
    ['href' => '#benefits', 'label' => lang('Landing.navBenefits')],
    ['href' => '#technology', 'label' => lang('Landing.navTechnology')],
];

$secondaryNavItems = [
    ['href' => '#contact', 'label' => lang('Landing.navContact')],
];

$publicUi = [
    'pt' => [
        'platformMenu' => 'Plataforma',
        'auditMenu' => 'Auditoria',
        'companyCaption' => 'Projeto da Quantumbridge, Lda',
        'footerAttribution' => 'Projeto desenvolvido pela Quantumbridge, Lda.',
        'footerLogosAlt' => 'Barra institucional de logotipos Quantumbridge',
        'mobileMenuTitle' => 'Navegacao',
    ],
    'en' => [
        'platformMenu' => 'Platform',
        'auditMenu' => 'Audit',
        'companyCaption' => 'A Quantumbridge, Lda project',
        'footerAttribution' => 'Project developed by Quantumbridge, Lda.',
        'footerLogosAlt' => 'Quantumbridge institutional logo bar',
        'mobileMenuTitle' => 'Navigation',
    ],
    'es' => [
        'platformMenu' => 'Plataforma',
        'auditMenu' => 'Auditoria',
        'companyCaption' => 'Un proyecto de Quantumbridge, Lda',
        'footerAttribution' => 'Proyecto desarrollado por Quantumbridge, Lda.',
        'footerLogosAlt' => 'Barra institucional de logotipos Quantumbridge',
        'mobileMenuTitle' => 'Navegacion',
    ],
];

$ui = $publicUi[$currentLocale ?? 'pt'] ?? $publicUi['pt'];

$problemItems = [
    ['number' => '01', 'title' => lang('Landing.problemCard1Title'), 'body' => lang('Landing.problemCard1Body')],
    ['number' => '02', 'title' => lang('Landing.problemCard2Title'), 'body' => lang('Landing.problemCard2Body')],
    ['number' => '03', 'title' => lang('Landing.problemCard3Title'), 'body' => lang('Landing.problemCard3Body')],
];

$featureItems = [
    ['icon' => 'OPS', 'title' => lang('Landing.feature1Title'), 'body' => lang('Landing.feature1Body')],
    ['icon' => 'EAM', 'title' => lang('Landing.feature2Title'), 'body' => lang('Landing.feature2Body')],
    ['icon' => 'AUD', 'title' => lang('Landing.feature3Title'), 'body' => lang('Landing.feature3Body')],
    ['icon' => 'BCN', 'title' => lang('Landing.feature4Title'), 'body' => lang('Landing.feature4Body')],
    ['icon' => 'API', 'title' => lang('Landing.feature5Title'), 'body' => lang('Landing.feature5Body')],
    ['icon' => 'ESG', 'title' => lang('Landing.feature6Title'), 'body' => lang('Landing.feature6Body')],
];

$benefitItems = [
    ['number' => '01', 'title' => lang('Landing.benefit1Title'), 'body' => lang('Landing.benefit1Body')],
    ['number' => '02', 'title' => lang('Landing.benefit2Title'), 'body' => lang('Landing.benefit2Body')],
    ['number' => '03', 'title' => lang('Landing.benefit3Title'), 'body' => lang('Landing.benefit3Body')],
    ['number' => '04', 'title' => lang('Landing.benefit4Title'), 'body' => lang('Landing.benefit4Body')],
];

$technologyItems = [
    ['kicker' => lang('Landing.tech1Kicker'), 'title' => lang('Landing.tech1Title'), 'body' => lang('Landing.tech1Body')],
    ['kicker' => lang('Landing.tech2Kicker'), 'title' => lang('Landing.tech2Title'), 'body' => lang('Landing.tech2Body')],
    ['kicker' => lang('Landing.tech3Kicker'), 'title' => lang('Landing.tech3Title'), 'body' => lang('Landing.tech3Body')],
    ['kicker' => lang('Landing.tech4Kicker'), 'title' => lang('Landing.tech4Title'), 'body' => lang('Landing.tech4Body')],
];

$solutionSteps = [
    ['number' => '01', 'title' => lang('Landing.solutionStep1Title'), 'body' => lang('Landing.solutionStep1Body')],
    ['number' => '02', 'title' => lang('Landing.solutionStep2Title'), 'body' => lang('Landing.solutionStep2Body')],
    ['number' => '03', 'title' => lang('Landing.solutionStep3Title'), 'body' => lang('Landing.solutionStep3Body')],
    ['number' => '04', 'title' => lang('Landing.solutionStep4Title'), 'body' => lang('Landing.solutionStep4Body')],
];

$contactItems = [
    ['icon' => '01', 'title' => lang('Landing.contactCard1Title'), 'body' => lang('Landing.contactCard1Body')],
    ['icon' => '02', 'title' => lang('Landing.contactCard2Title'), 'body' => lang('Landing.contactCard2Body')],
    ['icon' => '03', 'title' => lang('Landing.contactCard3Title'), 'body' => lang('Landing.contactCard3Body')],
];
?>
<!doctype html>
<html lang="<?= esc($currentLocale ?? 'pt') ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= esc(lang('Landing.metaTitle')) ?></title>
    <meta name="description" content="<?= esc(lang('Landing.metaDescription')) ?>">
    <link rel="icon" type="image/png" href="<?= base_url('assets/icon.png') ?>">
    <link rel="shortcut icon" type="image/png" href="<?= base_url('assets/icon.png') ?>">
    <link rel="apple-touch-icon" href="<?= base_url('assets/icon.png') ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Sora:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script>
        (() => {
            try {
                const theme = localStorage.getItem('quantum-public-theme') || 'dark';
                document.documentElement.setAttribute('data-theme', theme);
            } catch (error) {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
        })();
    </script>
    <link rel="stylesheet" href="<?= base_url('assets/quantum-public.css') ?>">
</head>
<body>
<a class="skip-link" href="#main"><?= esc(lang('Landing.skipToContent')) ?></a>

<header class="site-header">
    <div class="container">
        <div class="header-row">
            <a href="<?= site_url('/') ?>" class="brand" aria-label="Quantum">
                <img class="brand-mark" src="<?= base_url('assets/quantum-wordmark.svg') ?>" alt="Quantum logo">
            </a>

            <div class="nav-wrap">
                <nav class="nav-links" aria-label="Primary">
                    <?php foreach ($primaryNavItems as $item): ?>
                        <a href="<?= esc($item['href']) ?>" class="nav-link"><?= esc($item['label']) ?></a>
                    <?php endforeach; ?>
                    <div class="nav-dropdown">
                        <button type="button" class="nav-dropdown__toggle" aria-haspopup="true">
                            <span><?= esc($ui['platformMenu']) ?></span>
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
                        </button>
                        <div class="nav-submenu">
                            <?php foreach ($platformNavItems as $item): ?>
                                <a href="<?= esc($item['href']) ?>" class="nav-link nav-submenu__link"><?= esc($item['label']) ?></a>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php foreach ($secondaryNavItems as $item): ?>
                        <a href="<?= esc($item['href']) ?>" class="nav-link"><?= esc($item['label']) ?></a>
                    <?php endforeach; ?>
                </nav>
            </div>

            <div class="header-actions">
                <div class="lang-shell" aria-label="<?= esc(lang('Landing.languageLabel')) ?>">
                    <?php foreach ($supportedLocales as $locale): ?>
                        <a href="<?= site_url('lang/' . $locale) ?>" class="lang-option <?= ($currentLocale ?? 'pt') === $locale ? 'active' : '' ?>">
                            <?= esc($localeNames[$locale] ?? strtoupper($locale)) ?>
                        </a>
                    <?php endforeach; ?>
                </div>
                <button class="button button-secondary theme-toggle" type="button" data-theme-toggle aria-label="Toggle theme" title="Toggle theme">
                    <span class="theme-icon-light" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"></path></svg>
                    </span>
                    <span class="theme-icon-dark" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2.2M12 19.8V22M4.93 4.93l1.55 1.55M17.52 17.52l1.55 1.55M2 12h2.2M19.8 12H22M4.93 19.07l1.55-1.55M17.52 6.48l1.55-1.55"></path></svg>
                    </span>
                    <span class="sr-only">Alternar tema</span>
                </button>
                <a href="<?= site_url('audit') ?>" class="button button-secondary"><?= esc($ui['auditMenu']) ?></a>
                <a href="#contact" class="button button-primary"><?= esc(lang('Landing.heroPrimaryCta')) ?></a>
            </div>

            <button class="menu-toggle" id="menuToggle" type="button" aria-expanded="false" aria-controls="mobileMenu" aria-label="<?= esc(lang('Landing.menuLabel')) ?>">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 7h16"></path><path d="M4 12h16"></path><path d="M4 17h16"></path></svg>
            </button>
        </div>

        <div class="mobile-menu" id="mobileMenu">
            <div class="mobile-panel">
                <div class="mobile-group-title"><?= esc($ui['mobileMenuTitle']) ?></div>
                <?php foreach (array_merge($primaryNavItems, $platformNavItems, $secondaryNavItems) as $item): ?>
                    <a href="<?= esc($item['href']) ?>" class="nav-link"><?= esc($item['label']) ?></a>
                <?php endforeach; ?>
                <a href="<?= site_url('audit') ?>" class="button button-secondary"><?= esc($ui['auditMenu']) ?></a>
                <button class="button button-secondary theme-toggle" type="button" data-theme-toggle aria-label="Toggle theme" title="Toggle theme">
                    <span class="theme-icon-light" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"></path></svg>
                    </span>
                    <span class="theme-icon-dark" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2.2M12 19.8V22M4.93 4.93l1.55 1.55M17.52 17.52l1.55 1.55M2 12h2.2M19.8 12H22M4.93 19.07l1.55-1.55M17.52 6.48l1.55-1.55"></path></svg>
                    </span>
                    <span class="sr-only">Alternar tema</span>
                </button>
            </div>
        </div>
    </div>
</header>

<main id="main">
    <section class="hero" id="top">
        <div class="container">
            <div class="hero-grid">
                <div class="hero-copy reveal">
                    <span class="eyebrow"><?= esc(lang('Landing.heroBadge')) ?></span>
                    <h1><?= esc(lang('Landing.heroTitle')) ?></h1>
                    <p><?= esc(lang('Landing.heroDescription')) ?></p>

                    <div class="hero-actions">
                        <a href="#contact" class="button button-primary"><?= esc(lang('Landing.heroPrimaryCta')) ?></a>
                        <a href="#solution" class="button button-secondary"><?= esc(lang('Landing.heroSecondaryCta')) ?></a>
                    </div>

                    <div class="hero-stats">
                        <div class="metric-card">
                            <strong><?= esc(lang('Landing.heroStat1Value')) ?></strong>
                            <span class="stat-label"><?= esc(lang('Landing.heroStat1Label')) ?></span>
                        </div>
                        <div class="metric-card">
                            <strong><?= esc(lang('Landing.heroStat2Value')) ?></strong>
                            <span class="stat-label"><?= esc(lang('Landing.heroStat2Label')) ?></span>
                        </div>
                        <div class="metric-card">
                            <strong><?= esc(lang('Landing.heroStat3Value')) ?></strong>
                            <span class="stat-label"><?= esc(lang('Landing.heroStat3Label')) ?></span>
                        </div>
                        <div class="metric-card">
                            <strong><?= esc(lang('Landing.heroStat4Value')) ?></strong>
                            <span class="stat-label"><?= esc(lang('Landing.heroStat4Label')) ?></span>
                        </div>
                    </div>
                </div>

                <aside class="hero-panel reveal" data-spotlight>
                    <div class="hero-panel-inner">
                        <div class="panel-head">
                            <div>
                                <div class="meta"><?= esc(lang('Landing.heroPanelKicker')) ?></div>
                                <h3 style="margin-top:0.4rem;"><?= esc(lang('Landing.heroPanelTitle')) ?></h3>
                            </div>
                            <span class="live"><?= esc(lang('Landing.heroLiveTag')) ?></span>
                        </div>

                        <p><?= esc(lang('Landing.heroPanelBody')) ?></p>

                        <div class="hero-visual-grid">
                            <div class="cockpit-card">
                                <div class="meta"><?= esc(lang('Landing.heroCockpitKicker')) ?></div>
                                <h3 style="margin-top:0.45rem;"><?= esc(lang('Landing.heroCockpitTitle')) ?></h3>
                                <div class="chart" aria-hidden="true">
                                    <svg viewBox="0 0 320 210" preserveAspectRatio="none">
                                        <defs>
                                            <linearGradient id="quantumLine" x1="0%" y1="0%" x2="100%" y2="0%">
                                                <stop offset="0%" stop-color="#2563eb"></stop>
                                                <stop offset="100%" stop-color="#22d3ee"></stop>
                                            </linearGradient>
                                        </defs>
                                        <path stroke="rgba(148,163,184,0.18)" d="M0 155 C40 145,80 150,120 128 S200 78,240 92 S280 118,320 46"></path>
                                        <path stroke="url(#quantumLine)" d="M0 168 C40 140,80 146,120 118 S200 72,240 86 S280 112,320 36"></path>
                                    </svg>
                                </div>
                            </div>
                            <div class="mini-stack">
                                <div class="signal-card">
                                    <div class="meta"><?= esc(lang('Landing.heroSignal1Label')) ?></div>
                                    <strong><?= esc(lang('Landing.heroSignal1Value')) ?></strong>
                                </div>
                                <div class="signal-card">
                                    <div class="meta"><?= esc(lang('Landing.heroSignal2Label')) ?></div>
                                    <strong><?= esc(lang('Landing.heroSignal2Value')) ?></strong>
                                </div>
                                <div class="signal-card">
                                    <div class="meta"><?= esc(lang('Landing.heroSignal3Label')) ?></div>
                                    <strong><?= esc(lang('Landing.heroSignal3Value')) ?></strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>

            <div class="trust-bar reveal">
                <div class="trust-grid">
                    <div class="trust-item"><span class="trust-dot"></span><span><?= esc(lang('Landing.trust1')) ?></span></div>
                    <div class="trust-item"><span class="trust-dot"></span><span><?= esc(lang('Landing.trust2')) ?></span></div>
                    <div class="trust-item"><span class="trust-dot"></span><span><?= esc(lang('Landing.trust3')) ?></span></div>
                </div>
            </div>
        </div>
    </section>

    <section id="problem">
        <div class="container">
            <div class="section-head reveal">
                <span class="eyebrow"><?= esc(lang('Landing.problemEyebrow')) ?></span>
                <h2><?= esc(lang('Landing.problemTitle')) ?></h2>
                <p><?= esc(lang('Landing.problemText')) ?></p>
            </div>

            <div class="problem-grid">
                <?php foreach ($problemItems as $item): ?>
                    <article class="section-card reveal" data-spotlight>
                        <div class="card-number"><?= esc($item['number']) ?></div>
                        <h3 style="margin-top:1rem;"><?= esc($item['title']) ?></h3>
                        <p><?= esc($item['body']) ?></p>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section id="solution">
        <div class="container">
            <div class="solution-grid">
                <article class="timeline-card reveal" data-spotlight>
                    <span class="eyebrow"><?= esc(lang('Landing.solutionEyebrow')) ?></span>
                    <h2 style="margin-top:1rem;"><?= esc(lang('Landing.solutionTitle')) ?></h2>
                    <p style="margin-top:1rem;"><?= esc(lang('Landing.solutionText')) ?></p>

                    <div class="timeline-list">
                        <?php foreach ($solutionSteps as $step): ?>
                            <div class="timeline-step">
                                <div class="card-number"><?= esc($step['number']) ?></div>
                                <div>
                                    <strong><?= esc($step['title']) ?></strong>
                                    <p><?= esc($step['body']) ?></p>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </article>

                <article class="info-card reveal" data-spotlight>
                    <span class="eyebrow"><?= esc(lang('Landing.solutionSideEyebrow')) ?></span>
                    <h3 style="margin-top:1rem;"><?= esc(lang('Landing.solutionSideTitle')) ?></h3>
                    <p><?= esc(lang('Landing.solutionSideText')) ?></p>

                    <div class="timeline-list">
                        <div class="mini-card">
                            <div class="meta"><?= esc(lang('Landing.solutionCard1Kicker')) ?></div>
                            <strong><?= esc(lang('Landing.solutionCard1Title')) ?></strong>
                            <p style="margin-top:0.6rem;"><?= esc(lang('Landing.solutionCard1Body')) ?></p>
                        </div>
                        <div class="mini-card">
                            <div class="meta"><?= esc(lang('Landing.solutionCard2Kicker')) ?></div>
                            <strong><?= esc(lang('Landing.solutionCard2Title')) ?></strong>
                            <p style="margin-top:0.6rem;"><?= esc(lang('Landing.solutionCard2Body')) ?></p>
                        </div>
                        <div class="mini-card">
                            <div class="meta"><?= esc(lang('Landing.solutionCard3Kicker')) ?></div>
                            <strong><?= esc(lang('Landing.solutionCard3Title')) ?></strong>
                            <p style="margin-top:0.6rem;"><?= esc(lang('Landing.solutionCard3Body')) ?></p>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <section id="features">
        <div class="container">
            <div class="section-head reveal">
                <span class="eyebrow"><?= esc(lang('Landing.featuresEyebrow')) ?></span>
                <h2><?= esc(lang('Landing.featuresTitle')) ?></h2>
                <p><?= esc(lang('Landing.featuresText')) ?></p>
            </div>

            <div class="feature-grid">
                <?php foreach ($featureItems as $item): ?>
                    <article class="feature-card reveal" data-spotlight>
                        <div class="feature-icon"><?= esc($item['icon']) ?></div>
                        <h3 style="margin-top:1rem;"><?= esc($item['title']) ?></h3>
                        <p><?= esc($item['body']) ?></p>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section id="benefits">
        <div class="container">
            <div class="section-head reveal">
                <span class="eyebrow"><?= esc(lang('Landing.benefitsEyebrow')) ?></span>
                <h2><?= esc(lang('Landing.benefitsTitle')) ?></h2>
                <p><?= esc(lang('Landing.benefitsText')) ?></p>
            </div>

            <div class="benefit-grid">
                <?php foreach ($benefitItems as $item): ?>
                    <article class="benefit-card reveal" data-spotlight>
                        <div class="card-number"><?= esc($item['number']) ?></div>
                        <h3><?= esc($item['title']) ?></h3>
                        <p><?= esc($item['body']) ?></p>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section id="technology">
        <div class="container">
            <div class="section-head reveal">
                <span class="eyebrow"><?= esc(lang('Landing.technologyEyebrow')) ?></span>
                <h2><?= esc(lang('Landing.technologyTitle')) ?></h2>
                <p><?= esc(lang('Landing.technologyText')) ?></p>
            </div>

            <div class="technology-grid">
                <?php foreach ($technologyItems as $item): ?>
                    <article class="tech-card reveal" data-spotlight>
                        <div class="tech-kicker"><?= esc($item['kicker']) ?></div>
                        <h3 style="margin-top:1rem;"><?= esc($item['title']) ?></h3>
                        <p><?= esc($item['body']) ?></p>
                    </article>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <div class="contact-shell">
                <article class="cta-card reveal" data-spotlight>
                    <span class="eyebrow"><?= esc(lang('Landing.ctaEyebrow')) ?></span>
                    <h2 style="margin-top:1rem;"><?= esc(lang('Landing.ctaTitle')) ?></h2>
                    <p><?= esc(lang('Landing.ctaDescription')) ?></p>

                    <div class="hero-actions" style="margin-top:1.4rem;">
                        <a href="mailto:<?= esc(lang('Landing.contactMail')) ?>" class="button button-primary"><?= esc(lang('Landing.ctaPrimary')) ?></a>
                        <a href="<?= site_url('audit') ?>" class="button button-secondary"><?= esc(lang('Landing.verify')) ?></a>
                        <button type="button" class="button button-ghost" data-open-cookies><?= esc(lang('Landing.cookieManage')) ?></button>
                    </div>
                </article>

                <aside class="audit-result reveal" data-spotlight>
                    <span class="eyebrow"><?= esc(lang('Landing.contactEyebrow')) ?></span>
                    <h3 style="margin-top:1rem;"><?= esc(lang('Landing.contactTitle')) ?></h3>
                    <p><?= esc(lang('Landing.contactText')) ?></p>

                    <div class="contact-points">
                        <?php foreach ($contactItems as $item): ?>
                            <div class="contact-card">
                                <span class="contact-icon"><?= esc($item['icon']) ?></span>
                                <div>
                                    <strong><?= esc($item['title']) ?></strong>
                                    <p><?= esc($item['body']) ?></p>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </aside>
            </div>
        </div>
    </section>
</main>

<footer class="footer">
    <div class="container">
        <div class="footer-row">
            <div>
                <div><?= esc(lang('Landing.footer')) ?></div>
                <div class="footer-caption"><?= esc($ui['footerAttribution']) ?></div>
            </div>
            <button type="button" class="button button-ghost" data-open-cookies><?= esc(lang('Landing.cookieManage')) ?></button>
        </div>

        <div class="footer-logos">
            <img src="<?= base_url('assets/barra-logos.png') ?>" alt="<?= esc($ui['footerLogosAlt']) ?>">
        </div>
    </div>
</footer>

<div class="cookie-shell">
    <section class="cookie-banner" id="cookieBanner" aria-label="Cookie banner">
        <div class="cookie-layout">
            <div>
                <div class="cookie-pill"><?= esc(lang('Landing.cookieBadge')) ?></div>
                <h3 style="margin-top:0.7rem;"><?= esc(lang('Landing.cookieTitle')) ?></h3>
                <p style="margin-top:0.55rem;"><?= esc(lang('Landing.cookieDescription')) ?></p>
            </div>

            <div class="cookie-actions">
                <button type="button" class="button button-primary" id="acceptAllCookies"><?= esc(lang('Landing.cookieAcceptAll')) ?></button>
                <button type="button" class="button button-secondary" id="rejectOptionalCookies"><?= esc(lang('Landing.cookieRejectOptional')) ?></button>
                <button type="button" class="button button-ghost" id="manageCookies"><?= esc(lang('Landing.cookieManage')) ?></button>
            </div>
        </div>
    </section>

    <section class="cookie-panel" id="cookiePanel" aria-hidden="true">
        <h3><?= esc(lang('Landing.cookieManageTitle')) ?></h3>
        <p style="margin-top:0.55rem;"><?= esc(lang('Landing.cookieDescription')) ?></p>

        <div class="toggle">
            <div>
                <strong><?= esc(lang('Landing.cookieNecessary')) ?></strong>
                <span><?= esc(lang('Landing.cookieNecessaryDescription')) ?></span>
            </div>
            <label class="switch">
                <input type="checkbox" checked disabled>
                <span class="slider"></span>
            </label>
        </div>

        <div class="toggle">
            <div>
                <strong><?= esc(lang('Landing.cookieAnalytics')) ?></strong>
                <span><?= esc(lang('Landing.cookieAnalyticsDescription')) ?></span>
            </div>
            <label class="switch">
                <input type="checkbox" id="cookieAnalytics">
                <span class="slider"></span>
            </label>
        </div>

        <div class="toggle">
            <div>
                <strong><?= esc(lang('Landing.cookiePersonalization')) ?></strong>
                <span><?= esc(lang('Landing.cookiePersonalizationDescription')) ?></span>
            </div>
            <label class="switch">
                <input type="checkbox" id="cookiePersonalization">
                <span class="slider"></span>
            </label>
        </div>

        <div class="cookie-footer" style="margin-top:1rem;">
            <button type="button" class="button button-primary" id="saveCookiePreferences"><?= esc(lang('Landing.cookieSavePreferences')) ?></button>
            <button type="button" class="button button-ghost" id="closeCookiePanel"><?= esc(lang('Landing.cookieClose')) ?></button>
        </div>
    </section>
</div>

<div class="toast" id="cookieToast"><?= esc(lang('Landing.cookieSaved')) ?></div>

<script>
(() => {
    const themeKey = 'quantum-public-theme';
    const themeButtons = document.querySelectorAll('[data-theme-toggle]');
    const applyTheme = (theme) => {
        document.documentElement.setAttribute('data-theme', theme);
        themeButtons.forEach((button) => {
            button.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
        });
    };

    applyTheme(document.documentElement.getAttribute('data-theme') || 'dark');

    themeButtons.forEach((button) => {
        button.addEventListener('click', () => {
            const nextTheme = (document.documentElement.getAttribute('data-theme') || 'dark') === 'light' ? 'dark' : 'light';
            applyTheme(nextTheme);
            try {
                localStorage.setItem(themeKey, nextTheme);
            } catch (error) {
                // Ignore storage restrictions.
            }
        });
    });

    document.querySelectorAll('[data-spotlight]').forEach((card) => {
        card.addEventListener('pointermove', (event) => {
            const rect = card.getBoundingClientRect();
            const x = ((event.clientX - rect.left) / rect.width) * 100;
            const y = ((event.clientY - rect.top) / rect.height) * 100;
            card.style.setProperty('--x', `${x}%`);
            card.style.setProperty('--y', `${y}%`);
        });
    });

    const revealItems = document.querySelectorAll('.reveal');
    const revealObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.target.classList.add('is-visible');
                revealObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.14 });

    revealItems.forEach((item) => revealObserver.observe(item));

    const menuToggle = document.getElementById('menuToggle');
    const mobileMenu = document.getElementById('mobileMenu');
    const mobileMenuLinks = mobileMenu ? mobileMenu.querySelectorAll('a') : [];

    const closeMenu = () => {
        if (!mobileMenu || !menuToggle) return;
        mobileMenu.classList.remove('open');
        menuToggle.setAttribute('aria-expanded', 'false');
    };

    const openMenu = () => {
        if (!mobileMenu || !menuToggle) return;
        mobileMenu.classList.add('open');
        menuToggle.setAttribute('aria-expanded', 'true');
    };

    if (menuToggle && mobileMenu) {
        menuToggle.addEventListener('click', () => {
            const isOpen = mobileMenu.classList.contains('open');
            if (isOpen) closeMenu();
            else openMenu();
        });

        mobileMenuLinks.forEach((link) => link.addEventListener('click', closeMenu));

        window.addEventListener('resize', () => {
            if (window.innerWidth > 840) closeMenu();
        });
    }

    const sections = [...document.querySelectorAll('main section[id]')];
    const navLinks = [...document.querySelectorAll('.nav-link')];

    const activateNav = () => {
        const scrollY = window.scrollY + 140;
        let currentId = '';

        sections.forEach((section) => {
            if (scrollY >= section.offsetTop) {
                currentId = section.getAttribute('id');
            }
        });

        navLinks.forEach((link) => {
            const href = link.getAttribute('href');
            if (href && href.startsWith('#')) {
                link.classList.toggle('active', href === `#${currentId}`);
            }
        });
    };

    activateNav();
    window.addEventListener('scroll', activateNav, { passive: true });

    const key = 'quantum_cookie_preferences';
    const banner = document.getElementById('cookieBanner');
    const panel = document.getElementById('cookiePanel');
    const analytics = document.getElementById('cookieAnalytics');
    const personalization = document.getElementById('cookiePersonalization');
    const toast = document.getElementById('cookieToast');

    const setCookie = (name, value, days = 180) => {
        const expires = new Date(Date.now() + days * 86400000).toUTCString();
        document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/; SameSite=Lax`;
    };

    const showToast = () => {
        toast.classList.add('show');
        setTimeout(() => toast.classList.remove('show'), 2200);
    };

    const openPanel = () => {
        panel.classList.add('show');
        panel.setAttribute('aria-hidden', 'false');
    };

    const closePanel = () => {
        panel.classList.remove('show');
        panel.setAttribute('aria-hidden', 'true');
    };

    const savePreferences = (preferences) => {
        localStorage.setItem(key, JSON.stringify(preferences));
        setCookie('quantum_cookie_consent', JSON.stringify(preferences));
        banner.classList.remove('show');
        closePanel();
        showToast();
    };

    const existing = localStorage.getItem(key);

    if (!existing) {
        banner.classList.add('show');
    } else {
        try {
            const parsed = JSON.parse(existing);
            analytics.checked = Boolean(parsed.analytics);
            personalization.checked = Boolean(parsed.personalization);
        } catch (error) {
            banner.classList.add('show');
        }
    }

    document.getElementById('acceptAllCookies')?.addEventListener('click', () => {
        analytics.checked = true;
        personalization.checked = true;
        savePreferences({ necessary: true, analytics: true, personalization: true });
    });

    document.getElementById('rejectOptionalCookies')?.addEventListener('click', () => {
        analytics.checked = false;
        personalization.checked = false;
        savePreferences({ necessary: true, analytics: false, personalization: false });
    });

    document.getElementById('manageCookies')?.addEventListener('click', openPanel);
    document.getElementById('saveCookiePreferences')?.addEventListener('click', () => {
        savePreferences({
            necessary: true,
            analytics: analytics.checked,
            personalization: personalization.checked
        });
    });

    document.getElementById('closeCookiePanel')?.addEventListener('click', closePanel);

    document.querySelectorAll('[data-open-cookies]').forEach((button) => {
        button.addEventListener('click', openPanel);
    });

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') {
            closePanel();
            closeMenu();
        }
    });
})();
</script>
</body>
</html>
