@extends(($themeName ?? 'thecore') === 'xperia'
    ? 'themes.xperia.components.layouts.landingpage'
    : 'themes.thecore.components.layouts.landingpage')

@section('content')
    @if(($themeName ?? 'thecore') === 'xperia')
        <article class="landing-container">

            {{-- Page header --}}
            <header class="max-w-5xl mx-auto text-center mb-12 lg:mb-16">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-neutral-50 dark:bg-white/5 ring-1 ring-neutral-200 dark:ring-white/10 mb-5">
                    <span class="w-1.5 h-1.5 rounded-full bg-primary-500"></span>
                    <span class="font-mono text-[10px] uppercase tracking-[0.2em] text-neutral-600 dark:text-neutral-400">
                        {{ t('terms_conditions') }}
                    </span>
                </div>

                <h1 class="landing-display text-4xl md:text-5xl lg:text-6xl text-neutral-900 dark:text-white leading-[1.05] break-words">
                    {{ $title }}
                </h1>

                @if ($updated_at)
                    <p class="mt-4 text-sm text-neutral-500 dark:text-neutral-400">
                        {{ t('last_updated') }}: {{ $updated_at }}
                    </p>
                @endif
            </header>

            {{-- Content --}}
            <div class="max-w-5xl mx-auto">
                <div class="prose prose-base prose-neutral dark:prose-invert max-w-none text-base
                            prose-headings:font-display prose-headings:tracking-tight prose-headings:text-neutral-900 dark:prose-headings:text-white
                            prose-p:text-neutral-700 dark:prose-p:text-neutral-300 prose-p:leading-relaxed prose-p:text-base
                            prose-li:text-neutral-700 dark:prose-li:text-neutral-300 prose-li:text-base
                            prose-a:text-primary-600 hover:prose-a:text-primary-700 dark:prose-a:text-primary-400 prose-a:no-underline hover:prose-a:underline
                            prose-strong:text-neutral-900 dark:prose-strong:text-white
                            prose-code:font-mono prose-code:text-sm prose-code:bg-neutral-100 dark:prose-code:bg-white/5 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
                            prose-pre:bg-neutral-900 prose-pre:text-neutral-100 dark:prose-pre:bg-black dark:prose-pre:ring-1 dark:prose-pre:ring-white/10
                            prose-blockquote:border-l-primary-500 prose-blockquote:bg-neutral-50 dark:prose-blockquote:bg-white/5 prose-blockquote:px-5 prose-blockquote:py-3 prose-blockquote:not-italic prose-blockquote:rounded-r-xl
                            prose-hr:border-neutral-200 dark:prose-hr:border-white/10
                            prose-img:rounded-2xl prose-img:ring-1 prose-img:ring-neutral-200 dark:prose-img:ring-white/10 prose-img:shadow-lg
                            break-words">
                    {!! $content !!}
                </div>
            </div>

        </article>
    @else
        <div class="max-w-5xl mx-auto px-4 py-16">
            <x-card class="rounded-lg">
                <x-slot:header>
                    <h1 class="text-3xl font-bold mb-4 break-words">{{ $title }}</h1>
                    @if ($updated_at)
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">{{ t('last_updated') }}: {{ $updated_at }}</p>
                    @endif
                </x-slot:header>
                <x-slot:content>
                    <div class="prose prose-base dark:prose-invert max-w-none text-base break-words">
                        {!! $content !!}
                    </div>
                </x-slot:content>
            </x-card>
        </div>
    @endif
@endsection