@extends('layouts.app', ['title' => __('Clients').' | Nivex'])

@section('content')
    <section class="shell py-20">
        <p class="section-kicker">{{ __('Trusted Clients') }}</p>
        <h1 class="section-title">{{ $page->localized('hero.title') }}</h1>
        <p class="mt-6 section-copy">{{ $page->localized('hero.description') }}</p>
    </section>

    <section class="shell grid gap-6 pb-12 md:grid-cols-2 xl:grid-cols-4">
        <div class="surface-panel p-6 xl:col-span-2">
            <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Projects</p>
            <p class="mt-4 font-display text-6xl font-bold">{{ $page->localized('stats.projects') }}</p>
        </div>
        <div class="surface-panel p-6 xl:col-span-2">
            <p class="text-sm uppercase tracking-[0.2em] text-slate-400">Satisfaction</p>
            <p class="mt-4 font-display text-6xl font-bold">{{ $page->localized('stats.satisfaction') }}</p>
        </div>
    </section>

    <section class="shell pb-12">
        <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            @foreach ($clients as $client)
                <article class="surface-panel p-6">
                    @if ($client->logo_path)
                        <div class="flex h-20 w-20 items-center justify-center overflow-hidden rounded-2xl bg-white p-2 shadow-sm">
                            <img src="{{ asset('storage/'.$client->logo_path) }}" alt="{{ $client->name }}" class="h-full w-full object-contain">
                        </div>
                    @else
                        <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-slate-950 text-xl font-bold text-white dark:bg-white dark:text-slate-950">{{ strtoupper(substr($client->name, 0, 2)) }}</div>
                    @endif
                    <h2 class="mt-5 text-2xl font-semibold">{{ $client->name }}</h2>
                    <p class="mt-2 text-sm uppercase tracking-[0.2em] text-slate-400">{{ $client->translate('company') }}</p>
                </article>
            @endforeach
        </div>
    </section>

    <section class="shell pb-20" x-data="testimonialSlider({{ Js::from($clients->map(fn ($client) => ['name' => $client->name, 'company' => $client->translate('company'), 'quote' => $client->translate('quote'), 'role' => $client->translate('role')])->values()) }})">
        <div class="surface-panel p-8 sm:p-10">
            <div class="flex items-center justify-between gap-4">
                <div>
                    <p class="section-kicker">Testimonials</p>
                    <h2 class="text-3xl font-semibold">What clients say after launch.</h2>
                </div>
                <div class="flex gap-3">
                    <button type="button" @click="prev()" class="btn-secondary px-4 py-2">←</button>
                    <button type="button" @click="next()" class="btn-secondary px-4 py-2">→</button>
                </div>
            </div>

            <template x-for="(item, index) in items" :key="index">
                <article x-show="active === index" x-transition.opacity.duration.300ms class="mt-8">
                    <p class="max-w-4xl text-2xl leading-10 text-slate-700 dark:text-slate-200" x-text="item.quote"></p>
                    <div class="mt-6 text-sm uppercase tracking-[0.2em] text-slate-400">
                        <span x-text="item.name"></span>
                        <span>·</span>
                        <span x-text="item.role"></span>
                    </div>
                </article>
            </template>
        </div>
    </section>
@endsection