<?php
$pageTitle = Lang::get('app_name') . ' | Coins & Banknotes Catalogue - Currency Collection Manager';
$pageDescription = 'Professional coins and banknotes catalogue for serious collectors. Build your personal currency collection: organize coins, catalogue banknotes, track varieties, and share your numismatic collection with powerful, multilingual tools.';
$pageKeywords = 'numismatic, numismatics, coins, banknotes, banknotes catalogue, currency collection, collections, catalogues, personal catalogue, banknote catalogue, coin catalogue, coin collecting, banknote collecting, collection management, digital catalog, notaphily, ' . Lang::get('app_name');
$currentPath = trim(parse_url($_SERVER['REQUEST_URI'] ?? '/', PHP_URL_PATH) ?? '/', '/');
$pageUrl = APP_URL . '/';
$pageImage = DEFAULT_OG_IMAGE;
$robotsMeta = $currentPath === 'login' ? 'noindex, follow' : 'index, follow';
$htmlClass = 'h-full scroll-smooth';

// Feed discovery + DNS preconnects (login-page extras)
$extraHeadLinks = '
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="alternate" type="application/rss+xml" title="' . htmlspecialchars(Lang::get('app_name')) . ' — RSS" href="' . APP_URL . '/feed.xml">
    <link rel="alternate" type="application/atom+xml" title="' . htmlspecialchars(Lang::get('app_name')) . ' — Atom" href="' . APP_URL . '/articles/feed.atom">
';

// Page-specific WebApplication JSON-LD (Organization + WebSite emitted globally by _head.php)
$extraJsonLd = Schema::render([
    '@type' => 'WebApplication',
    '@id' => APP_URL . '/#webapp',
    'name' => Lang::get('app_name'),
    'description' => $pageDescription,
    'url' => APP_URL,
    'applicationCategory' => 'CollectiblesManagement',
    'operatingSystem' => 'Web',
    'offers' => [
        '@type' => 'Offer',
        'price' => '0',
        'priceCurrency' => 'EUR',
    ],
    'author' => ['@id' => Schema::organizationId()],
    'publisher' => ['@id' => Schema::organizationId()],
    'inLanguage' => Lang::getLocale(),
    'datePublished' => '2024-01-01',
    'dateModified' => date('Y-m-d', filemtime(__FILE__)),
    'isAccessibleForFree' => true,
    'isFamilyFriendly' => true,
    'keywords' => $pageKeywords,
    'mainEntity' => [
        '@type' => 'Service',
        'name' => 'Numismatic Collection Management',
        'description' => 'Complete solution for managing coin and banknote collections',
        'serviceType' => 'Digital Cataloging',
    ],
    'featureList' => [
        'Coins Collection Management',
        'Banknotes Collection Management',
        'Currency Collection Manager',
        'Personal Catalogue Creation',
        'Digital Coins Catalogue',
        'Digital Banknotes Catalogue',
        'Collection Organization',
        'Multi-language Support',
        'Export and Backup',
    ],
]);

require APP_ROOT . '/views/layouts/_head.php';
?>
<body class="landing-body bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 antialiased" style="contain: layout style;">
    <!-- Skip to main content for accessibility -->
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary-600 text-white px-4 py-2 rounded-md z-50">
        <?= Lang::get('skip_to_main_content') ?>
    </a>

<?= Recaptcha::renderScript() ?>

<!-- ==================== NAVBAR ==================== -->
<nav id="landingNav" class="landing-nav fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-900/80 border-b border-transparent transition-all duration-300" role="navigation" aria-label="<?= Lang::get('main_navigation') ?>">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
        <a href="<?= APP_URL ?>/" class="text-xl font-bold text-primary-600 dark:text-primary-400 tracking-tight" aria-label="<?= Lang::get('app_name') ?> <?= Lang::get('home') ?>">
            <?= Lang::get('app_name') ?>
        </a>

        <div class="hidden md:flex items-center gap-8">
            <a href="#features" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors" aria-label="<?= Lang::get('landing_nav_features') ?> section"><?= Lang::get('landing_nav_features') ?></a>
            <a href="#how-it-works" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors" aria-label="<?= Lang::get('landing_nav_how') ?> section"><?= Lang::get('landing_nav_how') ?></a>
            <a href="#hero-login" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors" aria-label="<?= Lang::get('landing_nav_start') ?> section"><?= Lang::get('landing_nav_start') ?></a>
            <a href="<?= APP_URL ?>/articles" class="text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors" aria-label="<?= Lang::get('articles') ?>"><?= Lang::get('articles') ?></a>
            <a href="<?= APP_URL ?>/marketplace" class="text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors" aria-label="<?= Lang::get('marketplace') ?>"><?= Lang::get('marketplace') ?></a>
        </div>

        <div class="flex items-center gap-3">
            <?php $dropdownId = 'login'; require APP_ROOT . '/views/partials/language_dropdown.php'; ?>

            <button id="themeToggle" type="button" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" title="<?= Lang::get('dark_mode') ?>" aria-label="<?= Lang::get('toggle_dark_mode') ?>">
                <svg id="sunIcon" class="w-5 h-5 hidden" 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 id="moonIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>

            <button id="mobileMenuBtn" type="button" class="md:hidden p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" aria-label="<?= Lang::get('toggle_mobile_menu') ?>" aria-expanded="false" aria-controls="mobileMenu">
                <svg id="menuOpenIcon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                <svg id="menuCloseIcon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
    </div>

    <div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="menu" aria-labelledby="mobileMenuBtn">
        <div class="px-4 py-3 space-y-2">
            <a href="#features" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg" role="menuitem"><?= Lang::get('landing_nav_features') ?></a>
            <a href="#how-it-works" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg" role="menuitem"><?= Lang::get('landing_nav_how') ?></a>
            <a href="#hero-login" class="block px-3 py-2 text-sm font-medium text-primary-600 dark:text-primary-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg" role="menuitem"><?= Lang::get('landing_nav_start') ?></a>
            <a href="<?= APP_URL ?>/articles" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg" role="menuitem"><?= Lang::get('articles') ?></a>
            <a href="<?= APP_URL ?>/marketplace" class="block px-3 py-2 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg" role="menuitem"><?= Lang::get('marketplace') ?></a>
        </div>
    </div>
</nav>

<!-- ==================== FLASH MESSAGES ==================== -->
<?php if (Session::hasFlash('success')): ?>
<div class="fixed top-20 left-1/2 -translate-x-1/2 z-50 w-full max-w-lg px-4">
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-lg flex justify-between items-center flash-message shadow-lg">
        <span><?= htmlspecialchars(Session::getFlash('success')) ?></span>
        <button onclick="this.parentElement.parentElement.remove()" class="text-green-500 hover:text-green-700 ml-4">&times;</button>
    </div>
</div>
<?php endif; ?>
<?php if (Session::hasFlash('error')): ?>
<div class="fixed top-20 left-1/2 -translate-x-1/2 z-50 w-full max-w-lg px-4">
    <div class="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg flex justify-between items-center flash-message shadow-lg">
        <span><?= htmlspecialchars(Session::getFlash('error')) ?></span>
        <button onclick="this.parentElement.parentElement.remove()" class="text-red-500 hover:text-red-700 ml-4">&times;</button>
    </div>
</div>
<?php endif; ?>

<!-- ==================== HERO SECTION ==================== -->
<section id="main-content" class="relative overflow-hidden pt-28 pb-16 md:pt-24 md:pb-24" role="main" aria-label="<?= Lang::get('hero_section') ?>">
    <div class="hero-blob w-[500px] h-[500px] bg-primary-200 dark:bg-primary-900 -top-48 -right-48 absolute" style="contain: layout paint;"></div>
    <div class="hero-blob w-[400px] h-[400px] bg-blue-100 dark:bg-blue-900 -bottom-32 -left-32 absolute" style="contain: layout paint;"></div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-2 gap-12 lg:gap-20 items-center" style="min-height: 600px;">
            <!-- Left: Content -->
            <div>
                <span class="inline-flex items-center gap-2 bg-primary-50 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300 text-sm font-semibold px-4 py-1.5 rounded-full mb-6">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                    <?= Lang::get('landing_badge') ?>
                </span>

                <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight text-gray-900 dark:text-white mb-6" style="min-height: 1.2em; contain: layout;">
                    <?= Lang::get('landing_hero_title') ?>
                </h1>
                <h2 class="text-2xl md:text-3xl font-bold text-primary-600 dark:text-primary-400 mb-4" style="min-height: 1.2em; contain: layout;">
                    Coins &amp; Banknotes Catalogue for Your Currency Collection
                </h2>

                <p class="text-lg text-gray-600 dark:text-gray-400 mb-8 max-w-lg leading-relaxed">
                    <?= Lang::get('landing_hero_subtitle') ?>
                </p>
                <div class="bg-primary-50 dark:bg-primary-900/20 rounded-xl p-6 mb-8 border border-primary-200 dark:border-primary-800">
                    <h3 class="text-lg font-semibold text-primary-800 dark:text-primary-200 mb-3">Perfect for Coins &amp; Banknotes Collectors</h3>
                    <p class="text-primary-700 dark:text-primary-300 text-sm leading-relaxed">
                        Whether you collect ancient coins, modern banknotes, or military numismatics, our platform gives you everything you need to manage a professional currency collection. Create a detailed coins and banknotes catalogue, track varieties, and connect with collectors worldwide.
                    </p>
                </div>

                <div class="flex flex-wrap gap-6 mb-8">
                    <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                        <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <?= Lang::get('landing_stat_languages') ?>
                    </div>
                    <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                        <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                        <?= Lang::get('landing_stat_export') ?>
                    </div>
                    <div class="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                        <svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                        <?= Lang::get('landing_stat_secure') ?>
                    </div>
                </div>

                <a href="#features" class="inline-flex items-center gap-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold py-3 px-6 rounded-xl transition-all hover:shadow-lg hover:shadow-primary-500/25 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" aria-label="<?= Lang::get('landing_get_started') ?>">
                    <?= Lang::get('landing_get_started') ?>
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
                </a>
            </div>

            <!-- Right: Login Form -->
            <div id="hero-login" style="scroll-margin-top: 6rem;" role="region" aria-labelledby="login-heading">
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-8 border border-gray-200 dark:border-gray-700 relative">
                    <div class="absolute -top-3 left-6 bg-primary-600 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">
                        <?= Lang::get('login') ?>
                    </div>

                    <div class="text-center mb-6 mt-2">
                        <h2 id="login-heading" class="text-2xl font-bold text-gray-900 dark:text-white"><?= Lang::get('login_welcome') ?></h2>
                    </div>

                    <form method="POST" action="<?= APP_URL ?>/login" onsubmit="executeRecaptcha()" aria-label="<?= Lang::get('login_form') ?>">
                        <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">
                        <?= Recaptcha::renderHiddenInput() ?>

                        <div class="mb-5">
                            <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('username') ?></label>
                            <input type="text" id="username" name="username" required
                                   class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-all focus:bg-white dark:focus:bg-gray-600"
                                   aria-describedby="username-help" autocomplete="username">
                            <div id="username-help" class="sr-only">
                                <?= Lang::get('username_help') ?>
                            </div>
                        </div>

                        <div class="mb-6">
                            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('password') ?></label>
                            <input type="password" id="password" name="password" required
                                   class="w-full px-4 py-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-all focus:bg-white dark:focus:bg-gray-600"
                                   aria-describedby="password-help" autocomplete="current-password">
                            <div id="password-help" class="sr-only">
                                <?= Lang::get('password_help') ?>
                            </div>
                        </div>

                        <button type="submit" class="w-full btn-gradient btn-gradient-blue btn-gradient-lg" aria-label="<?= Lang::get('login_btn') ?>">
                            <?= Lang::get('login_btn') ?>
                        </button>
                    </form>

                    <div class="mt-4 text-center">
                        <a href="<?= APP_URL ?>/forgot-password" class="text-sm text-primary-600 dark:text-primary-400 hover:underline font-medium" aria-label="<?= Lang::get('forgot_password') ?>">
                            <?= Lang::get('forgot_password') ?>
                        </a>
                    </div>

                    <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                        <p class="text-center text-sm text-gray-500 dark:text-gray-400">
                            <?= Lang::get('no_account') ?>
                            <a href="<?= APP_URL ?>/register" class="text-primary-600 dark:text-primary-400 hover:underline font-semibold" aria-label="<?= Lang::get('register_btn') ?>"><?= Lang::get('register_btn') ?></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ==================== FEATURES BENTO GRID ==================== -->
<section id="features" class="py-20 md:py-28 bg-gray-50 dark:bg-gray-800/50" style="content-visibility: auto; contain-intrinsic-size: 800px" role="region" aria-labelledby="features-heading">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16 landing-fade">
            <h2 id="features-heading" class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-4"><?= Lang::get('landing_features_title') ?></h2>
            <p class="text-lg text-gray-600 dark:text-gray-400"><?= Lang::get('landing_features_subtitle') ?></p>
            <div class="mt-4 text-center">
                <p class="text-primary-600 dark:text-primary-400 font-medium">Professional Tools for Numismatic Collection Management</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
            <!-- Feature 1: Collections (spans 2 cols) -->
            <div class="landing-fade landing-fade-delay-1 md:col-span-2 feature-card bg-gradient-to-br from-blue-100 to-indigo-100 dark:from-blue-900/30 dark:to-indigo-900/30 rounded-2xl p-8 border border-blue-200 dark:border-blue-800/50 relative overflow-hidden group">
                <div class="absolute top-0 right-0 w-40 h-40 bg-blue-200/30 dark:bg-blue-700/20 rounded-full -translate-y-1/2 translate-x-1/2"></div>
                <div class="relative">
                    <div class="w-12 h-12 bg-blue-100 dark:bg-blue-800 rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Digital Coins &amp; Banknotes Catalogue</h3>
                    <p class="text-gray-600 dark:text-gray-400 max-w-md">Build a structured currency collection with collections and subcollections for every item. Organize coins and banknotes by country, era, type, or any custom category &mdash; ideal for serious collectors managing a diverse numismatic catalogue.</p>
                </div>
            </div>

            <!-- Feature 2: Detailed Catalog -->
            <div class="landing-fade landing-fade-delay-2 feature-card bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-2xl p-8 border border-purple-200 dark:border-purple-800/50 relative overflow-hidden group">
                <div class="absolute bottom-0 right-0 w-32 h-32 bg-purple-200/30 dark:bg-purple-700/20 rounded-full translate-y-1/2 translate-x-1/2"></div>
                <div class="relative">
                    <div class="w-12 h-12 bg-purple-100 dark:bg-purple-800 rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Detailed Coins &amp; Banknotes Cataloguing</h3>
                    <p class="text-gray-600 dark:text-gray-400">Record every detail of your coins and banknotes &mdash; obverse/reverse images, denominations, mint marks, conditions, varieties, and historical context. Create professional-grade catalogue entries for your currency collection.</p>
                </div>
            </div>

            <!-- Feature 3: Sharing -->
            <div class="landing-fade landing-fade-delay-3 feature-card bg-gradient-to-br from-green-100 to-emerald-100 dark:from-green-900/30 dark:to-emerald-900/30 rounded-2xl p-8 border border-green-200 dark:border-green-800/50 relative overflow-hidden group">
                <div class="absolute top-0 left-0 w-32 h-32 bg-green-200/30 dark:bg-green-700/20 rounded-full -translate-y-1/2 -translate-x-1/2"></div>
                <div class="relative">
                    <div class="w-12 h-12 bg-green-100 dark:bg-green-800 rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Share & Collaborate with Collectors</h3>
                    <p class="text-gray-600 dark:text-gray-400">Connect with the global numismatic community. Share your collection catalog, import templates from experienced collectors, and collaborate on research projects. Perfect for coin clubs and numismatic societies.</p>
                </div>
            </div>

            <!-- Feature 4: Literature -->
            <div class="landing-fade landing-fade-delay-4 feature-card bg-gradient-to-br from-amber-100 to-yellow-100 dark:from-amber-900/30 dark:to-yellow-900/30 rounded-2xl p-8 border border-amber-200 dark:border-amber-800/50 relative overflow-hidden group">
                <div class="absolute bottom-0 left-0 w-32 h-32 bg-amber-200/30 dark:bg-amber-700/20 rounded-full translate-y-1/2 -translate-x-1/2"></div>
                <div class="relative">
                    <div class="w-12 h-12 bg-amber-100 dark:bg-amber-800 rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2"><?= Lang::get('landing_feature_literature_title') ?></h3>
                    <p class="text-gray-600 dark:text-gray-400"><?= Lang::get('landing_feature_literature_desc') ?></p>
                </div>
            </div>

            <!-- Feature 5: Multi-Language -->
            <div class="landing-fade landing-fade-delay-5 feature-card bg-gradient-to-br from-cyan-100 to-teal-100 dark:from-cyan-900/30 dark:to-teal-900/30 rounded-2xl p-8 border border-cyan-200 dark:border-cyan-800/50 relative overflow-hidden group">
                <div class="absolute top-0 right-0 w-32 h-32 bg-cyan-200/30 dark:bg-cyan-700/20 rounded-full -translate-y-1/2 translate-x-1/2"></div>
                <div class="relative">
                    <div class="w-12 h-12 bg-cyan-100 dark:bg-cyan-800 rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-cyan-600 dark:text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2"><?= Lang::get('landing_feature_multilang_title') ?></h3>
                    <p class="text-gray-600 dark:text-gray-400"><?= Lang::get('landing_feature_multilang_desc') ?></p>
                </div>
            </div>

            <!-- Feature 6: Lists & Reminders (spans 2 cols) -->
            <div class="landing-fade landing-fade-delay-3 md:col-span-2 feature-card bg-gradient-to-br from-rose-100 to-orange-100 dark:from-rose-900/30 dark:to-orange-900/30 rounded-2xl p-8 border border-rose-200 dark:border-rose-800/50 relative overflow-hidden group">
                <div class="absolute top-0 right-0 w-40 h-40 bg-rose-200/30 dark:bg-rose-700/20 rounded-full -translate-y-1/2 translate-x-1/2"></div>
                <div class="relative">
                    <div class="w-12 h-12 bg-rose-100 dark:bg-rose-800 rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-rose-600 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2"><?= Lang::get('landing_feature_lists_title') ?></h3>
                    <p class="text-gray-600 dark:text-gray-400 max-w-md"><?= Lang::get('landing_feature_lists_desc') ?></p>
                </div>
            </div>

            <!-- Feature 7: Export & Backup -->
            <div class="landing-fade landing-fade-delay-4 feature-card bg-gradient-to-br from-slate-50 to-gray-100 dark:from-slate-800/50 dark:to-gray-800/50 rounded-2xl p-8 border border-slate-200 dark:border-slate-700/50 relative overflow-hidden group">
                <div class="absolute bottom-0 right-0 w-32 h-32 bg-slate-200/40 dark:bg-slate-700/30 rounded-full translate-y-1/2 translate-x-1/2"></div>
                <div class="relative">
                    <div class="w-12 h-12 bg-slate-200 dark:bg-slate-700 rounded-xl flex items-center justify-center mb-5">
                        <svg class="w-6 h-6 text-slate-600 dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/></svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2"><?= Lang::get('landing_feature_export_title') ?></h3>
                    <p class="text-gray-600 dark:text-gray-400"><?= Lang::get('landing_feature_export_desc') ?></p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ==================== HOW IT WORKS ==================== -->
<section id="how-it-works" class="py-20 md:py-28" style="content-visibility: auto; contain-intrinsic-size: 800px" role="region" aria-labelledby="how-it-works-heading">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16 landing-fade">
            <h2 id="how-it-works-heading" class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-4"><?= Lang::get('landing_how_title') ?></h2>
            <p class="text-lg text-gray-600 dark:text-gray-400"><?= Lang::get('landing_how_subtitle') ?></p>
        </div>

        <div class="grid md:grid-cols-3 gap-8 lg:gap-12">
            <!-- Step 1 -->
            <div class="landing-fade landing-fade-delay-1 text-center">
                <div class="step-number w-16 h-16 bg-primary-600 text-white rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-6">1</div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3"><?= Lang::get('landing_how_step1_title') ?></h3>
                <p class="text-gray-600 dark:text-gray-400"><?= Lang::get('landing_how_step1_desc') ?></p>
            </div>

            <!-- Step 2 -->
            <div class="landing-fade landing-fade-delay-2 text-center">
                <div class="step-number w-16 h-16 bg-primary-600 text-white rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-6">2</div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3"><?= Lang::get('landing_how_step2_title') ?></h3>
                <p class="text-gray-600 dark:text-gray-400"><?= Lang::get('landing_how_step2_desc') ?></p>
            </div>

            <!-- Step 3 -->
            <div class="landing-fade landing-fade-delay-3 text-center">
                <div class="step-number w-16 h-16 bg-primary-600 text-white rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-6">3</div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3"><?= Lang::get('landing_how_step3_title') ?></h3>
                <p class="text-gray-600 dark:text-gray-400"><?= Lang::get('landing_how_step3_desc') ?></p>
            </div>
        </div>
    </div>
</section>

<!-- ==================== CTA SECTION ==================== -->
<section class="py-20 md:py-28 bg-gradient-to-br from-primary-600 via-primary-700 to-primary-900 relative overflow-hidden" style="content-visibility: auto; contain-intrinsic-size: 600px" role="region" aria-labelledby="cta-heading">
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-10 left-10 w-72 h-72 bg-white rounded-full blur-3xl"></div>
        <div class="absolute bottom-10 right-10 w-96 h-96 bg-blue-300 rounded-full blur-3xl"></div>
    </div>

    <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center landing-fade">
        <h2 id="cta-heading" class="text-3xl md:text-4xl font-extrabold text-white mb-4"><?= Lang::get('landing_cta_title') ?></h2>
        <p class="text-lg text-primary-100 mb-10 max-w-2xl mx-auto"><?= Lang::get('landing_cta_subtitle') ?></p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="<?= APP_URL ?>/register" class="inline-flex items-center justify-center gap-2 bg-white text-primary-700 font-bold py-3.5 px-8 rounded-xl hover:bg-primary-50 transition-all hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-700" aria-label="<?= Lang::get('landing_cta_btn') ?>">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
                <?= Lang::get('landing_cta_btn') ?>
            </a>
            <a href="#hero-login" class="inline-flex items-center justify-center gap-2 border-2 border-white/30 text-white font-semibold py-3.5 px-8 rounded-xl hover:bg-white/10 transition-all focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-700" aria-label="<?= Lang::get('login_btn') ?>">
                <?= Lang::get('login_btn') ?>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
            </a>
        </div>
    </div>
</section>

<!-- ==================== FOOTER ==================== -->
<footer class="bg-gray-900 text-gray-400 py-10" role="contentinfo">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center justify-between gap-6 text-center md:text-left">
            <div class="flex items-center justify-center md:justify-start">
                <span class="text-white font-bold text-lg"><?= Lang::get('app_name') ?></span>
            </div>
            <div class="flex flex-wrap items-center justify-center gap-4 text-sm md:hidden">
                <a href="<?= APP_URL ?>/articles" class="hover:text-white transition-colors" aria-label="<?= Lang::get('articles') ?>"><?= Lang::get('articles') ?></a>
                <a href="<?= APP_URL ?>/support" class="hover:text-white transition-colors" aria-label="<?= Lang::get('support') ?> page"><?= Lang::get('support') ?></a>
                <a href="<?= APP_URL ?>/contact" class="hover:text-white transition-colors" aria-label="<?= Lang::get('contact') ?> page"><?= Lang::get('contact') ?></a>
                <a href="<?= APP_URL ?>/privacy" class="hover:text-white transition-colors" aria-label="<?= Lang::get('privacy') ?> page"><?= Lang::get('privacy') ?></a>
                <a href="<?= APP_URL ?>/terms" class="hover:text-white transition-colors" aria-label="<?= Lang::get('terms') ?> page"><?= Lang::get('terms') ?></a>
            </div>
            <div class="hidden md:flex items-center gap-6 text-sm">
                <a href="<?= APP_URL ?>/articles" class="hover:text-white transition-colors" aria-label="<?= Lang::get('articles') ?>"><?= Lang::get('articles') ?></a>
                <a href="<?= APP_URL ?>/support" class="hover:text-white transition-colors" aria-label="<?= Lang::get('support') ?> page"><?= Lang::get('support') ?></a>
                <a href="<?= APP_URL ?>/contact" class="hover:text-white transition-colors" aria-label="<?= Lang::get('contact') ?> page"><?= Lang::get('contact') ?></a>
                <a href="<?= APP_URL ?>/privacy" class="hover:text-white transition-colors" aria-label="<?= Lang::get('privacy') ?> page"><?= Lang::get('privacy') ?></a>
                <a href="<?= APP_URL ?>/terms" class="hover:text-white transition-colors" aria-label="<?= Lang::get('terms') ?> page"><?= Lang::get('terms') ?></a>
            </div>
        </div>
        <div class="mt-6 pt-6 border-t border-gray-800 text-center text-sm">
            <span>&copy; <?= date('Y') ?> <?= Lang::get('app_name') ?>. All Rights Reserved. Built by <a href="#" onclick="this.href='mailto:'+['ljubomirlukic','gmail.com'].join('@');return true;" class="text-primary-400 hover:text-primary-300 transition-colors" aria-label="Contact developer via email">LJ</a></span>
        </div>
    </div>
</footer>

<?= Recaptcha::renderJavaScript() ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // ==================== Theme Toggle ====================
    var themeToggle = document.getElementById('themeToggle');
    var sunIcon = document.getElementById('sunIcon');
    var moonIcon = document.getElementById('moonIcon');
    var html = document.documentElement;

    function setTheme(dark) {
        if (dark) {
            html.classList.add('dark');
            localStorage.setItem('theme', 'dark');
            if (sunIcon) sunIcon.classList.remove('hidden');
            if (moonIcon) moonIcon.classList.add('hidden');
        } else {
            html.classList.remove('dark');
            localStorage.setItem('theme', 'light');
            if (sunIcon) sunIcon.classList.add('hidden');
            if (moonIcon) moonIcon.classList.remove('hidden');
        }
    }

    var savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        setTheme(true);
    } else if (savedTheme === 'light') {
        setTheme(false);
    } else {
        setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
    }

    if (themeToggle) {
        themeToggle.addEventListener('click', function() {
            setTheme(!html.classList.contains('dark'));
        });
    }

    // ==================== Mobile Menu ====================
    var mobileMenuBtn = document.getElementById('mobileMenuBtn');
    var mobileMenu = document.getElementById('mobileMenu');
    var menuOpenIcon = document.getElementById('menuOpenIcon');
    var menuCloseIcon = document.getElementById('menuCloseIcon');

    if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
            menuOpenIcon.classList.toggle('hidden');
            menuCloseIcon.classList.toggle('hidden');
        });
        mobileMenu.querySelectorAll('a').forEach(function(link) {
            link.addEventListener('click', function() {
                mobileMenu.classList.add('hidden');
                menuOpenIcon.classList.remove('hidden');
                menuCloseIcon.classList.add('hidden');
            });
        });
    }

    // ==================== Navbar scroll effect ====================
    var nav = document.getElementById('landingNav');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 20) {
            nav.classList.add('scrolled', 'border-gray-200', 'dark:border-gray-700');
            nav.classList.remove('border-transparent');
        } else {
            nav.classList.remove('scrolled', 'border-gray-200', 'dark:border-gray-700');
            nav.classList.add('border-transparent');
        }
    });

    // ==================== Scroll fade-in ====================
    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

    document.querySelectorAll('.landing-fade').forEach(function(el) {
        if (!el.classList.contains('visible')) {
            observer.observe(el);
        }
    });

    // ==================== Auto-dismiss flash messages ====================
    setTimeout(function() {
        document.querySelectorAll('.flash-message').forEach(function(el) {
            el.parentElement.style.transition = 'opacity 0.5s';
            el.parentElement.style.opacity = '0';
            setTimeout(function() { el.parentElement.remove(); }, 500);
        });
    }, 5000);
});
</script>

</body>
</html>
