<section class="relative w-full">
    <!-- Hintergrundbild mit zweischichtigem Overlay -->
    <div class="absolute inset-0 z-0">
        <img src="/assets/img/hero.jpg"
             alt="Hintergrundbild"
             class="w-full h-full object-cover opacity-50">
        <!-- Farbiges Overlay -->
        <div class="absolute inset-0 bg-blue-500/40"></div>
    </div>

    <!-- Content Container -->
    <div class="relative z-10 container mx-auto max-w-7xl px-4 py-24 md:py-32 sm:px-6 lg:px-8">
        <!-- Zwei-Spalten-Layout -->
        <div class="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
            <!-- Linke Spalte - Text -->
            <div class="w-full lg:w-1/2">
                <div class="flex items-center justify-center p-2">
                    <div class="relative w-full max-w-m bg-sf_grau-50 rounded-lg shadow-lg p-6">
                        <div class="absolute -top-20 left-1/2 transform -translate-x-1/2 px-2 py-2">
                            <h3 style="font-family: Case;" class="text-9xl text font-light text-sf_gelb-500 whitespace-nowrap">q</h3>
                        </div>

                        <div class="flex flex-col justify-center h-full pt-16">
                            <h1>Nette Leute spielen Schach!</h1>
                            <h2>Seien Sie nett! Spielen Sie mit?</h2>
                            <p>Wir sind immer auf der Suche nach neuen Mitgliedern. Bitte kontaktieren Sie unseren Vorstand für weitere Informationen.</p>
                        </div>

                        <?php if ($page->heroButton()->isNotEmpty()): ?>
                            <div class="mt-6 flex flex-wrap gap-4 md:mt-8 pt-8">
                                <a href="<?= $page->buttonLink() ?>" class="hover:cursor-pointer hover:text-sf_gelb-500"
                                   target="_blank">
                                    <button class="hover:cursor-pointer inline-flex gap-3 items-center justify-center whitespace-nowrap transition-all duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none border border-border-primary text-text-primary bg-background-primary px-6 py-3"
                                            title="Kontakt" type="button">
                                        <?= $page->heroButton() ?>
                                    </button>
                                </a>
                            </div>
                        <?php endif ?>
                    </div>
                </div>
            </div>

            <!-- Rechte Spalte - GIF -->
            <div class="w-3/4 md:w-1/2">
                <div class="rounded-lg overflow-hidden shadow-xl">
                    <img src="/assets/img/Hort-Martius-2.gif"
                         alt="Animation"
                         class="w-full h-auto">
                </div>
            </div>
        </div>
    </div>
</section>