@php
    $locale = app()->getLocale();
    $seoTitle = $article->trad('title').' — Obvious Way';
    $seoDescription = $article->trad('excerpt');
    $urlFr = route('articles.show', ['locale' => 'fr', 'slug' => $article->art_slug]);
    $urlEn = route('articles.show', ['locale' => 'en', 'slug' => $article->art_slug]);
    $urlDe = route('articles.show', ['locale' => 'de', 'slug' => $article->art_slug]);

    $articleSchema = [
        '@context' => 'https://schema.org',
        '@type' => 'Article',
        'headline' => $article->trad('title'),
        'description' => $article->trad('excerpt'),
        'datePublished' => $article->art_created_at?->toIso8601String(),
        'dateModified' => $article->art_updated_at?->toIso8601String(),
        'inLanguage' => $locale,
        'mainEntityOfPage' => match ($locale) { 'en' => $urlEn, 'de' => $urlDe, default => $urlFr },
        'author' => [
            '@type' => 'Person',
            'name' => $article->art_auteur ?? 'Obvious Way',
        ],
        'publisher' => [
            '@type' => 'Organization',
            'name' => 'Obvious Way',
            'logo' => ['@type' => 'ImageObject', 'url' => asset('assets/logo.png')],
        ],
    ];
@endphp

<x-layouts.app
    :seo-title="$seoTitle"
    :seo-description="$seoDescription"
    og-type="article"
    :url-fr="$urlFr"
    :url-en="$urlEn"
    :article-schema="$articleSchema"
>
    <div id="custom-cursor" aria-hidden="true"></div>
    <div id="cursor-dot" aria-hidden="true"></div>

    <header class="relative z-10 flex items-center justify-between px-6 py-6 md:px-10">
        <a href="{{ route('home', ['locale' => $locale]) }}" class="flex items-center">
            <img src="{{ asset('assets/logo.png') }}" alt="Obvious Way" class="h-16 w-auto object-contain" width="64" height="64" loading="lazy" />
            <span class="-ml-3 font-serif text-lg tracking-tight text-cream">Obvious <em class="text-gradient-gold not-italic">Way</em></span>
        </a>
        <div class="flex items-center gap-1 rounded-full border border-gold/20 bg-navy-deep/60 px-3 py-1.5 text-xs uppercase tracking-widest text-cream/60 backdrop-blur">
            <a href="{{ route('articles.show', ['locale' => 'fr', 'slug' => $article->art_slug]) }}" @if($locale === 'fr') aria-current="true" @endif class="{{ $locale === 'fr' ? 'text-gold' : 'hover:text-gold' }} px-1">FR</a>
            <span class="text-cream/30">/</span>
            <a href="{{ route('articles.show', ['locale' => 'en', 'slug' => $article->art_slug]) }}" @if($locale === 'en') aria-current="true" @endif class="{{ $locale === 'en' ? 'text-gold' : 'hover:text-gold' }} px-1">EN</a>
            <span class="text-cream/30">/</span>
            <a href="{{ route('articles.show', ['locale' => 'de', 'slug' => $article->art_slug]) }}" @if($locale === 'de') aria-current="true" @endif class="{{ $locale === 'de' ? 'text-gold' : 'hover:text-gold' }} px-1">DE</a>
        </div>
    </header>

    <main class="relative z-10 mx-auto max-w-7xl px-6 pb-24 pt-2 md:px-10">
        <a href="{{ route('home', ['locale' => $locale]) }}#actualites" class="inline-flex items-center gap-2 text-sm text-gold hover:text-gold-soft">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
            {{ lpick('Retour aux actualités', 'Back to news', 'Zurück zu den Neuigkeiten') }}
        </a>

        <article class="mt-6">
            <div class="text-[11px] uppercase tracking-[0.2em] text-gold">{{ $article->tradLabel() }}</div>
            <h1 class="mt-3 font-serif text-3xl leading-tight text-cream md:text-4xl">{{ $article->trad('title') }}</h1>
            <div class="mt-5 flex items-center gap-3">
                <div class="grid h-9 w-9 place-items-center rounded-full text-xs text-navy-deep" style="background: var(--gradient-gold);">{{ $article->art_initiales }}</div>
                <span class="text-xs text-cream/60">{{ $article->art_auteur ?? $article->trad('meta') }}</span>
            </div>
            <div class="article-content relative z-10 mt-8 rounded-2xl bg-white p-8 shadow-2xl text-sm text-navy-deep/80 md:p-12">
                {!! str($article->trad('contenu') ?? '')->sanitizeHtml() !!}
            </div>
        </article>
    </main>
</x-layouts.app>