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

@section('content')
    <section class="shell py-20 lg:py-24">
        <div class="grid gap-10 lg:grid-cols-[1fr_0.9fr] lg:items-end">
            <div>
                <p class="section-kicker">{{ __('About') }}</p>
                <h1 class="section-title">{{ $page->localized('hero.title') }}</h1>
                <p class="mt-6 section-copy">{{ $page->localized('hero.description') }}</p>
            </div>
            <div class="surface-panel grid gap-4 p-6 sm:grid-cols-2 sm:p-8">
                <div class="group relative overflow-hidden rounded-3xl bg-brand-500 p-6 text-white transition duration-300 hover:-translate-y-1 hover:shadow-[0_20px_45px_rgba(31,111,229,0.35)]">
                    <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/20 to-transparent opacity-60 transition duration-300 group-hover:opacity-90"></div>
                    <p class="relative text-sm uppercase tracking-[0.2em] text-white/75">{{ $page->localized('vision.title') }}</p>
                    <p class="relative mt-4 text-lg leading-8">{{ $page->localized('vision.body') }}</p>
                </div>
                <div class="group relative overflow-hidden rounded-3xl bg-slate-950 p-6 text-white transition duration-300 hover:-translate-y-1 hover:shadow-[0_20px_45px_rgba(2,8,23,0.45)] dark:bg-white dark:text-slate-950 dark:hover:shadow-[0_20px_45px_rgba(148,163,184,0.35)]">
                    <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-50 transition duration-300 group-hover:opacity-80 dark:from-slate-200/50"></div>
                    <p class="relative text-sm uppercase tracking-[0.2em] opacity-70">{{ $page->localized('mission.title') }}</p>
                    <p class="relative mt-4 text-lg leading-8">{{ $page->localized('mission.body') }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="shell py-16">
        <div class="surface-panel p-8 sm:p-10">
            <p class="section-kicker">{{ $page->localized('story.title') }}</p>
            <p class="max-w-4xl text-xl leading-10 text-slate-700 dark:text-slate-200">{{ $page->localized('story.body') }}</p>
        </div>
    </section>

    <section class="shell py-16">
        <p class="section-kicker">Values</p>
        <div class="grid gap-6 md:grid-cols-3">
            @foreach ($page->localized('values', []) as $item)
                <article class="surface-panel group p-6 transition duration-300 hover:-translate-y-2 hover:shadow-[0_20px_45px_rgba(15,23,42,0.16)] dark:hover:shadow-[0_20px_45px_rgba(0,0,0,0.35)]">
                    <div class="mb-5 inline-flex rounded-2xl bg-brand-500/10 p-3 text-brand-600 dark:bg-brand-500/20 dark:text-brand-300">
                        <i data-lucide="sparkles" class="h-6 w-6"></i>
                    </div>
                    <h2 class="text-2xl font-semibold">{{ data_get($item, 'title') }}</h2>
                    <p class="mt-4 text-base leading-8 text-slate-600 dark:text-slate-300">{{ data_get($item, 'text') }}</p>
                </article>
            @endforeach
        </div>
    </section>

    <section class="shell py-16 lg:py-24">
        <div class="mb-8">
            <p class="section-kicker">Method</p>
            <h2 class="section-title">Structured execution from first question to launch.</h2>
        </div>
        <div class="grid gap-5 lg:grid-cols-4">
            @foreach ($page->localized('methodology', []) as $index => $step)
                <article class="surface-panel group p-6 transition duration-300 hover:-translate-y-2 hover:shadow-[0_20px_45px_rgba(15,23,42,0.16)] dark:hover:shadow-[0_20px_45px_rgba(0,0,0,0.35)]">
                    <p class="text-sm font-bold uppercase tracking-[0.2em] text-brand-500">0{{ $index + 1 }}</p>
                    <h3 class="mt-4 font-display text-2xl font-bold">{{ data_get($step, 'title') }}</h3>
                    <p class="mt-4 text-base leading-8 text-slate-600 dark:text-slate-300">{{ data_get($step, 'text') }}</p>
                </article>
            @endforeach
        </div>
    </section>
@endsection