<?php
// public/index.php

// Einfache Sprach-Erkennung
$supportedLangs = ['de', 'en', 'it', 'fr'];
$defaultLang    = 'en';

// 1) Direkt per ?lang=de
if (isset($_GET['lang']) && in_array($_GET['lang'], $supportedLangs, true)) {
    $currentLang = $_GET['lang'];
} else {
    // 2) Grobe Erkennung aus Accept-Language
    $currentLang = $defaultLang;
    if (!empty($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
        $accepted = strtolower(substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2));
        if (in_array($accepted, $supportedLangs, true)) {
            $currentLang = $accepted;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="<?php echo htmlspecialchars($currentLang); ?>">
<head>
    <meta charset="UTF-8">
    <title>USBCheck – Test your USB drives</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Fonts: Montserrat + Inter -->
    <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=Inter:wght@400;500&family=Montserrat:wght@600;700&display=swap" rel="stylesheet">

    <!-- Main stylesheet -->
    <link rel="stylesheet" href="/assets/css/main.css?v=1">
</head>
<body data-current-lang="<?php echo htmlspecialchars($currentLang); ?>">

<?php
// Header-Partial einbinden (benutzt $currentLang)
include __DIR__ . '/partials/header.php';
?>

<main>
    <!-- HERO -->
    <section class="section hero" id="top">
        <div class="container hero-grid">
            <div class="hero-text">
                <p class="hero-kicker" data-i18n="hero_kicker"></p>
                <h1 class="hero-title" data-i18n="hero_title"></h1>
                <p class="hero-subtitle" data-i18n="hero_subtitle"></p>

                <div class="hero-actions">
                    <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/fakecheck/', $currentLang)); ?>"
                       class="btn btn-primary"
                       id="quick-test-btn"
                       data-i18n="cta_quick_test"></a>

                    <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/', $currentLang)); ?>#how-it-works"
                       class="btn btn-ghost"
                       data-i18n="cta_how_it_works"></a>
                </div>

                <ul class="hero-bullets">
                    <li data-i18n="hero_bullet_1"></li>
                    <li data-i18n="hero_bullet_2"></li>
                    <li data-i18n="hero_bullet_3"></li>
                </ul>
            </div>

            <div class="hero-visual">
                <div class="hero-card">
                    <img src="/img/logo_slogan.png" alt="usbcheck.it" class="hero-logo">
                    <p class="hero-card-title" data-i18n="hero_card_title"></p>
                    <div class="hero-metrics">
                        <div class="metric">
                            <span class="metric-label" data-i18n="metric_speed"></span>
                            <span class="metric-value">125 MB/s</span>
                        </div>
                        <div class="metric">
                            <span class="metric-label" data-i18n="metric_integrity"></span>
                            <span class="metric-value">99.98%</span>
                        </div>
                        <div class="metric">
                            <span class="metric-label" data-i18n="metric_confidence"></span>
                            <span class="metric-value">✔</span>
                        </div>
                    </div>
                    <p class="hero-small" data-i18n="hero_small_hint"></p>
                </div>
                <div class="hero-stick">
                    <img src="/img/stick_blank.png" alt="USB Stick Illustration">
                </div>
            </div>
        </div>
    </section>

    <!-- HOW IT WORKS -->
    <section class="section" id="how-it-works">
        <div class="container">
            <h2 class="section-title" data-i18n="how_title"></h2>
            <p class="section-lead" data-i18n="how_intro"></p>

            <div class="steps-grid">
                <article class="step-card">
                    <div class="step-icon">1</div>
                    <h3 data-i18n="how_step1_title"></h3>
                    <p data-i18n="how_step1_text"></p>
                </article>
                <article class="step-card">
                    <div class="step-icon">2</div>
                    <h3 data-i18n="how_step2_title"></h3>
                    <p data-i18n="how_step2_text"></p>
                </article>
                <article class="step-card">
                    <div class="step-icon">3</div>
                    <h3 data-i18n="how_step3_title"></h3>
                    <p data-i18n="how_step3_text"></p>
                </article>
                <article class="step-card">
                    <div class="step-icon">4</div>
                    <h3 data-i18n="how_step4_title"></h3>
                    <p data-i18n="how_step4_text"></p>
                </article>
            </div>
        </div>
    </section>

    <!-- FEATURES -->
    <section class="section section-alt" id="features">
        <div class="container">
            <h2 class="section-title" data-i18n="features_title"></h2>
            <p class="section-lead" data-i18n="features_intro"></p>

            <div class="features-grid">
                <article class="feature-card">
                    <h3 data-i18n="feature_free_title"></h3>
                    <ul>
                        <li data-i18n="feature_free_1"></li>
                        <li data-i18n="feature_free_2"></li>
                        <li data-i18n="feature_free_3"></li>
                    </ul>
                </article>

                <article class="feature-card feature-card-pro">
                    <div class="pill" data-i18n="label_coming_soon"></div>
                    <h3 data-i18n="feature_pro_title"></h3>
                    <ul>
                        <li data-i18n="feature_pro_1"></li>
                        <li data-i18n="feature_pro_2"></li>
                        <li data-i18n="feature_pro_3"></li>
                    </ul>
                </article>
            </div>
        </div>
    </section>

    <!-- PRICING -->
    <section class="section" id="pricing">
        <div class="container">
            <h2 class="section-title" data-i18n="pricing_title"></h2>
            <p class="section-lead" data-i18n="pricing_intro"></p>

            <div class="pricing-grid">
                <article class="pricing-card">
                    <h3 data-i18n="pricing_free_title"></h3>
                    <p class="price-tag" data-i18n="pricing_free_price"></p>
                    <ul>
                        <li data-i18n="pricing_free_1"></li>
                        <li data-i18n="pricing_free_2"></li>
                        <li data-i18n="pricing_free_3"></li>
                    </ul>
                    <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/fakecheck/', $currentLang)); ?>"
                       class="btn btn-primary"
                       data-i18n="pricing_free_cta"></a>
                </article>

                <article class="pricing-card pricing-card-muted">
                    <h3 data-i18n="pricing_pro_title"></h3>
                    <p class="price-tag" data-i18n="pricing_pro_price"></p>
                    <ul>
                        <li data-i18n="pricing_pro_1"></li>
                        <li data-i18n="pricing_pro_2"></li>
                        <li data-i18n="pricing_pro_3"></li>
                    </ul>
                    <button class="btn btn-disabled" disabled data-i18n="pricing_pro_cta"></button>
                </article>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="section section-alt" id="faq">
        <div class="container">
            <h2 class="section-title" data-i18n="faq_title"></h2>
            <p class="section-lead" data-i18n="faq_intro"></p>

            <div class="faq-grid">
                <details class="faq-item" open>
                    <summary data-i18n="faq_q1"></summary>
                    <p data-i18n="faq_a1"></p>
                </details>
                <details class="faq-item">
                    <summary data-i18n="faq_q2"></summary>
                    <p data-i18n="faq_a2"></p>
                </details>
                <details class="faq-item">
                    <summary data-i18n="faq_q3"></summary>
                    <p data-i18n="faq_a3"></p>
                </details>
                <details class="faq-item">
                    <summary data-i18n="faq_q4"></summary>
                    <p data-i18n="faq_a4"></p>
                </details>
            </div>
        </div>
    </section>
</main>

<footer class="site-footer">
    <div class="container footer-inner">
        <p>&copy; <?php echo date('Y'); ?> usbcheck.it</p>
        <div class="footer-links">
            <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/impressum', $currentLang)); ?>"
               data-i18n="footer_imprint"></a>
            <a href="<?php echo htmlspecialchars(usbcheck_url_with_lang('/datenschutz', $currentLang)); ?>"
               data-i18n="footer_privacy"></a>
        </div>
    </div>
</footer>

<script src="/assets/js/lang.js?v=1"></script>
</body>
</html>
