@extends('layouts.nova')

@section('meta-description', $meta['description'] ?? '')

@push('head')
    <title>{{ $meta['title'] ?? 'Nova Card Lineage - Skinbase Nova' }}</title>
    <link rel="canonical" href="{{ $meta['canonical'] ?? route('cards.lineage', ['slug' => $card['slug'], 'id' => $card['id']]) }}" />
    @if(!empty($meta['robots']))
        <meta name="robots" content="{{ $meta['robots'] }}" />
    @endif
@endpush

@section('content')
    <section class="px-6 pt-8 md:px-10">
        <div class="rounded-[34px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_38%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.88))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)] md:p-8">
            <p class="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/75">Remix lineage</p>
            <h1 class="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white md:text-5xl">{{ $card['title'] }}</h1>
            <p class="mt-4 max-w-3xl text-sm leading-7 text-slate-300 md:text-base">Trace this card back to its root, then browse the rest of the family that grew from the same original.</p>
        </div>
    </section>

    <section class="px-6 pt-8 md:px-10">
        <div class="rounded-[28px] border border-white/10 bg-white/[0.04] p-5">
            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">Trail</p>
            <div class="mt-4 flex flex-wrap items-center gap-3">
                @foreach($trail as $index => $item)
                    <a href="{{ $item['public_url'] }}" class="rounded-2xl border {{ $item['id'] === $card['id'] ? 'border-sky-300/35 bg-sky-400/10 text-sky-100' : 'border-white/10 bg-white/[0.03] text-white' }} px-4 py-3 text-sm font-semibold transition hover:bg-white/[0.05]">{{ $item['title'] }}</a>
                    @if($index < count($trail) - 1)
                        <span class="text-slate-500"><i class="fa-solid fa-arrow-right"></i></span>
                    @endif
                @endforeach
            </div>
        </div>
    </section>

    <section class="px-6 pt-8 md:px-10">
        <div class="grid gap-6 xl:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
            <div class="rounded-[28px] border border-white/10 bg-white/[0.04] p-5">
                <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">Root card</p>
                <div class="mt-4">
                    @include('cards.partials.tile', ['card' => $rootCard])
                </div>
            </div>
            <div class="rounded-[28px] border border-white/10 bg-white/[0.04] p-5">
                <div class="flex items-center justify-between gap-4">
                    <div>
                        <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">Family variants</p>
                        <h2 class="mt-1 text-2xl font-semibold text-white">Cards in this remix branch</h2>
                    </div>
                    <a href="{{ $card['public_url'] }}" class="rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]">Back to card</a>
                </div>
                <div class="mt-4 grid gap-4 sm:grid-cols-2">
                    @foreach($familyCards as $familyCard)
                        @include('cards.partials.tile', ['card' => $familyCard])
                    @endforeach
                </div>
            </div>
        </div>
    </section>
@endsection