{{--
    Stories index — /stories
    Uses ContentLayout.
--}}
@extends('layouts.nova.content-layout')

@php
    $hero_title       = 'Skinbase Stories';
    $hero_description = 'Artist interviews, community spotlights, tutorials and announcements.';
@endphp

@push('head')
    {{-- WebSite / Blog structured data --}}
    <script type="application/ld+json">
    {!! json_encode([
        '@context'        => 'https://schema.org',
        '@type'           => 'Blog',
        'name'            => 'Skinbase Stories',
        'description'     => 'Artist interviews, community spotlights, tutorials and announcements from Skinbase.',
        'url'             => url('/stories'),
        'publisher'       => ['@type' => 'Organization', 'name' => 'Skinbase', 'url' => url('/')],
    ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    </script>
@endpush

@section('page-content')

{{-- Featured story hero --}}
@if($featured)
    <a href="{{ $featured->url }}"
       class="group block rounded-2xl border border-white/[0.06] bg-white/[0.02] overflow-hidden hover:bg-white/[0.04] transition-colors mb-10">
        <div class="md:flex">
            @if($featured->cover_url)
                <div class="md:w-1/2 aspect-video md:aspect-auto overflow-hidden bg-nova-900">
                    <img src="{{ $featured->cover_url }}" alt="{{ $featured->title }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                         loading="eager" />
                </div>
            @else
                <div class="md:w-1/2 aspect-video md:aspect-auto bg-gradient-to-br from-sky-900/40 to-purple-900/40 flex items-center justify-center">
                    <i class="fa-solid fa-star text-4xl text-white/20"></i>
                </div>
            @endif
            <div class="md:w-1/2 p-8 flex flex-col justify-center">
                <div class="mb-3">
                    <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium bg-yellow-400/10 text-yellow-300 border border-yellow-400/20">
                        <i class="fa-solid fa-star text-[10px]"></i> Featured
                    </span>
                </div>
                <h2 class="text-2xl font-bold text-white group-hover:text-sky-300 transition-colors leading-snug">
                    {{ $featured->title }}
                </h2>
                @if($featured->excerpt)
                    <p class="mt-3 text-sm text-white/50 line-clamp-3">{{ $featured->excerpt }}</p>
                @endif
                <div class="mt-5 flex items-center gap-3 text-xs text-white/30">
                    @if($featured->author)
                        <span class="flex items-center gap-1.5">
                            @if($featured->author->avatar_url)
                                <img src="{{ $featured->author->avatar_url }}" alt="{{ $featured->author->name }}"
                                     class="w-5 h-5 rounded-full object-cover" />
                            @endif
                            {{ $featured->author->name }}
                        </span>
                        <span>·</span>
                    @endif
                    @if($featured->published_at)
                        <time datetime="{{ $featured->published_at->toIso8601String() }}">
                            {{ $featured->published_at->format('M j, Y') }}
                        </time>
                        <span>·</span>
                    @endif
                    <span>{{ $featured->reading_time }} min read</span>
                </div>
            </div>
        </div>
    </a>
@endif

{{-- Stories grid --}}
@if($stories->isNotEmpty())
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        @foreach($stories as $story)
            @if($featured && $story->id === $featured->id)
                @continue
            @endif
            <a href="{{ $story->url }}"
               class="group block rounded-xl border border-white/[0.06] bg-white/[0.02] overflow-hidden hover:bg-white/[0.05] transition-colors">
                @if($story->cover_url)
                    <div class="aspect-video bg-nova-800 overflow-hidden">
                        <img src="{{ $story->cover_url }}" alt="{{ $story->title }}"
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                             loading="lazy" />
                    </div>
                @else
                    <div class="aspect-video bg-gradient-to-br from-sky-900/20 to-indigo-900/20 flex items-center justify-center">
                        <i class="fa-solid fa-feather-pointed text-3xl text-white/15"></i>
                    </div>
                @endif

                <div class="p-5">
                    {{-- Tags --}}
                    @if($story->tags->isNotEmpty())
                        <div class="flex flex-wrap gap-1.5 mb-3">
                            @foreach($story->tags->take(3) as $tag)
                                <span class="rounded-full px-2 py-0.5 text-[11px] font-medium bg-sky-500/10 text-sky-400 border border-sky-500/20">
                                    #{{ $tag->name }}
                                </span>
                            @endforeach
                        </div>
                    @endif

                    <h2 class="text-base font-semibold text-white group-hover:text-sky-300 transition-colors line-clamp-2 leading-snug">
                        {{ $story->title }}
                    </h2>

                    @if($story->excerpt)
                        <p class="mt-2 text-sm text-white/45 line-clamp-2">{{ $story->excerpt }}</p>
                    @endif

                    <div class="mt-4 flex items-center gap-2 text-xs text-white/30">
                        @if($story->author)
                            <span class="flex items-center gap-1.5">
                                @if($story->author->avatar_url)
                                    <img src="{{ $story->author->avatar_url }}" alt="{{ $story->author->name }}"
                                         class="w-4 h-4 rounded-full object-cover" />
                                @endif
                                {{ $story->author->name }}
                            </span>
                            <span>·</span>
                        @endif
                        @if($story->published_at)
                            <time datetime="{{ $story->published_at->toIso8601String() }}">
                                {{ $story->published_at->format('M j, Y') }}
                            </time>
                            <span>·</span>
                        @endif
                        <span>{{ $story->reading_time }} min read</span>
                    </div>
                </div>
            </a>
        @endforeach
    </div>

    <div class="mt-10 flex justify-center">
        {{ $stories->withQueryString()->links() }}
    </div>
@else
    <div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-16 text-center">
        <i class="fa-solid fa-feather-pointed text-4xl text-white/20 mb-4 block"></i>
        <p class="text-white/40 text-sm">No stories published yet. Check back soon!</p>
    </div>
@endif

@endsection