<section id="hero" class="section hero is-primary is-fullheight ink bottom">
    <div class="hero-body twist has-text-centered container">
        <img src="{{ hfs:logo }}" alt="HFS SUMMER" class="mb-4"/>
        <p class="title twist-fore is-size-4 is-size-1-tablet">
            {{ hfs:date_start }} - {{ hfs:date_end }}
        </p>
        <p class="subtitle twist-fore is-size-5 is-size-4-tablet">{{ hfs:place }}</p>
    </div>
</section>

<section id="reel">
    <video autoplay loop muted playsinline>
        <source src="assets/video/reel.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</section>

<section class="section has-background-primary has-text-black ink bottom" id="catch">
    <div class="is-size-1 has-text-weight-bold is-uppercase container">
        {{ content | widont }}
    </div>
</section>

<section class="section has-background-black ink bottom yellow" id="event">
    <div class="container">
        <h2 class="is-size-2 has-text-weight-bold is-uppercase has-text-primary block">L'évènement</h2>
        {{ incentives }}
        {{ partial:_incentiveblock  }}
        {{ /incentives }}
    </div>
</section>

<section class="section has-background-primary has-text-black" id="tournaments">
    <div class="container">
    <h2 class="is-size-2 has-text-weight-bold is-uppercase block">
        Tournois
        <a class="navbar-item button is-rounded is-float-right" href="/reglement">
            Règlement
        </a>
    </h2>

    <h3 class="is-size-3 has-text-weight-bold is-uppercase block">Tournois S-Tier</h3>
    <div class="custom-grid block">
        {{ collection:tournaments type:is="stier" }}
        {{  partial:_tournamentblock  }}
        {{ /collection:tournaments }}
    </div>


    <h3 class="is-size-3 has-text-weight-bold is-uppercase">Tournois A-Tier</h3>
        <div class="custom-grid block">
            {{ collection:tournaments type:is="atier" }}
            {{  partial:_tournamentblock  }}
            {{ /collection:tournaments }}
        </div>

    <h3 class="is-size-3 has-text-weight-bold is-uppercase">Tournois Rythm-Tier</h3>
        <div class="custom-grid block">
            {{ collection:tournaments type:is="rythm" }}
            {{  partial:_tournamentblock  }}
            {{ /collection:tournaments }}
        </div>

    <h3 class="is-size-3 has-text-weight-bold is-uppercase">Tournois Family-Tier</h3>
        <div class="custom-grid block">
            {{ collection:tournaments type:is="family" }}
            {{  partial:_tournamentblock  }}
            {{ /collection:tournaments }}
        </div>
    </div>
</section>


<section class="section ink top yellow" id="gallery">
    <div class="container">
        <h2 class="is-size-2 has-text-weight-bold is-uppercase block has-text-primary">Gallerie</h2>
        <div class="grid is-col-min-9 is-col-min">
            {{ photos }}
            {{  partial:_photoblock  }}
            {{ /photos }}
        </div>
    </div>
</section>


<section class="section has-background-primary has-text-black" id="faq">
    <div class="container">
        <h2 class="is-size-2 has-text-weight-bold is-uppercase block">Infos pratiques</h2>

        <div class="faq-list">
            {{ faqs sort="order asc" }}
            <details class="box faq-item" role="group">
                <summary class="is-size-4 has-text-weight-semibold is-uppercase" role="button" aria-expanded="false">
                    <span>{{ question }}</span>
                    <span class="faq-caret" aria-hidden="true">▾</span>
                </summary>

                <div class="content mt-3 has-text-white">
                    <p>{{ reponse }}</p>
                </div>
            </details>
            {{ /faqs }}
        </div>
    </div>

</section>


<section class="section" id="tickets">
    <div class="container">
        <h2 class="is-size-2 has-text-weight-bold is-uppercase block has-text-primary">Tarifs</h2>

        <div class="grid is-multiline">
            {{ collection:prices sort="order asc" limit="3" }}
                <div class="cell block has-text-centered">
                    <h3 class="is-size-4 has-text-weight-bold is-uppercase mb-2">{{ title }}</h3>
                    {{ if sold_out }}<span class="tag is-primary has-text-weight-bold">ÉPUISÉ</span>{{ /if }}
                    <p>{{ content }}</p>
                    <p class="is-size-1 has-text-weight-bold mb-3">{{ price }} €</p>
                </div>
            {{ /collection:prices }}
        </div>

        <p class="mt-4">
            <a href="{{ hfs:lien_billetterie }}" class="button is-outlined is-primary is-fullwidth is-rounded" target="_blank">Voir la billetterie</a>
        </p>
    </div>
</section>

<section class="section has-background-primary has-text-black ink bottom" id="sponsors">
    <div class="container">
        <h2 class="is-size-2 has-text-weight-bold is-uppercase block">Sponsors & partenaires</h2>

        <div class="columns is-multiline is-mobile">
            {{ collection:sponsors sort="order asc" }}
                <div class="column is-half-mobile is-one-fifth-tablet" title="{{ name }}">
                    {{ if link }}
                    <a href="{{ link }}" target="_blank" rel="noopener noreferrer" class="partner-link" style="text-decoration:none;">
                    {{ else }}
                    <div class="partner-link" style="">
                    {{ /if }}
                    <div class="partner-box">
                        <img src="{{ glide:logo preset='logo' fm="webp"}}" alt="{{ logo:alt }}" style="max-width:100%;max-height:100%;object-fit:contain;display:block;">
                    </div>
                    {{ if link }}
                        </a>
                    {{ else }}
                        </div>
                    {{ /if }}
                </div>
            {{ /collection:sponsors }}
        </div>
    </div>
</section>
