@php
    $testimonials = [
        [
            'company' => 'Ubuntu Life Technologies',
            'category' => 'Retail',
            'channel' => 'email',
            'message_subject' => 'Re: Ubuntu Life inventory and reporting with Uzapoint',
            'headline' => 'Ethical Handcraft Brand Ubuntu Life Empowers Artisans with Uzapoint',
            'summary' => 'Ubuntu handcrafted headbands, bags, and accessories, brought structure to multi-location inventory and sales with Uzapoint.',
            'quote' => 'My experience with Uzapoint so far has been great! Everything is easy, from tracking sales and managing inventory to accessing reports and making informed business decisions.',
            'name' => 'Bettie Porter',
            'role' => 'Sales Agent',
            'image' => 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=900&q=80&auto=format&fit=crop',
            'image_alt' => 'Smiling café owner in an apron at her shop counter',
            'youtube_id' => 'NePHZ2LX8MU',
        ],
        [
            'company' => 'Mutua Grocers',
            'category' => 'Retail',
            'channel' => 'whatsapp',
            'message_time' => '7:18 AM',
            'headline' => 'Nairobi Grocery Owner Runs Her Whole Shop from Her Phone',
            'summary' => 'Grace moved from notebook records to live sales visibility, smarter ordering, and clearer daily performance across her store.',
            'quote' => 'Before Uzapoint I was doing everything in a book. Now I can see my whole business on my phone in the morning before I even open the shop. I know what to order and what is selling.',
            'name' => 'Grace Mutua',
            'role' => 'Store Owner',
            'image' => 'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=900&q=80&auto=format&fit=crop&crop=face',
            'image_alt' => 'Grace Mutua smiling in her grocery store',
            'youtube_id' => 'NePHZ2LX8MU',
        ],
        [
            'company' => 'Kariuki Kitchen',
            'category' => 'Hospitality',
            'channel' => 'sms',
            'message_time' => '2:41 PM',
            'message_day' => 'Tuesday',
            'headline' => 'Restaurant Owner Turns Slow Days into Revenue with Uzapoint Insights',
            'summary' => 'James used sales trends and AI recommendations to launch a midweek promotion that lifted revenue in the first week.',
            'quote' => 'The AI told me that my Tuesday lunch traffic drops 40% and suggested I run a midweek promotion. First week I ran it, revenue was up 18%. That alone paid for a year\'s subscription.',
            'name' => 'James Kariuki',
            'role' => 'Restaurant Owner',
            'image' => 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=900&q=80&auto=format&fit=crop&crop=face',
            'image_alt' => 'James Kariuki in his restaurant',
            'youtube_id' => 'NePHZ2LX8MU',
        ],
    ];
@endphp

<section class="testimonials-section" id="testimonials" aria-labelledby="testimonials-title">
    <div class="testimonials-shell">
        <header class="testimonials-header reveal">
            <div class="testimonials-header-left">
                <span class="testimonials-badge">Testimonials</span>
                <h2 class="testimonials-title" id="testimonials-title">Real businesses, real stories, real transformation</h2>
            </div>
            <div class="testimonials-header-right reveal" style="--reveal-delay: 80ms">
                <p class="testimonials-lead">From single-store entrepreneurs to growing multi-branch businesses, discover some of the SMEs across Africa who have trusted Uzapoint to simplify operations, improve visibility, and unlock growth opportunities.</p>
                <a href="{{ route('impact.program', 'testimonials') }}" class="offerings-cta">See more stories</a>
            </div>
        </header>

        <div class="testimonials-showcase reveal" style="--reveal-delay: 120ms" data-testimonials-slider>
            <div class="testimonials-slider">
                <div class="testimonials-slider-stage" aria-live="polite">
                    @foreach ($testimonials as $index => $testimonial)
                        <article
                            class="testimonials-slide{{ $index === 0 ? ' is-active' : '' }}"
                            data-testimonials-slide="{{ $index }}"
                            @if ($index !== 0) hidden @endif
                        >
                            <div class="testimonials-card">
                                <div class="testimonials-card-top">
                                    <span class="testimonials-company">{{ $testimonial['company'] }}</span>
                                    <span class="testimonials-category">{{ $testimonial['category'] }}</span>
                                </div>
                                <h3 class="testimonials-headline">{{ $testimonial['headline'] }}</h3>
                                <p class="testimonials-summary">{{ $testimonial['summary'] }}</p>
                                @include('partials.home.testimonial-message', ['testimonial' => $testimonial])
                            </div>
                        </article>
                    @endforeach
                </div>

                <div class="testimonials-controls">
                    <button type="button" class="testimonials-nav-btn" data-testimonials-prev aria-label="Previous story">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <polyline points="15 18 9 12 15 6"></polyline>
                        </svg>
                    </button>
                    <div class="testimonials-dots" role="tablist" aria-label="Testimonial stories">
                        @foreach ($testimonials as $index => $testimonial)
                            <button
                                type="button"
                                class="testimonials-dot{{ $index === 0 ? ' is-active' : '' }}"
                                data-testimonials-dot="{{ $index }}"
                                role="tab"
                                aria-selected="{{ $index === 0 ? 'true' : 'false' }}"
                                aria-label="Story {{ $index + 1 }}: {{ $testimonial['company'] }}"
                            ></button>
                        @endforeach
                    </div>
                    <button type="button" class="testimonials-nav-btn" data-testimonials-next aria-label="Next story">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <polyline points="9 18 15 12 9 6"></polyline>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="testimonials-media-stage">
                @foreach ($testimonials as $index => $testimonial)
                    <figure
                        class="testimonials-media{{ $index === 0 ? ' is-active' : '' }}"
                        data-testimonials-media="{{ $index }}"
                        @if ($index !== 0) hidden @endif
                    >
                        <img
                            src="{{ $testimonial['image'] }}"
                            alt="{{ $testimonial['image_alt'] }}"
                            width="720"
                            height="900"
                            loading="{{ $index === 0 ? 'eager' : 'lazy' }}"
                            decoding="async"
                        >
                        <button
                            type="button"
                            class="testimonials-play"
                            data-testimonials-video="{{ $testimonial['youtube_id'] }}"
                            aria-label="Play {{ $testimonial['name'] }} story video"
                        >
                            <x-icon name="play" />
                        </button>
                    </figure>
                @endforeach
            </div>
        </div>
    </div>

    <div class="testimonials-video-modal" data-testimonials-video-modal hidden>
        <button type="button" class="testimonials-video-backdrop" data-testimonials-video-close aria-label="Close video"></button>
        <div
            class="testimonials-video-dialog"
            role="dialog"
            aria-modal="true"
            aria-label="Testimonial video player"
        >
            <button type="button" class="testimonials-video-close" data-testimonials-video-close aria-label="Close video">
                <x-icon name="close" />
            </button>
            <div class="testimonials-video-frame-wrap">
                <iframe
                    data-testimonials-video-frame
                    title="Uzapoint customer story video"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin"
                    allowfullscreen
                ></iframe>
            </div>
        </div>
    </div>
</section>