@extends('layouts.public', [
    'title' => $page?->meta_title ?? 'About | LottoData',
    'metaDescription' => $page?->meta_description ?? 'About LottoData.com, its public-site direction, and the product principles behind the lottery website shell.',
])

@section('content')
    <section class="mx-auto max-w-6xl px-6 py-12 lg:px-8 lg:py-16">
        <div class="grid gap-6 lg:grid-cols-[1.1fr_0.9fr]">
            <div class="space-y-6 rounded-[2rem] border border-white/10 bg-white/[0.04] p-8 lg:p-12">
                <p class="text-sm font-semibold uppercase tracking-[0.35em] text-amber-200">About</p>
                <h1 class="text-4xl font-semibold tracking-tight text-white sm:text-5xl">
                    {{ $page?->excerpt ?? 'A production-minded public lottery website focused on the information people actually look for first.' }}
                </h1>
                <div class="max-w-3xl space-y-4 text-base leading-8 text-slate-300">
                    @foreach (preg_split("/\r\n|\n|\r/", $page?->body ?? "LottoData.com is being structured around strong homepage hierarchy, visible jackpot coverage, easy-to-scan result pathways, and admin-manageable content areas that can grow without forcing a redesign every time the site expands.\n\nKeep the public experience clean now so live data and admin tooling can slot in later.") as $paragraph)
                        @if (filled(trim($paragraph)))
                            <p>{{ trim($paragraph) }}</p>
                        @endif
                    @endforeach
                </div>
            </div>

            <div class="rounded-[2rem] border border-cyan-300/20 bg-cyan-300/10 p-8">
                <p class="text-xs font-semibold uppercase tracking-[0.35em] text-cyan-100">Current direction</p>
                <p class="mt-4 text-2xl font-semibold text-white">Keep the public experience clean now so live data and admin tooling can slot in later.</p>
            </div>
        </div>
    </section>
@endsection