{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_content %}
    {% set c = career %}
    {# Bereiche mit offenen Stellen zuerst, danach die übrigen in fester Reihenfolge #}
    {% set areas = c.areas|filter(a => a.jobs|length > 0)|merge(c.areas|filter(a => a.jobs|length == 0)) %}

    <div class="container rk-page">
        <header class="rk-hero">
            <span class="rk-hero-word" aria-hidden="true">Karriere</span>
            <div class="rk-hero-copy">
                <p class="rk-kicker">Karriere bei Riccardo</p>
                <h1>Arbeiten bei Riccardo</h1>
                <p class="rk-lead">Seit 2011 Fachhandel für E-Zigaretten und Liquids – mit über 30 Filialen, eigenem Onlineshop und eigenem Lager. Wir suchen Menschen, die gern beraten, anpacken und mitdenken.</p>
                <div class="rk-hero-actions">
                    {% if c.count > 0 %}
                        <a class="btn btn-primary btn-lg" href="#stellen">{{ c.count }} offene {{ c.count == 1 ? 'Stelle' : 'Stellen' }} ansehen</a>
                    {% endif %}
                    <a class="btn btn-light btn-lg" href="#initiativ">Initiativ bewerben</a>
                </div>
            </div>
            <dl class="rk-facts">
                <div><dt>2011</dt><dd>gegründet</dd></div>
                <div><dt>30+</dt><dd>Filialen</dd></div>
                <div><dt>{{ c.count }}</dt><dd>offene {{ c.count == 1 ? 'Stelle' : 'Stellen' }}</dd></div>
            </dl>
        </header>

        <section class="rk-section" aria-labelledby="rk-areas-title">
            <div class="rk-section-head">
                <h2 id="rk-areas-title" class="rk-h2">Unsere Bereiche</h2>
                <p>Vier Teams, ein Ziel: Kunden gut beraten – im Laden und online.</p>
            </div>
            <div class="rk-areas">
                {% for area in areas %}
                    <a class="rk-area{{ area.jobs is empty ? ' is-quiet' : '' }}" href="#bereich-{{ area.key }}">
                        <span class="rk-area-icon">{% sw_include '@RiccardoKarriere/storefront/component/karriere/icon.html.twig' with { name: area.icon } %}</span>
                        <strong class="rk-area-name">{{ area.name }}</strong>
                        <span class="rk-area-text">{{ area.text }}</span>
                        {% if area.jobs is not empty %}
                            <span class="rk-badge rk-badge--open">{{ area.jobs|length }} offene {{ area.jobs|length == 1 ? 'Stelle' : 'Stellen' }}</span>
                        {% else %}
                            <span class="rk-badge">Initiativbewerbung</span>
                        {% endif %}
                    </a>
                {% endfor %}
            </div>
        </section>

        <section id="stellen" class="rk-section" aria-labelledby="rk-jobs-title">
            <div class="rk-section-head">
                <h2 id="rk-jobs-title" class="rk-h2">Offene Stellen</h2>
                <p>
                    {% if c.count > 0 %}Aktuell {{ c.count }} {{ c.count == 1 ? 'Ausschreibung' : 'Ausschreibungen' }}{% else %}Gerade keine Ausschreibung{% endif %}
                    {%- if c.lastSync %} · Stand {{ c.lastSync|date('d.m.Y') }}{% endif %}
                </p>
            </div>

            {% for area in areas %}
                <div class="rk-group" id="bereich-{{ area.key }}">
                    <h3 class="rk-group-title">
                        <span class="rk-group-icon">{% sw_include '@RiccardoKarriere/storefront/component/karriere/icon.html.twig' with { name: area.icon } %}</span>
                        {{ area.name }}
                        <span class="rk-group-count">{{ area.jobs|length }}</span>
                    </h3>
                    {% if area.jobs is not empty %}
                        <ul class="rk-jobs">
                            {% for job in area.jobs %}
                                <li>{% sw_include '@RiccardoKarriere/storefront/component/karriere/job-card.html.twig' with { job: job } %}</li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <div class="rk-empty">
                            <p><strong>Gerade keine offene Stelle.</strong> {{ area.initiative }}</p>
                            <a class="btn btn-light" href="{{ c.initiativeUrl }}">Initiativ bewerben</a>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </section>

        {% if c.benefits is not empty %}
            <section class="rk-section rk-benefits" aria-labelledby="rk-benefits-title">
                <div class="rk-section-head">
                    <h2 id="rk-benefits-title" class="rk-h2">Was wir bieten</h2>
                    <p>Aus unseren aktuellen Stellenanzeigen.</p>
                </div>
                <ul class="rk-benefit-list">
                    {% for benefit in c.benefits %}
                        <li>{% sw_include '@RiccardoKarriere/storefront/component/karriere/icon.html.twig' with { name: 'check' } %}<span>{{ benefit }}</span></li>
                    {% endfor %}
                </ul>
            </section>
        {% endif %}

        <section class="rk-section" aria-labelledby="rk-steps-title">
            <div class="rk-section-head">
                <h2 id="rk-steps-title" class="rk-h2">So bewirbst du dich</h2>
            </div>
            <ol class="rk-steps">
                <li><strong>Stelle aussuchen</strong><span>Aufgaben, Profil und Angebot stehen bei jeder Stelle auf einen Blick.</span></li>
                <li><strong>Online bewerben</strong><span>Lebenslauf und Zeugnisse über unser Bewerbungsportal hochladen.</span></li>
                <li><strong>Kennenlernen</strong><span>Wir sehen uns deine Unterlagen an und melden uns bei dir.</span></li>
            </ol>
        </section>

        <section id="initiativ" class="rk-initiative" aria-labelledby="rk-initiative-title">
            <div>
                <h2 id="rk-initiative-title">Nichts Passendes dabei?</h2>
                <p>Bewirb dich initiativ – schreib uns, in welchem Bereich und in welcher Stadt du arbeiten möchtest.</p>
                {% if c.contact %}<p class="rk-contact">Dein Kontakt: <strong>{{ c.contact }}</strong></p>{% endif %}
            </div>
            <div class="rk-initiative-actions">
                <a class="btn btn-primary btn-lg" href="{{ c.initiativeUrl }}">Initiativ bewerben</a>
                <a class="rk-link" href="{{ path('frontend.riccardo.stores.page') }}">Filialen in deiner Nähe</a>
            </div>
        </section>
    </div>
{% endblock %}