@php
    $stats = [
        ['prefix' => '+', 'value' => 400, 'suffix' => '', 'label' => 'Clients accompagnés', 'decimals' => 0],
        ['prefix' => '', 'value' => 4.8, 'suffix' => '/5', 'label' => 'Note globale', 'decimals' => 1],
        ['prefix' => '+', 'value' => 22, 'suffix' => ' ans', 'label' => "D'expérience", 'decimals' => 0],
        ['prefix' => '', 'value' => 97, 'suffix' => '%', 'label' => 'Satisfaction client', 'decimals' => 0],
    ];

    $services = [
        ['abbr' => 'ADS', 'name' => 'Paid Ads', 'sub' => 'Acquisition', 'color' => 'teal'],
        ['abbr' => 'CONTENT', 'name' => 'Content Marketing', 'sub' => 'Engagement', 'color' => 'red'],
        ['abbr' => 'DEV', 'name' => 'Tech & Development', 'sub' => 'Développement', 'color' => 'teal'],
        ['abbr' => 'DATA', 'name' => 'Data', 'sub' => 'Data & Analytics', 'color' => 'red'],
        ['abbr' => 'STRATEGY', 'name' => 'Digital Strategy', 'sub' => '360° Consulting', 'color' => 'teal'],
        ['abbr' => 'AUTOMATION', 'name' => 'Marketing Automation ', 'sub' => 'Growth & Scale', 'color' => 'red'],
        ['abbr' => 'SEO', 'name' => 'Search Engine Optimization', 'sub' => 'Organic Visibility', 'color' => 'teal'],
    ];
@endphp

<section id="accueil" class="atirao-hero" aria-labelledby="atirao-hero-title" data-atirao-hero data-atirao-reveal-section>
    <canvas class="atirao-hero__canvas" aria-hidden="true" data-atirao-hero-canvas></canvas>
    <div class="atirao-hero__glow atirao-hero__glow--teal" aria-hidden="true"></div>
    <div class="atirao-hero__glow atirao-hero__glow--red" aria-hidden="true"></div>
    <div class="atirao-hero__grid" aria-hidden="true"></div>
    <div class="atirao-hero__signal" aria-hidden="true">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="atirao-hero__ghost" aria-hidden="true">
        <span class="atirao-hero__ghost-word atirao-hero__ghost-word--atirao">
             <span class="atirao-hero__ghost-fill">ATIRAO</span>
        </span>
         
        {{-- <span class="atirao-hero__ghost-word atirao-hero__ghost-word--full">
            <span class="atirao-hero__ghost-outline">360 °</span>
            <span class="atirao-hero__ghost-fill">360 °</span>
        </span> --}}
    </div>

    <div class="atirao-container atirao-hero__content">

        <h1 id="atirao-hero-title" class="atirao-hero__title atirao-reveal" data-atirao-reveal>
            <span class="atirao-hero__title-line">Atirao, <span class="atirao-hero__title-accent">partenaire</span> de votre performance digitale.</span>
            <!-- <span class="atirao-hero__title-line">performance <em>digitale.</em></span> -->
        </h1>

        <p class="atirao-hero__description atirao-reveal" data-atirao-reveal>
            Optimisez votre stratégie digitale pour un retour sur investissement concret. Au
            service de l'innovation et de la performance depuis plus de 22 ans.
        </p>
        

        <!-- <div class="atirao-hero__actions atirao-reveal" data-atirao-reveal>
            <a class="atirao-button atirao-button--primary atirao-button--large" href="#contact">
                Prendre un RDV
                <x-ui.icon name="ArrowRightIcon" :size="15" />
            </a>
            <a class="atirao-button atirao-button--outline-light atirao-button--large" href="#expertises">Nos expertises</a>
        </div> -->

        <!-- <div class="atirao-hero__trust atirao-reveal" data-atirao-reveal>
            <div class="atirao-hero__avatars" aria-hidden="true">
                <span>PA</span>
                <span>MC</span>
                <span>DT</span>
                <span>AD</span>
            </div>
            <div>
                <div class="atirao-hero__stars" aria-label="5 étoiles sur 5">
                    @for ($i = 0; $i < 5; $i++)
                        <x-ui.icon name="StarIcon" :size="11" variant="solid" />
                    @endfor
                </div>
                <p>+400 clients satisfaits</p>
            </div>
        </div> -->

        <div class="atirao-hero__actions atirao-reveal" data-atirao-reveal>
            <a class="atirao-button atirao-button--primary atirao-button--large" href="#contact">
                Prendre un RDV
                <x-ui.icon name="ArrowRightIcon" :size="15" />
            </a>
            <a class="atirao-button atirao-button--outline-light atirao-button--large" href="#expertises">Nos expertises</a>
        </div>
        

        <div class="atirao-hero__services atirao-reveal" data-atirao-reveal>
            <!-- <p class="atirao-hero__services-label">UN ACCOMPAGNEMENT 360° DE VOTRE CROISSANCE DIGITALE</p> -->
            <div class="atirao-hero__services-grid">
                @foreach ($services as $service)
                    <div class="atirao-hero__service-card atirao-hero__service-card--{{ $service['color'] }}">
                        <span class="atirao-hero__service-abbr atirao-hero__service-abbr--{{ $service['color'] }}">{{ $service['abbr'] }}</span>
                        <strong class="atirao-hero__service-name">{{ $service['name'] }}</strong>
                        <span class="atirao-hero__service-sub">{{ $service['sub'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="atirao-hero__stats atirao-reveal" data-atirao-counter-group data-atirao-reveal>
            @foreach ($stats as $stat)
                <div class="atirao-hero__stat">
                    <strong>
                        {{ $stat['prefix'] }}<span data-atirao-counter data-target="{{ $stat['value'] }}" data-decimals="{{ $stat['decimals'] }}">{{ $stat['value'] }}</span>{{ $stat['suffix'] }}
                    </strong>
                    <span>{{ $stat['label'] }}</span>
                </div>
            @endforeach
        </div>
    </div>
</section>