@php
    $items = [
        ['number' => '01', 'icon' => 'MagnifyingGlassIcon', 'title' => 'Audit & Data Visualisation', 'description' => 'Analyse approfondie de votre empreinte digitale, visualisation claire des données et roadmap priorisée.'],
        ['number' => '02', 'icon' => 'CogIcon', 'title' => 'Intégrations & Automatisations', 'description' => 'CRM, workflows marketing automatisés, campagnes WhatsApp, SMS, e-mail et dispositifs MMP.'],
        ['number' => '03', 'icon' => 'ChartBarIcon', 'title' => 'Analytics Stack Enterprise', 'description' => 'Sites performants, tracking fiable, reporting lisible et documentation pour vos équipes.'],
    ];

    $words = ['Des', 'décisions', 'basées', 'sur', 'des', 'faits,', 'pas', 'sur', 'des', 'suppositions.', 'La', 'data', 'au', 'cœur', 'de', 'chaque', 'stratégie.', 'Des', 'résultats', 'mesurables', 'à', 'chaque', 'étape.'];
@endphp

<section id="approche" class="atirao-value-proposition" aria-labelledby="atirao-value-title" data-atirao-reveal-section>
    <div class="atirao-value-proposition__grid" aria-hidden="true"></div>
    <div class="atirao-value-proposition__glow atirao-value-proposition__glow--teal" aria-hidden="true"></div>
    <div class="atirao-value-proposition__glow atirao-value-proposition__glow--red" aria-hidden="true"></div>

    <div class="atirao-container">
        <div class="atirao-section-label atirao-reveal" data-atirao-reveal>
            <span></span>
            Notre approche
        </div>

        <p id="atirao-value-title" class="atirao-value-proposition__headline" data-atirao-word-reveal>
            @foreach ($words as $word)
                <span data-atirao-word>{{ $word }}</span>
            @endforeach
        </p>

        <div class="atirao-value-proposition__copy atirao-reveal" data-atirao-reveal>
            <p>
                Nous implémentons un <strong>Growth Blueprint</strong> conçu pour les décideurs. Un audit
                approfondi, une visualisation claire des données et une roadmap priorisée.
            </p>
            <p>
                Intégrations CRM, workflows automatisés, campagnes multicanales et reporting sont orchestrés pour
                maximiser votre ROI avec une exécution lisible.
            </p>
        </div>

        <div class="atirao-value-proposition__cards">
            @foreach ($items as $item)
                <article class="atirao-blueprint-card atirao-reveal" data-atirao-reveal>
                    <div class="atirao-blueprint-card__top">
                        <span>{{ $item['number'] }}</span>
                        <div>
                            <x-ui.icon :name="$item['icon']" :size="18" />
                        </div>
                    </div>
                    <h3>{{ $item['title'] }}</h3>
                    <p>{{ $item['description'] }}</p>
                </article>
            @endforeach
        </div>
    </div>
</section>