@extends('layouts.base')

@section('body')
<div class="flex min-h-screen flex-col lg:flex-row">

    {{-- Brand panel --}}
    <div class="relative hidden overflow-hidden bg-brand-500 p-12 text-white lg:flex lg:w-5/12 lg:flex-col lg:justify-between">
        <div class="pointer-events-none absolute -bottom-24 -end-24 h-96 w-96 rounded-full bg-brand-500/20 blur-3xl"></div>

        <a href="{{ route('landing') }}">
            <x-logo variant="white" class="h-12 w-auto"/>
        </a>

        <div class="relative">
            <h2 class="text-3xl leading-snug text-white">{{ __('landing.hero_title') }}</h2>
            <p class="mt-4 max-w-md leading-relaxed text-white/75">{{ __('landing.hero_subtitle') }}</p>

            <ul class="mt-8 list-none space-y-3 ps-0">
                @foreach ([1, 2, 3] as $i)
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 shrink-0 text-white" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                        </svg>
                        <span class="font-medium text-white/90">{{ __('landing.feature_' . $i . '_title') }}</span>
                    </li>
                @endforeach
            </ul>
        </div>

        <p class="relative text-sm text-white/60">&copy; {{ date('Y') }} Smart Carb. {{ __('landing.footer_rights') }}</p>
    </div>

    {{-- Form panel --}}
    <div class="flex flex-1 items-center justify-center bg-white px-4 py-12">
        <div class="w-full max-w-md">
            <div class="mb-8 flex items-center justify-between lg:justify-end">
                <a href="{{ route('landing') }}" class="lg:hidden">
                    <x-logo class="h-10 w-auto"/>
                </a>
                <x-language-switcher/>
            </div>

            @yield('form')
        </div>
    </div>
</div>
@endsection