@extends($site->themeView('layout'))

{{-- Estate theme: a property project, from budget to investment, as a guided path. --}}
@section('content')
    @php($steps = $tools->take(4)->values())
    <section class="bg-white">
        <div class="container-site grid items-center gap-12 py-14 lg:grid-cols-2 lg:py-20">
            <div>
                <h1 class="text-4xl font-black tracking-tight text-balance md:text-5xl">{{ $site->localized('home_heading') ?: $site->name }}</h1>
                @if ($site->localized('description'))<p class="mt-5 text-lg text-slate-600">{{ \Illuminate\Support\Str::limit($site->localized('description'), 260) }}</p>@endif
                <ul class="mt-6 space-y-2 text-slate-700">
                    @foreach (['trust_private', 'trust_instant', 'trust_explained'] as $key)
                        <li class="flex items-center gap-2"><span class="grid size-5 place-items-center rounded-full bg-emerald-100 text-emerald-700"><x-site.icon name="check" class="size-3.5" /></span>{{ __('site.'.$key) }}</li>
                    @endforeach
                </ul>
            </div>
            {{-- Stack of simulator cards. --}}
            <div class="relative">
                <div class="absolute -inset-4 -z-0 rounded-3xl bg-brand/5" aria-hidden="true"></div>
                <div class="relative grid gap-3">
                    @foreach ($tools->take(4) as $tool)
                        <a href="{{ $tool->path() }}" class="card group flex items-center gap-4 p-4 transition hover:border-brand">
                            <span class="grid size-12 shrink-0 place-items-center rounded-md bg-brand text-white"><x-site.icon :name="$tool->icon()" class="size-6" /></span>
                            <span class="min-w-0 flex-1"><span class="block font-bold group-hover:text-brand">{{ $tool->name }}</span><span class="line-clamp-1 text-sm text-slate-500">{{ $tool->summary }}</span></span>
                            <x-site.icon name="chevron-right" class="size-5 text-slate-400 group-hover:text-brand" />
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    @if ($steps->count() >= 3)
        <section class="container-site py-16" aria-labelledby="steps-title">
            <h2 id="steps-title" class="section-title text-center">{{ __('theme.project_steps') }}</h2>
            <ol @class(['relative mt-10 grid gap-6', 'md:grid-cols-3' => $steps->count() === 3, 'md:grid-cols-4' => $steps->count() === 4])>
                <span class="absolute inset-x-[12%] top-6 hidden h-0.5 bg-brand/20 md:block" aria-hidden="true"></span>
                @foreach ($steps as $tool)
                    <li class="relative text-center">
                        <span class="relative mx-auto grid size-12 place-items-center rounded-full border-4 border-surface bg-brand text-lg font-black text-white">{{ $loop->iteration }}</span>
                        <p class="mt-4 text-xs font-bold tracking-wider text-brand uppercase">{{ __('theme.step', ['n' => $loop->iteration]) }}</p>
                        <a href="{{ $tool->path() }}" class="mt-1 block font-bold hover:text-brand">{{ $tool->name }}</a>
                    </li>
                @endforeach
            </ol>
        </section>
    @endif

    @if ($tools->count() > 4)
        <section class="container-site pb-6" aria-label="{{ __('theme.our_tools') }}">
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($tools->slice(4) as $tool)
                    @include($site->themeView('partials.tool-card'))
                @endforeach
            </div>
        </section>
    @endif

    @if ($latestPosts->isNotEmpty())
        <section class="border-t border-slate-200 bg-white py-16" aria-labelledby="guides-title">
            <div class="container-site">
                <div class="flex items-end justify-between gap-4">
                    <h2 id="guides-title" class="section-title">{{ __('site.practical_guides') }}</h2>
                    <a href="{{ lpath('/'.seg('blog')) }}" class="text-sm font-semibold text-brand hover:underline">{{ __('site.all_guides_link') }}</a>
                </div>
                <div class="mt-8 grid gap-6 md:grid-cols-3">
                    @foreach ($latestPosts->take(3) as $post)
                        @include($site->themeView('partials.post-card'))
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <p class="container-site mt-10 text-center text-xs text-slate-500">{{ __('theme.disclaimer_estimate') }}</p>
@endsection