@extends('layouts.app')

@section('title', __('app.about.title'))
@section('meta_description', __('app.about.meta_description'))

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.about')],
        ],
        'title' => __('app.about.h1'),
        'lead' => __('app.about.lead'),
    ])

    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
        <div class="grid gap-8 lg:grid-cols-2">
            <article class="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-black/5">
                <h2 class="text-xl font-bold text-brand-deep">{{ __('app.about.mission_title') }}</h2>
                <p class="mt-3 leading-relaxed text-ink-soft">{{ __('app.about.mission') }}</p>
            </article>
            <article class="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-black/5">
                <h2 class="text-xl font-bold text-brand-deep">{{ __('app.about.what_title') }}</h2>
                <p class="mt-3 leading-relaxed text-ink-soft">{{ __('app.about.what') }}</p>
            </article>
        </div>

        <div class="mt-14">
            <h2 class="text-2xl font-bold text-brand-deep">{{ __('app.about.values_title') }}</h2>
            <div class="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach (__('app.about.values') as $value)
                    <article class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
                        <h3 class="text-base font-bold text-brand-deep">{{ $value['title'] }}</h3>
                        <p class="mt-2 text-sm leading-relaxed text-ink-soft">{{ $value['text'] }}</p>
                    </article>
                @endforeach
            </div>
        </div>

        <div class="mt-14 rounded-2xl bg-brand-soft/40 p-8">
            <h2 class="text-xl font-bold text-brand-deep">{{ __('app.about.regions_title') }}</h2>
            <p class="mt-3 leading-relaxed text-ink-soft">{{ __('app.about.regions') }}</p>
            <div class="mt-5 flex flex-wrap gap-3">
                @foreach (__('app.about.region_list') as $region)
                    <span class="rounded-full bg-white px-4 py-2 text-sm font-semibold text-brand-deep ring-1 ring-black/5">{{ $region }}</span>
                @endforeach
            </div>
        </div>

        <div class="mt-10 rounded-2xl bg-white p-8 shadow-sm ring-1 ring-black/5">
            <h2 class="text-xl font-bold text-brand-deep">{{ __('app.about.contact_title') }}</h2>
            <p class="mt-2 text-sm text-ink-soft">{{ __('app.about.contact_text') }}</p>
            <div class="mt-5 flex flex-wrap gap-3">
                <a href="{{ lroute('demo') }}" class="inline-block rounded-full bg-brand px-6 py-3 text-sm font-semibold text-white transition hover:bg-brand-deep">
                    {{ __('app.nav.book_demo') }}
                </a>
                <a href="{{ lroute('contact') }}" class="inline-block rounded-full bg-white px-6 py-3 text-sm font-semibold text-brand-deep ring-1 ring-black/10 transition hover:bg-brand-soft/40">
                    {{ __('app.nav.contact') }}
                </a>
            </div>
        </div>
    </section>
@endsection