@php
    $achievements = [
        [
            'title' => 'African Business Heroes',
            'subtitle' => '1st Runner-Up among 31,000+ applicants',
            'year' => '2025',
        ],
        [
            'title' => 'Google Black Founders Fund Africa',
            'subtitle' => 'One of 25 selected out of 4,000+',
            'year' => '2023',
        ],
        [
            'title' => 'Retail Business Automation Solution of the Year',
            'subtitle' => 'Digital Tech 100 Awards',
            'year' => '2023',
        ],
        [
            'title' => 'Silver Winner – Best E-commerce Software Solution',
            'subtitle' => 'Kenya Ecommerce Awards',
            'year' => '2023',
        ],
        [
            'title' => 'Retail Business Automation Solution of the Year',
            'subtitle' => 'Digital Tech 100 Awards',
            'year' => '2022',
        ],
        [
            'title' => 'Best SaaS Solution (Gold)',
            'subtitle' => 'Kenya E-commerce Awards',
            'year' => '2022',
        ],
        [
            'title' => 'Best E-commerce Solution (Silver)',
            'subtitle' => 'Kenya E-commerce Awards',
            'year' => '2022',
        ],
        [
            'title' => 'Best E-commerce Solution (Silver)',
            'subtitle' => 'Kenya E-commerce Awards',
            'year' => '2021',
        ],
        [
            'title' => 'Google for Startups Accelerator Africa',
            'subtitle' => 'One of 20 selected out of 3,000+',
            'year' => '2020',
        ],
        [
            'title' => '2nd Runner-Up',
            'subtitle' => 'Total Startupper Challenge',
            'year' => '2019',
        ],
    ];

    $timelineYears = collect($achievements)
        ->sortByDesc(fn (array $item) => (int) $item['year'])
        ->groupBy('year');

    $featuredMedia = [
        [
            'image' => 'abh-2025-winners.jpg',
            'alt' => 'Abraham Mbuthia on stage at the 7th Africa Business Heroes Awards Ceremony in Kigali',
            'label' => 'ABH 2025 Finale',
        ],
        [
            'image' => 'abh-head.png',
            'alt' => 'Abraham Mbuthia, Co-founder and CEO of Uzapoint',
            'label' => 'Co-founder & CEO',
            'portrait' => true,
        ],
        [
            'image' => 'kenya-ecommerce-2023.jpg',
            'alt' => 'Uzapoint team at the Kenya E-Commerce Awards 2023',
            'label' => 'Kenya E-Commerce Awards',
        ],
    ];
@endphp

<section class="achievements-section" id="achievements" aria-labelledby="achievements-title">
    <div class="achievements-shell">
        <header class="achievements-header reveal">
            <span class="achievements-badge">Industry Recognition</span>
            <h2 class="achievements-title" id="achievements-title">Our Award-Winning Excellence</h2>
            <p class="achievements-lead">Each accolade underscores our commitment to transforming African commerce.</p>
        </header>

        <div class="achievements-compact reveal" style="--reveal-delay: 80ms">
            <aside class="achievements-featured">
                <div class="achievements-featured-bg" aria-hidden="true">
                    <span class="achievements-featured-orb achievements-featured-orb--one"></span>
                    <span class="achievements-featured-orb achievements-featured-orb--two"></span>
                    <span class="achievements-featured-grid"></span>
                </div>

                <div class="achievements-featured-top">
                    <div class="achievements-emblem" aria-hidden="true">
                        <img
                            class="achievements-emblem-laurel"
                            src="{{ asset('img/award-symbol.png') }}"
                            alt=""
                            width="120"
                            height="120"
                            loading="lazy"
                            decoding="async"
                        >
                        <img
                            class="achievements-emblem-star"
                            src="{{ asset('img/star.webp') }}"
                            alt=""
                            width="48"
                            height="48"
                            loading="lazy"
                            decoding="async"
                        >
                    </div>

                    <div class="achievements-featured-stat-wrap">
                        <p class="achievements-featured-stat">9+</p>
                        <p class="achievements-featured-stat-label">Awards &amp; Accelerators</p>
                    </div>
                </div>

                <div class="achievements-featured-media" data-achievements-media>
                    <div class="achievements-featured-media-glow" aria-hidden="true"></div>

                    <div class="achievements-featured-media-stack">
                        @foreach ($featuredMedia as $index => $slide)
                            <figure
                                @class([
                                    'achievements-featured-slide',
                                    'achievements-featured-slide--portrait' => ! empty($slide['portrait']),
                                    'is-active' => $index === 0,
                                ])
                                data-achievements-slide
                                @if ($index !== 0) hidden @endif
                            >
                                <img
                                    src="{{ asset('img/awards/' . $slide['image']) }}"
                                    alt="{{ $slide['alt'] }}"
                                    loading="{{ $index === 0 ? 'eager' : 'lazy' }}"
                                    decoding="async"
                                >
                                <figcaption class="achievements-featured-slide-label">{{ $slide['label'] }}</figcaption>
                            </figure>
                        @endforeach
                    </div>

                    <div class="achievements-featured-media-dots" role="tablist" aria-label="Award highlights">
                        @foreach ($featuredMedia as $index => $slide)
                            <button
                                type="button"
                                class="achievements-featured-dot{{ $index === 0 ? ' is-active' : '' }}"
                                data-achievements-dot
                                role="tab"
                                aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
                                aria-label="Show {{ $slide['label'] }}"
                            ></button>
                        @endforeach
                    </div>
                </div>

                <blockquote class="achievements-featured-quote">
                    <p>
                        2025 African Business Heroes 1st Runner-Up.
                        <span class="achievements-featured-quote-highlight">$250,000</span>
                        to scale SME digitization across Africa.
                    </p>
                    <footer class="achievements-featured-quote-footer">
                        <img
                            class="achievements-featured-quote-avatar"
                            src="{{ asset('img/awards/abh-head.png') }}"
                            alt=""
                            width="40"
                            height="40"
                            loading="lazy"
                            decoding="async"
                            aria-hidden="true"
                        >
                        <cite class="achievements-featured-quote-cite">
                            <span class="achievements-founder-name">Abraham Mbuthia</span>
                            <span class="achievements-founder-role">Co-founder &amp; CEO</span>
                        </cite>
                    </footer>
                </blockquote>
            </aside>

            <div class="achievements-timeline" aria-label="Awards timeline by year">
                @foreach ($timelineYears as $year => $items)
                    <div class="achievements-timeline-year">
                        <div class="achievements-timeline-year-label">{{ $year }}</div>
                        <div class="achievements-timeline-track">
                            @foreach ($items as $item)
                                <article class="achievements-timeline-entry">
                                    <img
                                        class="achievements-timeline-star"
                                        src="{{ asset('img/star.webp') }}"
                                        alt=""
                                        width="18"
                                        height="18"
                                        loading="lazy"
                                        decoding="async"
                                        aria-hidden="true"
                                    >
                                    <div class="achievements-timeline-copy">
                                        <h3 class="achievements-timeline-title">{{ $item['title'] }}</h3>
                                        <p class="achievements-timeline-subtitle">{{ $item['subtitle'] }}</p>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="achievements-footer reveal" style="--reveal-delay: 140ms">
            <a href="#achievements" class="offerings-cta">See more achievements</a>
        </div>
    </div>
</section>