@extends('layouts.app')
@section('title', __('home.changelog'))

@section('css')
<style>
    /* —— Posify Changelog — enterprise layout (scoped) —— */
    .cl-pro {
        --cl-surface: #ffffff;
        --cl-surface-2: rgba(255, 255, 255, 0.72);
        --cl-border: rgba(15, 23, 42, 0.08);
        --cl-border-strong: rgba(15, 23, 42, 0.12);
        --cl-text: #0f172a;
        --cl-muted: #64748b;
        --cl-subtle: #94a3b8;
        --cl-accent: #4f46e5;
        --cl-accent-2: #7c3aed;
        --cl-radius: 16px;
        --cl-radius-lg: 24px;
        --cl-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 24px -4px rgba(15, 23, 42, 0.08);
        --cl-shadow-hover: 0 8px 32px -8px rgba(79, 70, 229, 0.18), 0 2px 8px rgba(15, 23, 42, 0.06);
        min-height: calc(100vh - 120px);
        position: relative;
        isolation: isolate;
        font-feature-settings: "kern" 1, "liga" 1;
    }

    .cl-pro__ambient {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.16), transparent 55%),
            radial-gradient(900px 500px at 90% 0%, rgba(168, 85, 247, 0.12), transparent 50%),
            radial-gradient(700px 400px at 50% 100%, rgba(14, 165, 233, 0.06), transparent 45%),
            linear-gradient(180deg, #f1f5f9 0%, #f8fafc 40%, #f1f5f9 100%);
    }

    .cl-pro__ambient::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.45;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='1' cy='1' r='1' fill='%2394a3b8' fill-opacity='0.22'/%3E%3C/svg%3E");
        background-size: 48px 48px;
        mask-image: linear-gradient(180deg, black 0%, transparent 85%);
    }

    .cl-pro__wrap {
        position: relative;
        z-index: 1;
        max-width: 1200px;
        margin-inline: auto;
        padding: 1.5rem 1rem 3rem;
    }
    @media (min-width: 768px) {
        .cl-pro__wrap { padding: 2rem 1.5rem 4rem; }
    }

    .cl-pro__crumb {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--cl-muted);
    }
    .cl-pro__crumb a {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        color: var(--cl-accent);
        text-decoration: none;
        transition: color 0.15s ease, opacity 0.15s ease;
    }
    .cl-pro__crumb a:hover { color: #4338ca; }
    .cl-pro__crumb a:focus-visible {
        outline: 2px solid var(--cl-accent);
        outline-offset: 3px;
        border-radius: 4px;
    }

    .cl-pro__hero {
        margin-bottom: 2.5rem;
        border-radius: var(--cl-radius-lg);
        border: 1px solid var(--cl-border);
        background: linear-gradient(135deg, var(--cl-surface) 0%, rgba(255, 255, 255, 0.92) 100%);
        box-shadow: var(--cl-shadow);
        overflow: hidden;
    }

    .cl-pro__hero-accent {
        height: 4px;
        background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 45%, #a855f7 75%, #c026d3 100%);
    }

    .cl-pro__hero-body {
        padding: 1.75rem 1.5rem 2rem;
    }
    @media (min-width: 640px) {
        .cl-pro__hero-body { padding: 2rem 2rem 2.25rem; }
    }

    .cl-pro__hero-grid {
        display: grid;
        gap: 1.75rem;
        align-items: start;
    }
    @media (min-width: 1024px) {
        .cl-pro__hero-grid {
            grid-template-columns: 1fr auto;
            gap: 2.5rem;
        }
    }

    .cl-pro__eyebrow {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--cl-accent);
        margin: 0 0 0.5rem;
    }

    .cl-pro__title {
        margin: 0;
        font-size: clamp(1.75rem, 4vw, 2.375rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.15;
        color: var(--cl-text);
    }

    .cl-pro__lead {
        margin: 1rem 0 0;
        max-width: 42rem;
        font-size: 0.9375rem;
        line-height: 1.65;
        color: var(--cl-muted);
    }

    .cl-pro__stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: 0.75rem;
        min-width: 0;
    }
    @media (min-width: 1024px) {
        .cl-pro__stats {
            min-width: 280px;
        }
    }

    .cl-pro__stat {
        border-radius: 12px;
        border: 1px solid var(--cl-border);
        background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
        padding: 0.875rem 1rem;
    }
    .cl-pro__stat-label {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--cl-subtle);
        margin: 0 0 0.25rem;
    }
    .cl-pro__stat-value {
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--cl-text);
        letter-spacing: -0.02em;
    }

    .cl-pro__layout {
        display: grid;
        gap: 2rem;
        align-items: start;
    }
    .cl-pro__layout-main { order: 1; }
    .cl-pro__layout-toc { order: 2; }
    @media (min-width: 1024px) {
        .cl-pro__layout {
            grid-template-columns: 240px minmax(0, 1fr);
            gap: 2.5rem;
        }
        .cl-pro__layout-toc { order: 1; }
        .cl-pro__layout-main { order: 2; }
    }

    .cl-pro__toc {
        position: sticky;
        top: 1rem;
        border-radius: var(--cl-radius);
        border: 1px solid var(--cl-border);
        background: var(--cl-surface-2);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 1.125rem 1rem;
        box-shadow: var(--cl-shadow);
    }
    .cl-pro__toc-title {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--cl-subtle);
        margin: 0 0 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--cl-border);
    }
    .cl-pro__toc-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .cl-pro__toc-list li { margin: 0; }
    .cl-pro__toc-list a {
        display: block;
        padding: 0.5rem 0.5rem;
        margin: 0 -0.25rem;
        border-radius: 8px;
        font-size: 0.8125rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--cl-muted);
        text-decoration: none;
        transition: background 0.15s ease, color 0.15s ease;
        border-inline-start: 3px solid transparent;
    }
    .cl-pro__toc-list a:hover {
        background: rgba(79, 70, 229, 0.06);
        color: var(--cl-accent);
    }
    .cl-pro__toc-list a:focus-visible {
        outline: 2px solid var(--cl-accent);
        outline-offset: 1px;
    }

    .cl-pro__release {
        scroll-margin-top: 6rem;
        border-radius: var(--cl-radius-lg);
        border: 1px solid var(--cl-border);
        background: var(--cl-surface);
        box-shadow: var(--cl-shadow);
        overflow: hidden;
        transition: box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .cl-pro__release:hover {
        box-shadow: var(--cl-shadow-hover);
        border-color: rgba(79, 70, 229, 0.15);
    }

    .cl-pro__release-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.5rem 1.5rem 1.25rem;
        border-bottom: 1px solid var(--cl-border);
        background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    }
    @media (min-width: 640px) {
        .cl-pro__release-head { padding: 1.75rem 2rem 1.5rem; }
    }

    .cl-pro__release-ver-label {
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--cl-subtle);
        margin: 0 0 0.375rem;
    }
    .cl-pro__release-ver {
        margin: 0;
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
        color: var(--cl-text);
    }

    .cl-pro__release-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
    }

    .cl-pro__pill {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 0.875rem;
        border-radius: 9999px;
        font-size: 0.8125rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: #334155;
        background: #f1f5f9;
        border: 1px solid var(--cl-border);
    }
    .cl-pro__pill i { color: var(--cl-accent); opacity: 0.85; }

    .cl-pro__release-body { padding: 0; }

    .cl-pro__items {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cl-pro__row {
        display: flex;
        gap: 1rem;
        padding: 1.125rem 1.5rem;
        border-bottom: 1px solid var(--cl-border);
        transition: background 0.15s ease;
    }
    @media (min-width: 640px) {
        .cl-pro__row { padding: 1.25rem 2rem; }
    }
    .cl-pro__row:last-child { border-bottom: none; }
    .cl-pro__row:hover { background: rgba(248, 250, 252, 0.9); }

    .cl-pro__row-accent {
        flex-shrink: 0;
        width: 4px;
        border-radius: 4px;
        margin-top: 0.2rem;
    }

    .cl-pro__icon {
        flex-shrink: 0;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8125rem;
        color: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    }

    .cl-pro__row-main { min-width: 0; flex: 1; padding-top: 0.1rem; }

    .cl-pro__badge {
        display: inline-block;
        margin-bottom: 0.375rem;
        padding: 0.2rem 0.5rem;
        border-radius: 6px;
        font-size: 0.625rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .cl-pro__row-text {
        margin: 0;
        font-size: 0.9375rem;
        line-height: 1.65;
        color: #334155;
    }

    .cl-pro__empty {
        text-align: center;
        padding: 3.5rem 1.5rem;
        border-radius: var(--cl-radius-lg);
        border: 1px dashed var(--cl-border-strong);
        background: rgba(255, 255, 255, 0.6);
    }
    .cl-pro__empty-icon {
        width: 4rem;
        height: 4rem;
        margin: 0 auto 1.25rem;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
        color: #94a3b8;
        font-size: 1.5rem;
    }
    .cl-pro__empty p { margin: 0; color: var(--cl-muted); max-width: 28rem; margin-inline: auto; line-height: 1.6; }
    .cl-pro__empty .cl-pro__empty-hint { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--cl-subtle); }

    .cl-pro__footer {
        margin-top: 3rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--cl-border);
        font-size: 0.75rem;
        line-height: 1.6;
        color: var(--cl-subtle);
        max-width: 48rem;
    }

    @keyframes cl-pro-in {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .cl-pro [data-cl-animate] {
        animation: cl-pro-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
    .cl-pro [data-cl-animate]:nth-child(1) { animation-delay: 0.04s; }
    .cl-pro [data-cl-animate]:nth-child(2) { animation-delay: 0.1s; }
    .cl-pro [data-cl-animate]:nth-child(3) { animation-delay: 0.16s; }
    .cl-pro [data-cl-animate]:nth-child(4) { animation-delay: 0.22s; }
    .cl-pro [data-cl-animate]:nth-child(5) { animation-delay: 0.28s; }
    .cl-pro [data-cl-animate]:nth-child(6) { animation-delay: 0.34s; }

    @media (prefers-reduced-motion: reduce) {
        .cl-pro [data-cl-animate] { animation: none; }
    }
</style>
@endsection

@section('content')

@php
    $typeMeta = function (string $type): array {
        return match ($type) {
            'changed' => [
                'label' => __('home.changelog_type_changed'),
                'icon' => 'fa fa-random',
                'accent' => 'linear-gradient(180deg, #f59e0b, #ea580c)',
                'bar' => '#f59e0b',
                'badge' => 'background:#fffbeb;color:#b45309;border:1px solid #fde68a;',
            ],
            'fixed' => [
                'label' => __('home.changelog_type_fixed'),
                'icon' => 'fa fa-wrench',
                'accent' => 'linear-gradient(180deg, #10b981, #059669)',
                'bar' => '#10b981',
                'badge' => 'background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;',
            ],
            'removed' => [
                'label' => __('home.changelog_type_removed'),
                'icon' => 'fa fa-minus',
                'accent' => 'linear-gradient(180deg, #fb7185, #e11d48)',
                'bar' => '#f43f5e',
                'badge' => 'background:#fff1f2;color:#be123c;border:1px solid #fecdd3;',
            ],
            default => [
                'label' => __('home.changelog_type_added'),
                'icon' => 'fa fa-plus',
                'accent' => 'linear-gradient(180deg, #6366f1, #4f46e5)',
                'bar' => '#6366f1',
                'badge' => 'background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;',
            ],
        };
    };

    $releaseCount = is_countable($releases) ? count($releases) : 0;
    $lastUpdated = null;
    if (!empty($releases)) {
        $dates = collect($releases)->pluck('date')->filter();
        $lastUpdated = $dates->isNotEmpty() ? $dates->max() : null;
    }
    $appVersion = (string) config('author.app_version', '');
@endphp

<div class="cl-pro content tw-w-full">
    <div class="cl-pro__ambient" aria-hidden="true"></div>

    <div class="cl-pro__wrap">
        <nav class="cl-pro__crumb" aria-label="breadcrumb">
            <a href="{{ route('home') }}">
                <i class="fa fa-arrow-left" aria-hidden="true"></i>
                @lang('home.changelog_back_dashboard')
            </a>
        </nav>

        <header class="cl-pro__hero" data-cl-animate>
            <div class="cl-pro__hero-accent"></div>
            <div class="cl-pro__hero-body">
                <div class="cl-pro__hero-grid">
                    <div>
                        <p class="cl-pro__eyebrow">@lang('home.changelog_eyebrow')</p>
                        <h1 class="cl-pro__title">@lang('home.changelog')</h1>
                        <p class="cl-pro__lead">@lang('home.changelog_intro')</p>
                    </div>
                    <div class="cl-pro__stats">
                        <div class="cl-pro__stat">
                            <p class="cl-pro__stat-label">@lang('home.changelog_app_version_label')</p>
                            <p class="cl-pro__stat-value">{{ $appVersion !== '' ? $appVersion : '—' }}</p>
                        </div>
                        @if (!empty($releases))
                            <div class="cl-pro__stat">
                                <p class="cl-pro__stat-label">@lang('home.changelog_releases_label')</p>
                                <p class="cl-pro__stat-value">{{ $releaseCount }}</p>
                            </div>
                            @if ($lastUpdated)
                                <div class="cl-pro__stat">
                                    <p class="cl-pro__stat-label">@lang('home.changelog_stat_updated')</p>
                                    <p class="cl-pro__stat-value">{{ \Carbon\Carbon::parse($lastUpdated)->format('M j, Y') }}</p>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </header>

        @if (empty($releases))
            <div class="cl-pro__empty" data-cl-animate style="margin-top:2rem;">
                <div class="cl-pro__empty-icon" aria-hidden="true"><i class="fa fa-inbox"></i></div>
                <p>@lang('home.changelog_empty')</p>
                <p class="cl-pro__empty-hint">@lang('home.changelog_empty_hint')</p>
            </div>
        @else
            <div class="cl-pro__layout" style="margin-top:2rem;">
                <aside class="cl-pro__toc cl-pro__layout-toc" aria-labelledby="cl-toc-heading" data-cl-animate>
                    <p id="cl-toc-heading" class="cl-pro__toc-title">@lang('home.changelog_on_this_page')</p>
                    <ul class="cl-pro__toc-list">
                        @foreach ($releases as $release)
                            <li>
                                <a href="#cl-release-{{ $loop->index }}">
                                    {{ $release['version'] ?? __('home.changelog_version') }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </aside>

                <div class="cl-pro__layout-main">
                    <ol class="tw-list-none tw-p-0 tw-m-0 tw-space-y-8">
                        @foreach ($releases as $release)
                            <li data-cl-animate>
                                <article id="cl-release-{{ $loop->index }}" class="cl-pro__release">
                                    <div class="cl-pro__release-head">
                                        <div>
                                            <p class="cl-pro__release-ver-label">@lang('home.changelog_version')</p>
                                            <h2 class="cl-pro__release-ver">{{ $release['version'] ?? '—' }}</h2>
                                        </div>
                                        <div class="cl-pro__release-meta">
                                            @if (!empty($release['date']))
                                                <span class="cl-pro__pill">
                                                    <i class="far fa-calendar-alt" aria-hidden="true"></i>
                                                    <time datetime="{{ $release['date'] }}">{{ \Carbon\Carbon::parse($release['date'])->format('M j, Y') }}</time>
                                                </span>
                                            @endif
                                            @php
                                                $itemCount = count($release['items'] ?? []);
                                            @endphp
                                            @if ($itemCount > 0)
                                                <span class="cl-pro__pill">
                                                    <i class="fa fa-list-ul" aria-hidden="true"></i>
                                                    {{ __('home.changelog_stat_items', ['count' => $itemCount]) }}
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <ul class="cl-pro__release-body cl-pro__items">
                                        @foreach ($release['items'] ?? [] as $item)
                                            @php
                                                $type = $item['type'] ?? 'added';
                                                $meta = $typeMeta($type);
                                            @endphp
                                            <li class="cl-pro__row">
                                                <span class="cl-pro__row-accent" style="background: {{ $meta['bar'] }};"></span>
                                                <span class="cl-pro__icon" style="background: {{ $meta['accent'] }};">
                                                    <i class="{{ $meta['icon'] }}" aria-hidden="true"></i>
                                                </span>
                                                <div class="cl-pro__row-main">
                                                    <span class="cl-pro__badge" style="{{ $meta['badge'] }}">{{ $meta['label'] }}</span>
                                                    <p class="cl-pro__row-text">{{ $item['text'] ?? '' }}</p>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                </article>
                            </li>
                        @endforeach
                    </ol>
                </div>
            </div>
        @endif

        <footer class="cl-pro__footer" data-cl-animate>
            {{ __('home.changelog_footer_note', ['version' => $appVersion !== '' ? $appVersion : '—']) }}
        </footer>
    </div>
</div>

@endsection