@php $social = $home['social_proof'] ?? []; @endphp
<section class="home-section home-section--muted">
    <div class="container-page">
        @if($caseStudies->isNotEmpty())
            <div class="mb-20">
                @include('pages.home._section-head', [
                    'kicker' => $social['case_studies_kicker'] ?? 'Case studies',
                    'title' => $social['case_studies_title'] ?? '',
                    'href' => route('case-studies.index'),
                    'linkText' => $social['case_studies_link_text'] ?? 'All case studies',
                    'centered' => true,
                ])

                @php $featured = $caseStudies->first(); @endphp
                <article class="home-split home-split--equal home-split--center mt-12">
                    <a href="{{ route('case-studies.show', $featured->slug) }}" class="home-figure block">
                        <img
                            src="{{ asset('images/home/team-planning.jpg') }}"
                            alt="{{ $featured->client_name }} case study"
                            width="640"
                            height="420"
                            class="home-editorial-photo"
                            loading="lazy"
                            decoding="async"
                        >
                    </a>
                    <div class="home-case-copy">
                        <p class="home-list__category">{{ $featured->client_name }}</p>
                        <h3 class="home-case-copy__title">
                            <a href="{{ route('case-studies.show', $featured->slug) }}">{{ $featured->title }}</a>
                        </h3>
                        <p class="home-lead !mt-4 !max-w-none">{{ $featured->summary }}</p>
                        @if($featured->results)
                            <p class="home-case-copy__result">{{ $featured->results }}</p>
                        @endif
                        <a href="{{ route('case-studies.show', $featured->slug) }}" class="home-text-link mt-6 inline-block">
                            Read the full story
                        </a>
                    </div>
                </article>

                @if($caseStudies->count() > 1)
                    <div class="home-card-grid mt-12">
                        @foreach($caseStudies->skip(1)->take(2) as $study)
                            <a href="{{ route('case-studies.show', $study->slug) }}" class="home-card home-card--study">
                                <p class="home-list__category">{{ $study->client_name }}</p>
                                <h3 class="home-card__title mt-2">{{ $study->title }}</h3>
                                <p class="home-card__text">{{ Str::limit($study->summary, 120) }}</p>
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif

        @php
            use App\Support\VideoEmbed;

            $posterImages = [
                asset('images/home/client-success.png'),
                asset('images/home/professional-support.png'),
                asset('images/home/team-support.png'),
                asset('images/home/team-collaboration.jpg'),
                asset('images/home/team-planning.jpg'),
                asset('images/home/business-meeting.jpg'),
                asset('images/home/modern-office.jpg'),
                asset('images/home/client-success.png'),
            ];

            $fallbackVideos = [
                [
                    'name' => 'Sarah Mitchell',
                    'role' => 'Managing Partner',
                    'company' => 'Mitchell Legal Group',
                    'quote' => 'Apex Admins transformed our operations. Our virtual assistant handles everything seamlessly.',
                    'rating' => 5,
                    'embed' => VideoEmbed::parse('https://www.youtube.com/watch?v=8jPQjQBb6xo')['embed'] ?? null,
                    'poster' => $posterImages[0],
                    'initials' => 'SM',
                ],
                [
                    'name' => 'David Chen',
                    'role' => 'Principal',
                    'company' => 'Chen & Associates',
                    'quote' => 'We scaled from two to eight staff without adding office overhead.',
                    'rating' => 5,
                    'embed' => VideoEmbed::parse('https://www.youtube.com/watch?v=VUwfm0aQpNg')['embed'] ?? null,
                    'poster' => $posterImages[1],
                    'initials' => 'DC',
                ],
                [
                    'name' => 'Emma Walsh',
                    'role' => 'Director',
                    'company' => 'Walsh Property Group',
                    'quote' => 'Our admin support runs like clockwork. Inquiries are handled within the hour.',
                    'rating' => 5,
                    'embed' => VideoEmbed::parse('https://www.youtube.com/watch?v=xmYekD6-FL8')['embed'] ?? null,
                    'poster' => $posterImages[2],
                    'initials' => 'EW',
                ],
                [
                    'name' => 'James O\'Brien',
                    'role' => 'Founder',
                    'company' => 'O\'Brien Accounting',
                    'quote' => 'We cut admin costs by 55% while improving response times for clients.',
                    'rating' => 5,
                    'embed' => VideoEmbed::parse('https://www.youtube.com/watch?v=8jPQjQBb6xo')['embed'] ?? null,
                    'poster' => $posterImages[3],
                    'initials' => 'JO',
                ],
                [
                    'name' => 'Lisa Nguyen',
                    'role' => 'Operations Manager',
                    'company' => 'Nguyen Health Clinics',
                    'quote' => 'Patient scheduling and billing are finally under control — our team can breathe again.',
                    'rating' => 5,
                    'embed' => VideoEmbed::parse('https://www.youtube.com/watch?v=VUwfm0aQpNg')['embed'] ?? null,
                    'poster' => $posterImages[4],
                    'initials' => 'LN',
                ],
                [
                    'name' => 'Michael Torres',
                    'role' => 'CEO',
                    'company' => 'Torres Digital',
                    'quote' => 'Hiring through Apex was faster than any recruiter we have used before.',
                    'rating' => 5,
                    'embed' => VideoEmbed::parse('https://www.youtube.com/watch?v=xmYekD6-FL8')['embed'] ?? null,
                    'poster' => $posterImages[5],
                    'initials' => 'MT',
                ],
                [
                    'name' => 'Rachel Foster',
                    'role' => 'Director',
                    'company' => 'Foster E-commerce',
                    'quote' => 'Our VA handles customer support across three time zones flawlessly.',
                    'rating' => 5,
                    'embed' => VideoEmbed::parse('https://www.youtube.com/watch?v=8jPQjQBb6xo')['embed'] ?? null,
                    'poster' => $posterImages[6],
                    'initials' => 'RF',
                ],
                [
                    'name' => 'Tom Bradley',
                    'role' => 'Managing Director',
                    'company' => 'Bradley Construction',
                    'quote' => 'Project coordination used to be a bottleneck — not anymore.',
                    'rating' => 5,
                    'embed' => VideoEmbed::parse('https://www.youtube.com/watch?v=VUwfm0aQpNg')['embed'] ?? null,
                    'poster' => $posterImages[7],
                    'initials' => 'TB',
                ],
            ];

            $cmsVideos = $testimonials->isNotEmpty()
                ? $testimonials->take(8)->values()->map(function ($t, $i) use ($posterImages) {
                    $embed = VideoEmbed::parse($t->video_url);
                    $poster = $posterImages[$i % count($posterImages)];

                    if ($embed && ! empty($embed['thumbnail'])) {
                        $poster = $embed['thumbnail'];
                    }

                    return [
                        'name' => $t->name,
                        'role' => $t->role ?? '',
                        'company' => $t->company ?? '',
                        'quote' => \Illuminate\Support\Str::limit($t->content, 200),
                        'rating' => $t->rating ?? 5,
                        'embed' => $embed['embed'] ?? null,
                        'poster' => $poster,
                        'initials' => collect(explode(' ', $t->name))->map(fn ($w) => strtoupper(substr($w, 0, 1)))->take(2)->join(''),
                    ];
                })->all()
                : [];

            $videoTestimonials = $cmsVideos;

            if (count($videoTestimonials) < 8) {
                $videoTestimonials = array_merge(
                    $videoTestimonials,
                    array_slice($fallbackVideos, count($videoTestimonials), 8 - count($videoTestimonials))
                );
            }

            $responsiveImages = app(\App\Support\ResponsiveImages::class);
            $videoTestimonials = array_map(
                fn (array $video) => $video + ['posterSrcset' => $responsiveImages->srcsetFor((string) ($video['poster'] ?? ''))],
                $videoTestimonials,
            );
        @endphp

        @include('pages.home._section-head', [
            'kicker' => $social['testimonials_kicker'] ?? 'Video testimonials',
            'title' => $social['testimonials_title'] ?? '',
            'lead' => $social['testimonials_lead'] ?? '',
            'centered' => true,
        ])

        <div class="home-video-wall mt-14" x-data="videoTestimonials(@js($videoTestimonials))">
            <ul class="home-video-grid" aria-label="Client video testimonials">
                <template x-for="(item, index) in items" :key="index">
                    <li class="home-video-grid__card">
                        <div class="home-video-grid__media">
                            <template x-if="playingIndex === index && item.embed">
                                <iframe
                                    class="home-video-grid__iframe"
                                    :src="item.embed + (item.embed.includes('?') ? '&' : '?') + 'autoplay=1'"
                                    :title="'Video testimonial from ' + item.name"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen
                                ></iframe>
                            </template>
                            <template x-if="playingIndex !== index || ! item.embed">
                                <button
                                    type="button"
                                    class="home-video-grid__poster"
                                    @click="play(index)"
                                    :disabled="! item.embed"
                                    :aria-label="'Play testimonial from ' + item.name"
                                >
                                    <img
                                        :srcset="item.posterSrcset"
                                        :src="item.poster"
                                        sizes="(max-width: 767px) 50vw, 320px"
                                        :alt="item.name + ' video testimonial'"
                                        width="480"
                                        height="270"
                                        loading="lazy"
                                        decoding="async"
                                    >
                                    <span class="home-video-grid__shade" aria-hidden="true"></span>
                                    <span class="home-video-grid__play" aria-hidden="true">
                                        <svg viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M8 5v14l11-7z"/>
                                        </svg>
                                    </span>
                                </button>
                            </template>
                        </div>
                        <div class="home-video-grid__info">
                            <cite class="home-video-grid__name not-italic" x-text="item.name"></cite>
                            <p class="home-video-grid__role" x-text="[item.role, item.company].filter(Boolean).join(' · ')"></p>
                        </div>
                    </li>
                </template>
            </ul>

            <div class="home-video-wall__trust">
                @foreach(($social['trust_metrics'] ?? []) as $i => $metric)
                    @if($i > 0)
                        <div class="home-video-wall__trust-divider" aria-hidden="true"></div>
                    @endif
                    <div class="home-video-wall__trust-item">
                        <span class="home-video-wall__trust-value">{{ $metric['value'] ?? '' }}</span>
                        <span class="home-video-wall__trust-label">{{ $metric['label'] ?? '' }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>