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

@section('content')
    <section class="shell py-20">
        <p class="section-kicker">{{ __('Services') }}</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 pb-20">
        <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            @foreach ($services as $service)
                <article class="surface-panel group p-6 transition duration-300 hover:-translate-y-2">
                    @if ($service->image_path)
                        <div class="overflow-hidden rounded-3xl bg-slate-100 dark:bg-slate-900">
                            <img src="{{ asset('storage/'.$service->image_path) }}" alt="{{ $service->translate('title') }}" class="h-48 w-full object-cover transition duration-300 group-hover:scale-105">
                        </div>
                    @else
                        <div class="inline-flex rounded-2xl bg-slate-950 p-4 text-white transition group-hover:bg-brand-500 dark:bg-white dark:text-slate-950">
                            <i data-lucide="{{ $service->icon ?: 'sparkles' }}" class="h-6 w-6"></i>
                        </div>
                    @endif
                    <h2 class="mt-6 text-2xl font-semibold">{{ $service->translate('title') }}</h2>
                    <p class="mt-4 text-base leading-8 text-slate-600 dark:text-slate-300">{{ $service->translate('excerpt') }}</p>
                    <ul class="mt-6 space-y-3 text-sm text-slate-700 dark:text-slate-200">
                        @foreach ($service->translate('bullets') as $bullet)
                            <li class="flex items-start gap-3"><span class="mt-2 h-2 w-2 rounded-full bg-brand-500"></span><span>{{ $bullet }}</span></li>
                        @endforeach
                    </ul>
                </article>
            @endforeach
        </div>
    </section>
@endsection