<?php $primaryFakecheckUrl = app_primary_url() . '/fakecheck/'; ?>
<section id="hero" class="hero-section relative overflow-hidden">
    <div class="relative px-4 sm:px-6 lg:px-8">
        <div class="section-shell hero-shell items-center">
        <!-- Left: Text -->
        <div class="hero-copy space-y-7">
            <p class="text-xs font-heading font-semibold tracking-[0.3em] uppercase text-brand-primary" data-i18n="hero_kicker">
                Detect fake USB sticks before you lose data
            </p>
            <h1 class="font-heading text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-brand-text" data-i18n="hero_title">
                Is my USB fake?<br><span class="text-brand-primary">Find out in minutes.</span>
            </h1>
            <p class="text-base sm:text-lg text-brand-muted max-w-xl" data-i18n="hero_lead">
                USBCheck kombiniert einen schnellen Browser-Test mit einem professionellen Pro-Modus. So erkennst du gefälschte USB-Sticks, zu kleine echte Kapazität und langsame Billig-Controller – bevor deine Dateien verschwinden.
            </p>

            <!-- CTAs -->
            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4">
                <a href="<?= htmlspecialchars($primaryFakecheckUrl) ?>"
                   class="inline-flex items-center justify-center rounded-full bg-brand-primary px-6 py-3 text-sm font-semibold text-brand-bg shadow-soft hover:bg-blue-400 transition-colors"
                   data-i18n="cta_quick">
                    Start free quick check
                    <svg class="ml-2 h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0L17 8.586a2 2 0 010 2.828l-5.293 5.293a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 110-2h9.586L10.293 4.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </a>

                <a href="#features"
                   class="inline-flex items-center justify-center rounded-full border border-brand-border/70 bg-brand-bg/60 px-6 py-3 text-sm font-semibold text-brand-text hover:border-brand-primary hover:text-brand-primary transition-colors"
                   data-i18n="cta_learn">
                    Learn more about Free &amp; Pro
                </a>
            </div>

            <!-- Trust / Highlights -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-6 border-t border-brand-border/60">
                <div class="space-y-1">
                    <p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust1_title">No install for quick check</p>
                    <p class="text-sm text-brand-text/90" data-i18n="trust1_text">Browser-basierter Test direkt auf deinem Stick.</p>
                </div>
                <div class="space-y-1">
                    <p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust2_title">Real write &amp; read tests</p>
                    <p class="text-sm text-brand-text/90" data-i18n="trust2_text">Schreib-/Lesetests mit echten Daten – keine synthetische Theorie.</p>
                </div>
                <div class="space-y-1">
                    <p class="text-xs font-semibold text-brand-muted uppercase tracking-[0.18em]" data-i18n="trust3_title">Privacy first</p>
                    <p class="text-sm text-brand-text/90" data-i18n="trust3_text">Deine Testdaten bleiben lokal – Reports nur auf Wunsch.</p>
                </div>
            </div>
        </div>

        <!-- Right: Card (Teaser Quickcheck) -->
        <div class="hero-preview w-full">
            <div class="quick-preview-card space-y-6">
                <div class="quick-preview-header">
                    <div>
                        <p class="quick-preview-eyebrow" data-i18n="quick_label">
                            QUICK CHECK PREVIEW
                        </p>
                        <h2 class="mt-2 font-heading font-semibold text-xl text-brand-text" data-i18n="quick_title">
                            Test a USB drive in under 2 minutes
                        </h2>
                    </div>
                    <span class="quick-badge" data-i18n="badge_free">
                        Free
                    </span>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="quick-metric-card">
                        <span data-i18n="quick_metric1_label">Write performance</span>
                        <span data-i18n="quick_metric1_value">~ 75–120 MB/s*</span>
                    </div>
                    <div class="quick-metric-card">
                        <span data-i18n="quick_metric2_label">Integrity checks</span>
                        <span data-i18n="quick_metric2_value">512 MB sample</span>
                    </div>
                </div>

                <p class="text-sm text-brand-muted" data-i18n="quick_intro">
                    Der Schnelltest prüft eine definierte Datenmenge auf deinem Stick und misst:
                </p>
                <ul class="list-disc list-inside space-y-1 text-sm text-brand-muted">
                    <li data-i18n="quick_li1">Schreib- und Leserate</li>
                    <li data-i18n="quick_li2">Datenintegrität (Hash-Vergleich)</li>
                    <li data-i18n="quick_li3">Verdächtige Abbrüche oder Fehler</li>
                </ul>

                <div class="quick-kit">
                    <div class="quick-kit-left">
                        <h4 data-i18n="quick_visual_title">Quick test indicator</h4>
                        <p data-i18n="quick_visual_text">
                            So sieht die Schnelltest-Vorschau aus: Grün markiert einen stabilen Stick, Orange warnt bei Auffälligkeiten.
                        </p>
                        <div class="quick-kit-lines">
                            <div class="quick-kit-line"></div>
                            <div class="quick-kit-line is-alert"></div>
                        </div>
                    </div>
                    <div class="quick-kit-window">
                        <span class="window-label" data-i18n="quick_visual_window">Result window</span>
                        <div class="window-strip">
                            <span class="window-dot is-active"></span>
                            <span class="window-dot is-pass"></span>
                            <span class="window-dot"></span>
                        </div>
                        <p class="quick-kit-footnote" data-i18n="quick_footnote">
                            *Beispielwerte – deine Ergebnisse hängen von Stick, Port &amp; System ab.
                        </p>
                    </div>
                </div>

                <a href="<?= htmlspecialchars($primaryFakecheckUrl) ?>"
                   class="block text-center rounded-full bg-brand-primary px-4 py-2.5 text-sm font-semibold text-brand-bg hover:bg-blue-400 transition-colors"
                   data-i18n="quick_cta">
                    Go to free quick check
                </a>
            </div>
        </div>
        </div>
    </div>
</section>
