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

@section('content')
    <section class="shell relative overflow-hidden py-20 lg:py-28">
        <div class="absolute inset-0 -z-10 overflow-hidden rounded-[2.5rem]">
            <div data-hero-orb class="absolute left-[8%] top-10 h-48 w-48 rounded-full bg-brand-400/25 blur-3xl"></div>
            <div data-hero-orb class="absolute right-[10%] top-20 h-72 w-72 rounded-full bg-coral-400/20 blur-3xl"></div>
            <div data-hero-orb class="absolute bottom-10 left-1/3 h-64 w-64 rounded-full bg-mint-300/20 blur-3xl"></div>
        </div>

        <div class="surface-panel relative overflow-hidden px-6 py-14 sm:px-10 lg:px-14 lg:py-18">
            <div class="grid gap-12 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
                <div>
                    <p class="section-kicker">{{ $page->localized('hero.eyebrow') }}</p>
                    <h1 class="font-display text-4xl font-bold leading-[0.95] sm:text-5xl lg:text-6xl xl:text-7xl">{{ $page->localized('hero.title') }}</h1>
                    <p class="mt-6 max-w-2xl text-base leading-8 text-slate-600 dark:text-slate-300 sm:text-lg">{{ $page->localized('hero.description') }}</p>
                    <div class="mt-8 flex flex-wrap gap-4">
                        <a href="{{ route('contact') }}" class="btn-primary">{{ $page->localized('hero.cta') }}</a>
                        <a href="#workflow" class="btn-secondary">{{ __('Workflow') }}</a>
                    </div>
                </div>

                <div class="grid gap-4 sm:grid-cols-2">
                    <article class="group relative overflow-hidden rounded-[1.75rem] border border-white/15 bg-gradient-to-br from-slate-950 to-slate-900 p-6 text-white shadow-[0_14px_40px_rgba(2,8,23,0.35)] transition duration-300 hover:-translate-y-1.5 hover:shadow-[0_24px_55px_rgba(2,8,23,0.45)] sm:min-h-[220px] sm:p-7" data-stack-card>
                        <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(79,152,255,0.28),transparent_55%)]"></div>
                        <p class="relative text-xs font-bold uppercase tracking-[0.24em] text-white/65">Idea</p>
                        <p class="relative mt-6 text-3xl font-semibold leading-tight">From messy notes to product logic.</p>
                    </article>
                    <article class="group relative overflow-hidden rounded-[1.75rem] border border-slate-200/80 bg-gradient-to-br from-white to-slate-100 p-6 text-slate-900 shadow-[0_14px_40px_rgba(15,23,42,0.10)] transition duration-300 hover:-translate-y-1.5 hover:shadow-[0_24px_55px_rgba(15,23,42,0.18)] dark:border-white/10 dark:from-slate-800 dark:to-slate-900 dark:text-white sm:min-h-[220px] sm:p-7" data-stack-card>
                        <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(148,163,184,0.2),transparent_55%)] dark:bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.12),transparent_55%)]"></div>
                        <p class="relative text-xs font-bold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-300">Design</p>
                        <p class="relative mt-6 text-3xl font-semibold leading-tight">Screens shaped by flow, not decoration.</p>
                    </article>
                    <article class="group relative overflow-hidden rounded-[1.75rem] border border-brand-300/35 bg-gradient-to-br from-brand-600 to-brand-500 p-6 text-white shadow-[0_14px_40px_rgba(31,111,229,0.35)] transition duration-300 hover:-translate-y-1.5 hover:shadow-[0_24px_55px_rgba(31,111,229,0.45)] sm:min-h-[220px] sm:p-7" data-stack-card>
                        <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_bottom_right,rgba(255,255,255,0.24),transparent_60%)]"></div>
                        <p class="relative text-xs font-bold uppercase tracking-[0.24em] text-white/70">System</p>
                        <p class="relative mt-6 text-3xl font-semibold leading-tight">Dashboards, APIs, permissions, reporting.</p>
                    </article>
                    <article class="group relative overflow-hidden rounded-[1.75rem] border border-slate-200/80 bg-gradient-to-br from-slate-100 to-slate-200 p-6 text-slate-900 shadow-[0_14px_40px_rgba(15,23,42,0.10)] transition duration-300 hover:-translate-y-1.5 hover:shadow-[0_24px_55px_rgba(15,23,42,0.2)] dark:border-white/10 dark:from-slate-900 dark:to-slate-950 dark:text-white sm:min-h-[220px] sm:p-7" data-stack-card>
                        <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(15,23,42,0.08),transparent_65%)] dark:bg-[radial-gradient(circle_at_center,rgba(79,152,255,0.12),transparent_65%)]"></div>
                        <p class="relative text-xs font-bold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-300">Success</p>
                        <p class="relative mt-6 text-3xl font-semibold leading-tight">A launch with structure, clarity, and momentum.</p>
                    </article>
                </div>
            </div>
        </div>
    </section>

    <section id="workflow" class="shell py-16 lg:py-24">
        <div class="mb-10 flex items-center gap-4">
            <div data-reveal-line class="h-px flex-1 bg-brand-500"></div>
            <span class="section-kicker mb-0">{{ __('Workflow') }}</span>
        </div>
        <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            @foreach ($page->localized('scroll_steps', []) as $index => $step)
                <article class="surface-panel p-6" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}">
                    <p class="text-sm font-bold uppercase tracking-[0.26em] text-brand-600 dark:text-brand-300">0{{ $index + 1 }}</p>
                    <h2 class="mt-5 font-display text-3xl font-bold">{{ data_get($step, 'title') }}</h2>
                    <p class="mt-4 text-base leading-8 text-slate-600 dark:text-slate-300">{{ data_get($step, 'text') }}</p>
                </article>
            @endforeach
        </div>
    </section>

    <section class="shell py-16 lg:py-24">
        <div class="grid gap-8 lg:grid-cols-[0.95fr_1.05fr] lg:items-start">
            <div>
                <p class="section-kicker">Pain to progress</p>
                <h2 class="section-title">{{ $page->localized('problems.title') }}</h2>
            </div>
            <div class="grid gap-4">
                @foreach ($page->localized('problems.items', []) as $item)
                    <div class="grid gap-4 rounded-4xl border border-slate-200 bg-white p-5 shadow-sm sm:grid-cols-[1fr_auto_1fr] sm:items-center dark:border-white/10 dark:bg-white/5" data-aos="fade-left">
                        <div class="rounded-3xl bg-rose-50 p-5 dark:bg-rose-500/10">
                            <p class="text-sm uppercase tracking-[0.2em] text-rose-500">Before</p>
                            <p class="mt-3 text-xl font-semibold">{{ data_get($item, 'before') }}</p>
                        </div>
                        <div class="flex items-center justify-center">
                            <span class="rounded-full bg-slate-950 px-4 py-2 text-sm font-semibold text-white dark:bg-white dark:text-slate-950">→</span>
                        </div>
                        <div class="rounded-3xl bg-emerald-50 p-5 dark:bg-emerald-500/10">
                            <p class="text-sm uppercase tracking-[0.2em] text-emerald-600">After</p>
                            <p class="mt-3 text-xl font-semibold">{{ data_get($item, 'after') }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="shell py-16 lg:py-24" x-data="{ active: '{{ data_get($page->localized('audiences.items', []), '0.key', 'startup') }}' }">
        <p class="section-kicker">Interactive path</p>
        <div class="grid gap-8 lg:grid-cols-[0.85fr_1.15fr]">
            <div>
                <h2 class="section-title">{{ $page->localized('audiences.title') }}</h2>
            </div>
            <div class="surface-panel p-6 sm:p-8">
                <div class="flex flex-wrap gap-3">
                    @foreach ($page->localized('audiences.items', []) as $item)
                        <button type="button" @click="active = '{{ data_get($item, 'key') }}'" :class="active === '{{ data_get($item, 'key') }}' ? 'bg-slate-950 text-white dark:bg-white dark:text-slate-950' : 'bg-slate-100 text-slate-700 dark:bg-slate-900 dark:text-slate-200'" class="rounded-full px-5 py-3 text-sm font-semibold transition">{{ data_get($item, 'label') }}</button>
                    @endforeach
                </div>

                <div class="mt-8 space-y-4">
                    @foreach ($page->localized('audiences.items', []) as $item)
                        <div x-show="active === '{{ data_get($item, 'key') }}'" x-transition.opacity.duration.300ms class="rounded-[1.75rem] bg-slate-50 p-6 dark:bg-slate-900/70">
                            <h3 class="font-display text-3xl font-bold">{{ data_get($item, 'headline') }}</h3>
                            <p class="mt-4 text-base leading-8 text-slate-600 dark:text-slate-300">{{ data_get($item, 'body') }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="shell py-16 lg:py-24">
        <div class="mb-10 max-w-3xl">
            <p class="section-kicker">Behind the scenes</p>
            <h2 class="section-title">{{ $page->localized('behind_scenes.title') }}</h2>
        </div>
        <div class="grid gap-6 lg:grid-cols-[1fr_0.85fr]">
            <div class="surface-panel overflow-hidden p-6 sm:p-8">
                <div class="rounded-3xl bg-slate-950 p-6 text-sm text-slate-200 dark:bg-black">
                    <div class="mb-6 flex items-center gap-2">
                        <span class="h-3 w-3 rounded-full bg-rose-400"></span>
                        <span class="h-3 w-3 rounded-full bg-amber-400"></span>
                        <span class="h-3 w-3 rounded-full bg-emerald-400"></span>
                    </div>
<pre class="overflow-x-auto leading-7 text-brand-100"><code>// Nivex build flow
const dashboard = build('operations');
const ui = design({ clarity: true, speed: true });
const launch = deploy({ analytics: 'ready' });

return success({
  product: dashboard.combine(ui),
  growth: launch.measure(),
});</code></pre>
                </div>
            </div>

            <div class="grid gap-4">
                @foreach ($page->localized('behind_scenes.items', []) as $item)
                    <article class="surface-panel p-6" data-stack-card>
                        <p class="text-sm uppercase tracking-[0.2em] text-brand-600 dark:text-brand-300">Layer</p>
                        <h3 class="mt-3 text-2xl font-semibold">{{ data_get($item, 'title') }}</h3>
                        <p class="mt-3 text-base leading-8 text-slate-600 dark:text-slate-300">{{ data_get($item, 'text') }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="shell overflow-hidden py-16 lg:py-24">
        <div class="mb-10 flex items-end justify-between gap-4">
            <div>
                <p class="section-kicker">Journey</p>
                <h2 class="section-title">Idea to launch, told as motion.</h2>
            </div>
        </div>

        <div class="overflow-hidden">
            <div class="flex gap-5 pb-4" data-horizontal-track>
                @foreach ($page->localized('timeline', []) as $index => $item)
                    <article class="surface-panel w-72.5 min-w-72.5 p-6 sm:w-90 sm:min-w-90">
                        <p class="text-sm font-bold uppercase tracking-[0.2em] text-slate-400">0{{ $index + 1 }}</p>
                        <h3 class="mt-4 font-display text-2xl font-bold sm:text-3xl">{{ data_get($item, 'title') }}</h3>
                        <p class="mt-4 text-base leading-8 text-slate-600 dark:text-slate-300">{{ data_get($item, 'text') }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="shell py-16 lg:py-24">
        <div class="surface-panel overflow-hidden px-6 py-12 text-center sm:px-10 lg:px-16 lg:py-16">
            <p class="section-kicker mx-auto">Closing note</p>
            <h2 class="mx-auto max-w-4xl font-display text-4xl font-bold leading-tight sm:text-5xl">{{ $page->localized('ending.title') }}</h2>
            <a href="{{ route('contact') }}" class="btn-primary mt-8">{{ $page->localized('ending.cta') }}</a>
        </div>
    </section>
@endsection