@extends('layouts.app')

@php
    $locales = [
        'ro' => [
            'label' => '<span class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 18" class="h-4 w-6 rounded-sm overflow-hidden"><rect width="8" height="18" fill="#1e40af"/><rect x="8" width="8" height="18" fill="#facc15"/><rect x="16" width="8" height="18" fill="#dc2626"/></svg><span>RO</span></span>',
        ],
        'en' => [
            'label' => '<span class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 18" class="h-4 w-6 rounded-sm overflow-hidden"><rect width="24" height="18" fill="#1e3a8a"/><path d="M0 0l10 7H7L0 2.5zM24 0l-10 7h3l7-4.5zM0 18l10-7H7L0 15.5zM24 18l-10-7h3l7 4.5z" fill="#ffffff"/><path d="M0 0l9 6H7L0 1.5zM24 0l-9 6h2l7-4zM0 18l9-6H7l-7 4zM24 18l-9-6h2l7 4z" fill="#dc2626"/><path d="M9 0h6v18H9z" fill="#ffffff"/><path d="M0 6h24v6H0z" fill="#ffffff"/><path d="M10 0h4v18h-4z" fill="#dc2626"/><path d="M0 7h24v4H0z" fill="#dc2626"/></svg><span>EN</span></span>',
        ],
        'ru' => [
            'label' => '<span class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 18" class="h-4 w-6 rounded-sm overflow-hidden"><rect width="24" height="6" fill="#ffffff"/><rect y="6" width="24" height="6" fill="#2563eb"/><rect y="12" width="24" height="6" fill="#dc2626"/></svg><span>RU</span></span>',
        ],
        'it' => [
            'label' => '<span class="flex items-center gap-2"><svg aria-hidden="true" viewBox="0 0 24 18" class="h-4 w-6 rounded-sm overflow-hidden"><rect width="8" height="18" fill="#16a34a"/><rect x="8" width="8" height="18" fill="#ffffff"/><rect x="16" width="8" height="18" fill="#dc2626"/></svg><span>IT</span></span>',
        ],
    ];
    $currentLocale = app()->getLocale();
    $segments = request()->segments();
    if (in_array($segments[0] ?? '', array_keys($locales), true)) {
        array_shift($segments);
    }
    $path = implode('/', $segments);
    $canonicalUrl = url($currentLocale . ($path ? '/' . $path : ''));
    $schema = [
        '@context' => 'https://schema.org',
        '@type' => 'LegalService',
        'name' => config('app.name', 'Radiere SRL'),
        'url' => $canonicalUrl,
        'areaServed' => 'RO',
        'serviceType' => __('home.meta.service_type'),
        'description' => __('home.meta.description'),
    ];
@endphp

@section('title', __('home.meta.title'))
@section('meta_description', __('home.meta.description'))
@section('canonical', $canonicalUrl)
@section('schema')
@json($schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT)
@endsection

@section('content')
    <div class="sticky top-0 z-50">
        <div class="bg-emerald-50 text-slate-700">
            <div class="mx-auto flex w-full max-w-6xl items-center justify-between gap-3 px-4 py-1 text-[11px] font-semibold sm:px-6 sm:py-1.5 sm:text-xs">
                <a href="mailto:contact@radiere-srl.md" class="inline-flex items-center gap-2 rounded-full px-3 py-1 transition hover:text-slate-900">
                    <svg aria-hidden="true" viewBox="0 0 24 24" class="h-4 w-4 text-emerald-600">
                        <path fill="currentColor" d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 4.2V18h16V8.2l-7.4 5.1a1 1 0 0 1-1.2 0zM20 6H4l8 5.5z"/>
                    </svg>
                    <span>contact@radiere-srl.md</span>
                </a>
                <a href="tel:+37369750249" class="inline-flex items-center gap-2 rounded-full px-3 py-1 transition hover:text-slate-900" data-copy-value="+37369750249">
                    <svg aria-hidden="true" viewBox="0 0 24 24" class="h-4 w-4 text-emerald-600">
                        <path fill="currentColor" d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 .99-.24a11.36 11.36 0 0 0 3.58.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1a11.36 11.36 0 0 0 .57 3.58a1 1 0 0 1-.24.99z"/>
                    </svg>
                    <span>+37369750249</span>
                </a>
            </div>
        </div>
        <header class="relative border-b border-slate-200 bg-white/80 backdrop-blur">
            <div class="mx-auto flex w-full max-w-6xl items-center justify-between gap-3 px-4 py-2 sm:flex-wrap sm:px-6 sm:py-3">
            <a href="{{ url($currentLocale) }}" class="flex items-center gap-3">
                <span class="flex h-14 w-14 [&>svg]:h-full [&>svg]:w-full" aria-label="{{ config('app.name', 'Radiere SRL') }} logo" role="img">
                    {!! file_get_contents(public_path('uploads/radiere-logo.svg')) !!}
                </span>
                <span class="text-[17px] font-semibold tracking-tight text-slate-900 whitespace-nowrap sm:text-lg">
                    {{ config('app.name', 'Radiere SRL') }}
                </span>
            </a>
            <div class="flex items-center gap-2 sm:hidden">
                <div class="relative" data-language-select>
                    <span class="sr-only" id="language-label-mobile">{{ __('home.language.label') }}</span>
                    <button type="button" class="inline-flex h-9 w-[5.5rem] items-center justify-center gap-2 rounded-full border border-slate-300 bg-emerald-50 px-3 text-xs font-semibold text-slate-700 transition hover:border-slate-400 hover:bg-emerald-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white sm:h-11 sm:w-[7rem] sm:text-sm" data-language-trigger aria-haspopup="listbox" aria-expanded="false" aria-labelledby="language-label-mobile">
                        <span data-language-label>{!! $locales[$currentLocale]['label'] ?? strtoupper($currentLocale) !!}</span>
                    </button>
                    <ul class="absolute left-0 mt-2 hidden w-full rounded-2xl border border-slate-200 bg-white p-2 text-sm shadow-lg sm:min-w-[7rem] dropdown-panel" role="listbox" data-language-menu>
                        @foreach ($locales as $locale => $label)
                            @if ($locale !== $currentLocale)
                                <li>
                                    <a href="{{ url($locale . ($path ? '/' . $path : '')) }}" class="flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-xl px-3 py-2 text-sm text-slate-700 hover:bg-emerald-50" data-language-option>
                                        {!! $label['label'] !!}
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
                <button type="button" class="inline-flex h-9 w-9 items-center justify-center rounded-full border border-slate-300 px-3 text-xs font-semibold text-slate-700 transition hover:border-slate-400 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white sm:h-11 sm:w-[6rem] sm:text-sm" data-menu-trigger aria-expanded="false" aria-controls="site-menu" aria-label="Meniu">
                    <span class="sr-only">Meniu</span>
                    <span class="flex flex-col gap-1">
                        <span class="h-0.5 w-5 rounded bg-slate-700"></span>
                        <span class="h-0.5 w-5 rounded bg-slate-700"></span>
                        <span class="h-0.5 w-5 rounded bg-slate-700"></span>
                    </span>
                </button>
            </div>
            <div class="hidden w-full items-center justify-end gap-2 sm:ml-auto sm:flex sm:w-auto">
                <div class="relative sm:w-auto" data-language-select>
                    <span class="sr-only" id="language-label">{{ __('home.language.label') }}</span>
                    <button type="button" id="site-language" class="inline-flex h-10 w-[5.5rem] items-center justify-center gap-2 rounded-full border border-slate-300 bg-emerald-50 px-3 text-xs font-semibold text-slate-700 transition hover:border-slate-400 hover:bg-emerald-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white sm:h-11 sm:text-sm" data-language-trigger aria-haspopup="listbox" aria-expanded="false" aria-labelledby="language-label">
                        <span data-language-label>{!! $locales[$currentLocale]['label'] ?? strtoupper($currentLocale) !!}</span>
                    </button>
                    <ul class="absolute left-0 mt-2 hidden w-full rounded-2xl border border-slate-200 bg-white p-2 text-sm shadow-lg dropdown-panel" role="listbox" data-language-menu>
                        @foreach ($locales as $locale => $label)
                            @if ($locale !== $currentLocale)
                                <li>
                                    <a href="{{ url($locale . ($path ? '/' . $path : '')) }}" class="flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-xl px-3 py-2 text-sm text-slate-700 hover:bg-emerald-50" data-language-option>
                                        {!! $label['label'] !!}
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
                <button type="button" class="inline-flex h-10 w-[5.5rem] aspect-square items-center justify-center rounded-full border border-slate-300 px-3 text-xs font-semibold text-slate-700 transition hover:border-slate-400 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white sm:h-11 sm:w-fit sm:text-sm" data-menu-trigger aria-expanded="false" aria-controls="site-menu" aria-label="Meniu">
                    <span class="sr-only">Meniu</span>
                    <span class="flex flex-col gap-1">
                        <span class="h-0.5 w-5 rounded bg-slate-700"></span>
                        <span class="h-0.5 w-5 rounded bg-slate-700"></span>
                        <span class="h-0.5 w-5 rounded bg-slate-700"></span>
                    </span>
                </button>
            </div>
        </div>
        <div class="absolute left-0 right-0 top-full hidden border-t border-slate-200 bg-white/95 backdrop-blur nav-panel" id="site-menu" data-site-menu>
            <div class="mx-auto lg:w-full max-w-[calc(100vw-2rem)] w-fit lg:max-w-6xl space-y-2 px-4 pb-6 pt-4 sm:space-y-0">
                <nav class="flex flex-col items-center gap-2 sm:flex-row sm:flex-wrap sm:justify-center sm:gap-3">
                    <x-button href="#servicii" variant="ghost" class="w-full w-full sm:max-w-[16rem] justify-center text-center sm:w-auto sm:min-w-[9rem]" data-menu-link>{{ __('home.sections.service.title') }}</x-button>
                    <x-button href="#pasii" variant="ghost" class="w-full w-full sm:max-w-[16rem] justify-center text-center sm:w-auto sm:min-w-[9rem]" data-menu-link>{{ __('home.sections.steps.title') }}</x-button>
                    <x-button href="#avantaje" variant="ghost" class="w-full w-full sm:max-w-[16rem] justify-center text-center sm:w-auto sm:min-w-[9rem]" data-menu-link>{{ __('home.sections.benefits.title') }}</x-button>
                    <x-button href="#faq" variant="ghost" class="w-full w-full sm:max-w-[16rem] justify-center text-center sm:w-auto sm:min-w-[9rem]" data-menu-link>{{ __('home.nav.faq') }}</x-button>
                    <x-button href="#contact" variant="ghost" class="w-full w-full sm:max-w-[16rem] justify-center text-center sm:w-auto sm:min-w-[9rem]" data-menu-link>{{ __('home.sections.contact.title') }}</x-button>
                </nav>
            </div>
        </div>
        </header>
    </div>

    <main>
        <x-section class="bg-gradient-to-br from-emerald-50 via-rose-50 to-slate-50">
            <div class="grid items-center gap-12 lg:grid-cols-2">
                <div>
                    <span class="inline-flex rounded-full bg-emerald-100 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-emerald-700 ring-1 ring-[#991b1b]/20 reveal" data-hero-reveal style="--reveal-delay: 0ms">
                        {{ __('home.hero.badge') }}
                    </span>
                    <h1 class="mt-6 text-4xl font-semibold tracking-tight text-slate-900 sm:text-5xl reveal" data-hero-reveal style="--reveal-delay: 80ms">
                        {{ __('home.hero.title') }}
                    </h1>
                    <p class="mt-5 text-base text-slate-600 sm:text-lg reveal" data-hero-reveal style="--reveal-delay: 160ms">
                        {{ __('home.hero.description') }}
                    </p>
                    <div class="mt-8 flex flex-wrap items-center gap-4 reveal" data-hero-reveal style="--reveal-delay: 240ms">
                        <x-cta-button href="#solicitare">{{ __('home.hero.cta_primary') }}</x-cta-button>
                        <x-button href="#pasii" variant="ghost">{{ __('home.hero.cta_secondary') }}</x-button>
                    </div>
                    <div class="mt-8 flex flex-col items-start gap-3 text-base font-medium text-slate-600 sm:flex-row sm:flex-wrap sm:items-start sm:gap-6 sm:text-sm reveal" data-hero-reveal style="--reveal-delay: 320ms">
                        <span class="flex items-start gap-2 sm:basis-[48%] sm:items-start">
                            <span class="mt-1.5 rounded-full bg-emerald-500 h-2 w-2"></span>
                            <span class="break-words">{{ __('home.hero.points.status') }}</span>
                        </span>
                        <span class="flex items-start gap-2 sm:basis-[48%] sm:items-start">
                            <span class="mt-1.5 rounded-full bg-emerald-500 h-2 w-2"></span>
                            <span class="break-words">{{ __('home.hero.points.file') }}</span>
                        </span>
                    </div>
                </div>
                <div class="relative">
                    <div class="absolute -inset-6 rounded-3xl bg-emerald-100 opacity-60 blur-2xl"></div>
                    <div class="relative rounded-3xl border border-emerald-100 border-t-2 border-t-[#991b1b] bg-white p-8 shadow-xl reveal" data-hero-reveal style="--reveal-delay: 200ms">
                        <h3 class="text-lg font-semibold text-slate-900">{{ __('home.hero.card.title') }}</h3>
                        <p class="mt-2 text-sm text-slate-600">
                            {{ __('home.hero.card.subtitle') }}
                        </p>
                        <div class="mt-6 space-y-4">
                            <div class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3">
                                <span class="text-sm font-medium text-slate-700">{{ __('home.hero.card.items.file') }}</span>
                                <span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">{{ __('home.hero.card.status.done') }}</span>
                            </div>
                            <div class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3">
                                <span class="text-sm font-medium text-slate-700">{{ __('home.hero.card.items.publish') }}</span>
                                <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">{{ __('home.hero.card.status.progress') }}</span>
                            </div>
                            <div class="flex items-center justify-between rounded-2xl border border-slate-200 px-4 py-3">
                                <span class="text-sm font-medium text-slate-700">{{ __('home.hero.card.items.certificate') }}</span>
                                <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">{{ __('home.hero.card.status.next') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </x-section>

        <x-section id="servicii" class="scroll-mt-28" title="{{ __('home.sections.service.title') }}" subtitle="{{ __('home.sections.service.subtitle') }}">
            <div class="grid gap-8 lg:grid-cols-3">
                <div class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-6 shadow-sm reveal" data-reveal style="--reveal-delay: 0ms">
                    <h3 class="text-lg font-semibold text-slate-900">{{ __('home.sections.service.items.discovery.title') }}</h3>
                    <p class="mt-3 text-sm text-slate-600">
                        {{ __('home.sections.service.items.discovery.body') }}
                    </p>
                </div>
                <div class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-6 shadow-sm reveal" data-reveal style="--reveal-delay: 120ms">
                    <h3 class="text-lg font-semibold text-slate-900">{{ __('home.sections.service.items.file.title') }}</h3>
                    <p class="mt-3 text-sm text-slate-600">
                        {{ __('home.sections.service.items.file.body') }}
                    </p>
                </div>
                <div class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-6 shadow-sm reveal" data-reveal style="--reveal-delay: 240ms">
                    <h3 class="text-lg font-semibold text-slate-900">{{ __('home.sections.service.items.follow.title') }}</h3>
                    <p class="mt-3 text-sm text-slate-600">
                        {{ __('home.sections.service.items.follow.body') }}
                    </p>
                </div>
            </div>
        </x-section>

        <x-section id="pasii" class="scroll-mt-28" title="{{ __('home.sections.steps.title') }}" subtitle="{{ __('home.sections.steps.subtitle') }}">
            <ol class="grid gap-6 lg:grid-cols-4">
                <li class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-5 reveal" data-reveal style="--reveal-delay: 0ms">
                    <p class="text-xs font-semibold uppercase tracking-wide text-emerald-600">{{ __('home.sections.steps.step', ['number' => 1]) }}</p>
                    <h3 class="mt-3 text-base font-semibold text-slate-900">{{ __('home.sections.steps.items.chat.title') }}</h3>
                    <p class="mt-2 text-sm text-slate-600">{{ __('home.sections.steps.items.chat.body') }}</p>
                </li>
                <li class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-5 reveal" data-reveal style="--reveal-delay: 120ms">
                    <p class="text-xs font-semibold uppercase tracking-wide text-emerald-600">{{ __('home.sections.steps.step', ['number' => 2]) }}</p>
                    <h3 class="mt-3 text-base font-semibold text-slate-900">{{ __('home.sections.steps.items.prepare.title') }}</h3>
                    <p class="mt-2 text-sm text-slate-600">{{ __('home.sections.steps.items.prepare.body') }}</p>
                </li>
                <li class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-5 reveal" data-reveal style="--reveal-delay: 240ms">
                    <p class="text-xs font-semibold uppercase tracking-wide text-emerald-600">{{ __('home.sections.steps.step', ['number' => 3]) }}</p>
                    <h3 class="mt-3 text-base font-semibold text-slate-900">{{ __('home.sections.steps.items.submit.title') }}</h3>
                    <p class="mt-2 text-sm text-slate-600">{{ __('home.sections.steps.items.submit.body') }}</p>
                </li>
                <li class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-5 reveal" data-reveal style="--reveal-delay: 360ms">
                    <p class="text-xs font-semibold uppercase tracking-wide text-emerald-600">{{ __('home.sections.steps.step', ['number' => 4]) }}</p>
                    <h3 class="mt-3 text-base font-semibold text-slate-900">{{ __('home.sections.steps.items.finish.title') }}</h3>
                    <p class="mt-2 text-sm text-slate-600">{{ __('home.sections.steps.items.finish.body') }}</p>
                </li>
            </ol>
        </x-section>

        <x-section id="avantaje" class="scroll-mt-28" title="{{ __('home.sections.benefits.title') }}" subtitle="{{ __('home.sections.benefits.subtitle') }}">
            <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                <div class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-6 shadow-sm reveal" data-reveal style="--reveal-delay: 0ms">
                    <h3 class="text-base font-semibold text-slate-900">{{ __('home.sections.benefits.items.pricing.title') }}</h3>
                    <p class="mt-3 text-sm text-slate-600">{{ __('home.sections.benefits.items.pricing.body') }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-6 shadow-sm reveal" data-reveal style="--reveal-delay: 100ms">
                    <h3 class="text-base font-semibold text-slate-900">{{ __('home.sections.benefits.items.time.title') }}</h3>
                    <p class="mt-3 text-sm text-slate-600">{{ __('home.sections.benefits.items.time.body') }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-6 shadow-sm reveal" data-reveal style="--reveal-delay: 200ms">
                    <h3 class="text-base font-semibold text-slate-900">{{ __('home.sections.benefits.items.simple.title') }}</h3>
                    <p class="mt-3 text-sm text-slate-600">{{ __('home.sections.benefits.items.simple.body') }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-6 shadow-sm reveal" data-reveal style="--reveal-delay: 300ms">
                    <h3 class="text-base font-semibold text-slate-900">{{ __('home.sections.benefits.items.correct.title') }}</h3>
                    <p class="mt-3 text-sm text-slate-600">{{ __('home.sections.benefits.items.correct.body') }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-6 shadow-sm reveal" data-reveal style="--reveal-delay: 400ms">
                    <h3 class="text-base font-semibold text-slate-900">{{ __('home.sections.benefits.items.status.title') }}</h3>
                    <p class="mt-3 text-sm text-slate-600">{{ __('home.sections.benefits.items.status.body') }}</p>
                </div>
                <div class="rounded-2xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-6 shadow-sm reveal" data-reveal style="--reveal-delay: 500ms">
                    <h3 class="text-base font-semibold text-slate-900">{{ __('home.sections.benefits.items.support.title') }}</h3>
                    <p class="mt-3 text-sm text-slate-600">{{ __('home.sections.benefits.items.support.body') }}</p>
                </div>
            </div>
        </x-section>

        <x-section id="faq" class="scroll-mt-28" title="{{ __('home.sections.faq.title') }}" subtitle="{{ __('home.sections.faq.subtitle') }}">
            <div class="space-y-4" data-accordion="faq">
                <x-faq-item class="reveal" data-reveal style="--reveal-delay: 0ms" question="{{ __('home.sections.faq.items.meaning.question') }}">
                    {{ __('home.sections.faq.items.meaning.answer') }}
                </x-faq-item>
                <x-faq-item class="reveal" data-reveal style="--reveal-delay: 100ms" question="{{ __('home.sections.faq.items.when.question') }}">
                    {{ __('home.sections.faq.items.when.answer') }}
                </x-faq-item>
                <x-faq-item class="reveal" data-reveal style="--reveal-delay: 200ms" question="{{ __('home.sections.faq.items.liquidation.question') }}">
                    {{ __('home.sections.faq.items.liquidation.answer') }}
                </x-faq-item>
                <x-faq-item class="reveal" data-reveal style="--reveal-delay: 300ms" question="{{ __('home.sections.faq.items.person.question') }}">
                    {{ __('home.sections.faq.items.person.answer') }}
                </x-faq-item>
                <x-faq-item class="reveal" data-reveal style="--reveal-delay: 400ms" question="{{ __('home.sections.faq.items.documents.question') }}">
                    {{ __('home.sections.faq.items.documents.answer') }}
                </x-faq-item>
                <x-faq-item class="reveal" data-reveal style="--reveal-delay: 500ms" question="{{ __('home.sections.faq.items.duration.question') }}">
                    {{ __('home.sections.faq.items.duration.answer') }}
                </x-faq-item>
                <x-faq-item class="reveal" data-reveal style="--reveal-delay: 600ms" question="{{ __('home.sections.faq.items.after.question') }}">
                    {{ __('home.sections.faq.items.after.answer') }}
                </x-faq-item>
            </div>
        </x-section>

        <x-section id="solicitare" class="scroll-mt-36" title="{{ __('home.sections.contact.title') }}" subtitle="{{ __('home.sections.contact.subtitle') }}">
            <form class="grid gap-5 rounded-3xl border border-slate-200 border-l-2 border-l-[#991b1b]/30 bg-white p-8 shadow-sm lg:grid-cols-2 scroll-mt-36" id="contact" method="POST" action="{{ route('leads.store', ['locale' => $currentLocale]) }}" data-async="lead" data-success-default="{{ __('home.form.success_message') }}" data-error-default="{{ __('home.form.error_default') }}">
                @csrf

                <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 lg:col-span-2 {{ session('success') ? '' : 'hidden' }}" data-success>
                    {{ session('success') }}
                </div>

                <div class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 lg:col-span-2 {{ $errors->any() ? '' : 'hidden' }}" data-error-summary>
                    <p class="font-semibold">{{ __('home.form.error_summary') }}</p>
                </div>

                <div class="space-y-2 reveal" data-reveal style="--reveal-delay: 0ms">
                    <label class="text-sm font-semibold text-slate-700" for="full_name">{{ __('home.form.full_name.label') }}</label>
                    <input class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-200" id="full_name" name="full_name" type="text" placeholder="{{ __('home.form.full_name.placeholder') }}" value="{{ old('full_name') }}" required>
                    <p class="text-xs text-rose-600 {{ $errors->has('full_name') ? '' : 'hidden' }}" data-error-for="full_name">
                        @error('full_name'){{ $message }}@enderror
                    </p>
                </div>
                <div class="space-y-2 reveal" data-reveal style="--reveal-delay: 100ms">
                    <label class="text-sm font-semibold text-slate-700" for="phone">{{ __('home.form.phone.label') }}</label>
                    <input class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-200" id="phone" name="phone" type="tel" placeholder="{{ __('home.form.phone.placeholder') }}" value="{{ old('phone') }}" inputmode="tel" pattern="^\+?[0-9]{7,15}$" autocomplete="tel" required>
                    <p class="text-xs text-rose-600 {{ $errors->has('phone') ? '' : 'hidden' }}" data-error-for="phone">
                        @error('phone'){{ $message }}@enderror
                    </p>
                </div>
                <div class="space-y-2 reveal" data-reveal style="--reveal-delay: 200ms">
                    <label class="text-sm font-semibold text-slate-700" for="cod_fiscal">{{ __('home.form.cod_fiscal.label') }}</label>
                    <input class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-200" id="cod_fiscal" name="cod_fiscal" type="text" placeholder="{{ __('home.form.cod_fiscal.placeholder') }}" value="{{ old('cod_fiscal') }}" inputmode="numeric" pattern="^\d{13}$" minlength="13" maxlength="13" required>
                    <p class="text-xs text-rose-600 {{ $errors->has('cod_fiscal') ? '' : 'hidden' }}" data-error-for="cod_fiscal">
                        @error('cod_fiscal'){{ $message }}@enderror
                    </p>
                </div>
                <div class="space-y-2 reveal" data-reveal style="--reveal-delay: 300ms">
                    <label class="text-sm font-semibold text-slate-700" for="email">{{ __('home.form.email.label') }}</label>
                    <input class="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-200" id="email" name="email" type="email" placeholder="{{ __('home.form.email.placeholder') }}" value="{{ old('email') }}">
                    <p class="text-xs text-rose-600 {{ $errors->has('email') ? '' : 'hidden' }}" data-error-for="email">
                        @error('email'){{ $message }}@enderror
                    </p>
                </div>
                <div class="space-y-2 lg:col-span-2 reveal" data-reveal style="--reveal-delay: 400ms">
                    <label class="text-sm font-semibold text-slate-700" for="message">{{ __('home.form.message.label') }}</label>
                    <textarea class="h-32 w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-200" id="message" name="message" placeholder="{{ __('home.form.message.placeholder') }}">{{ old('message') }}</textarea>
                    <p class="text-xs text-rose-600 {{ $errors->has('message') ? '' : 'hidden' }}" data-error-for="message">
                        @error('message'){{ $message }}@enderror
                    </p>
                </div>
                <div class="lg:col-span-2 reveal" data-reveal style="--reveal-delay: 500ms">
                    <div class="flex justify-center">
                        <x-cta-button type="submit" data-submit>{{ __('home.form.submit') }}</x-cta-button>
                    </div>
                    <p class="mt-3 text-center text-xs text-slate-500">
                        {{ __('home.form.reply_time') }}
                    </p>
                </div>
            </form>
        </x-section>
    </main>

    <footer class="border-t border-slate-200 border-t-[#991b1b]/30 border-t-2 bg-white">
        <div class="mx-auto grid w-full max-w-6xl gap-8 px-6 py-10 md:grid-cols-3">
            <div class="flex items-center gap-3">
                <span class="flex h-14 w-14 [&>svg]:h-full [&>svg]:w-full" aria-label="{{ config('app.name', 'Radiere SRL') }} logo" role="img">
                    {!! file_get_contents(public_path('uploads/radiere-logo.svg')) !!}
                </span>
                <h3 class="text-base font-semibold text-slate-900 whitespace-nowrap">{{ config('app.name', 'Radiere SRL') }}</h3>
            </div>
            <div>
                <h4 class="text-base font-semibold text-slate-900">{{ __('home.footer.services.title') }}</h4>
                <ul class="mt-3 space-y-2 text-sm text-slate-600">
                    <li>{{ __('home.footer.services.items.0') }}</li>
                    <li>{{ __('home.footer.services.items.1') }}</li>
                    <li>{{ __('home.footer.services.items.2') }}</li>
                </ul>
            </div>
            <div>
                <h4 class="text-base font-semibold text-slate-900">{{ __('home.footer.contact.title') }}</h4>
                <div class="mt-3 space-y-2 text-sm text-slate-600">
                    <a href="tel:+37369750249" class="block text-left transition hover:text-slate-900" data-copy-value="+37369750249">+37369750249</a>
                    <a href="mailto:contact@radiere-srl.md" class="block text-left transition hover:text-slate-900">contact@radiere-srl.md</a>
                </div>
            </div>
        </div>
        <div class="border-t border-slate-200 border-t-[#991b1b]/20 py-4 text-center text-xs text-slate-500">
            <div>© {{ date('Y') }} {{ config('app.name', 'Radiere SRL') }}. {{ __('home.footer.rights') }}</div>
            <a href="https://digitalexpert.md" target="_blank" rel="noopener" class="mt-1 inline-block font-semibold text-emerald-600 transition hover:text-emerald-700">
                {{ __('home.footer.developed_by') }} DigitExpert
            </a>
        </div>
    </footer>
@endsection