{% extends 'fisch_booking/_layout.html.twig' %}

{% block title %}Fit wie ein Fisch – Schwimmkurse{% endblock %}
{% block body_class %}fisch-landing-page{% endblock %}

{% block hero %}
<section class="fisch-hero-banner" aria-label="Fit wie ein Fisch">
    <img class="fisch-hero-banner__image" src="{{ asset('images/fisch/hero.png') }}" alt="">
    <div class="fisch-hero-banner__overlay">
        <div class="container fisch-hero-banner__content">
            <img src="{{ asset('images/fisch/logo-ksb.png') }}" alt="KSB Düren" class="fisch-hero-banner__logo d-none d-sm-block">
            <span class="fisch-hero-banner__badge">Herbstferien {{ seasonYear }}</span>
            <h1 class="fisch-hero-banner__title">Fit wie ein Fisch</h1>
            <p class="fisch-hero-banner__subtitle">Kostenlose Schwimmkurse für Kinder in Düren</p>
        </div>
    </div>
    <div class="fisch-hero-banner__waves" aria-hidden="true">
        {# Kurven morphing — gegenläufige Ebenen, kein seitliches Scrollen #}
        <svg class="fisch-wave fisch-wave--back" viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0,42 C360,76 720,10 1080,42 C1260,58 1440,42 V80 H0 Z">
                <animate attributeName="d" dur="6s" repeatCount="indefinite" calcMode="spline"
                         keyTimes="0;0.5;1" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"
                         values="M0,42 C360,76 720,10 1080,42 C1260,58 1440,42 V80 H0 Z;
                                 M0,42 C360,10 720,76 1080,42 C1260,26 1440,42 V80 H0 Z;
                                 M0,42 C360,76 720,10 1080,42 C1260,58 1440,42 V80 H0 Z"/>
            </path>
        </svg>
        <svg class="fisch-wave fisch-wave--front" viewBox="0 0 1440 80" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0,26 C240,4 480,54 720,26 C960,4 1200,54 1440,26 V80 H0 Z">
                <animate attributeName="d" dur="6s" repeatCount="indefinite" calcMode="spline"
                         keyTimes="0;0.5;1" keySplines="0.4 0 0.6 1;0.4 0 0.6 1" begin="-3s"
                         values="M0,26 C240,4 480,54 720,26 C960,4 1200,54 1440,26 V80 H0 Z;
                                 M0,26 C240,54 480,4 720,26 C960,54 1200,4 1440,26 V80 H0 Z;
                                 M0,26 C240,4 480,54 720,26 C960,4 1200,54 1440,26 V80 H0 Z"/>
            </path>
        </svg>
    </div>
</section>
{% endblock %}

{% block status_banner %}
<div class="container fisch-status-wrap">
    {% if registrationOpen %}
        <div class="fisch-status-pill fisch-status-pill--open">
            <span class="fisch-status-pill__dot"></span>
            <span>Die Anmeldung ist geöffnet — jetzt Platz sichern!</span>
        </div>
    {% else %}
        <div class="fisch-status-pill fisch-status-pill--closed">
            <span class="fisch-status-pill__dot"></span>
            <span>Eine Anmeldung ist derzeit nicht möglich.</span>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block content %}
    {% set landing = fisch_landing() %}
    {% include 'fisch_booking/_landing_content_default.html.twig' with {
        landing: landing,
        registrationOpen: registrationOpen,
        seasonYear: seasonYear,
        pools: pools
    } %}

    {% if registrationOpen %}
        <section class="fisch-cta-card" aria-label="Zur Anmeldung">
            <div class="fisch-cta-card__deco fisch-cta-card__deco--left" aria-hidden="true"><i class="fas fa-water"></i></div>
            <div class="fisch-cta-card__deco fisch-cta-card__deco--right" aria-hidden="true"><i class="fas fa-fish"></i></div>
            <div class="fisch-cta-card__inner text-center">
                <h2 class="fisch-cta-card__title">Bereit für die Anmeldung?</h2>
                <p class="fisch-cta-card__text">Geburtsdatum bereithalten — die passende Kurszeit wird automatisch ermittelt.</p>
                <a href="{{ path('fisch_booking_register') }}" class="fisch-btn-primary fisch-btn-primary--lg fisch-btn-primary--shine">
                    <i class="fas fa-pen-to-square"></i> Jetzt anmelden
                </a>
            </div>
        </section>
    {% endif %}
{% endblock %}

{% block scripts %}
<script src="{{ asset('js/fisch-landing-stats.js') }}"></script>
{% endblock %}