@extends('layouts.app')

@section('title', $project->name . ' Success Stories - UN-Habitat Nepal')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    <div class="mb-16">
        {{-- <a href="{{ route('projects.index') }}" class="inline-flex items-center space-x-2 text-slate-500 font-semibold mb-8 hover:text-blue-600 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
            <span>All Projects</span>
        </a> --}}

        <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-8">
            <div class="max-w-5xl">
                <div class="flex flex-wrap items-center gap-3 mb-2">
                    @if($project->short_name)
                        <span class="text-blue-600 font-bold uppercase tracking-widest text-sm">{{ $project->short_name }}</span>
                    @endif
                    @if($project->is_completed)
                        <span class="px-2.5 py-0.5 bg-emerald-50 text-emerald-700 border border-emerald-200/60 text-xs font-bold rounded-full uppercase tracking-wider">Completed</span>
                    @else
                        <span class="px-2.5 py-0.5 bg-sky-50 text-sky-700 border border-sky-200/60 text-xs font-bold rounded-full uppercase tracking-wider">Ongoing</span>
                    @endif
                </div>
                <h1 class="text-4xl md:text-5xl font-extrabold mb-6">{{ $project->name }}</h1>
            </div>
            <div class="bg-blue-600 text-white p-8 rounded-3xl shadow-xl shadow-blue-200 shrink-0 text-center">
                <div class="text-4xl font-bold mb-1">{{ $stories->total() }}</div>
                <div class="text-sm font-medium uppercase tracking-widest opacity-80">Impact Stories</div>
            </div>
        </div>
    </div>

    @if($stories->isEmpty())
        <div class="bg-white rounded-3xl p-16 text-center border border-slate-100 shadow-sm">
            <div class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-6 text-slate-300">
                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
            </div>
            <p class="text-xl text-slate-500 font-medium italic">No stories have been published for this project yet.</p>
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
            @foreach($stories as $story)
            @php
                $firstTextBlock = collect($story->content)->firstWhere('type', 'text');
                $summary = $firstTextBlock ? Str::limit(strip_tags($firstTextBlock['data']['content']), 150) : 'Click to read this success story...';
            @endphp
            <div class="story-card bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-sm flex flex-col">
                <div class="relative aspect-video overflow-hidden">
                    @if($story->image)
                        <img src="{{ Storage::url($story->image) }}" alt="{{ $story->image_alt ?: $story->title }}" class="w-full h-full object-cover">
                    @endif
                    @if($story->is_featured)
                        <div class="absolute top-4 right-4">
                            <span class="p-2 bg-amber-500 text-white rounded-full shadow-lg block">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                            </span>
                        </div>
                    @endif
                </div>
                <div class="p-8 flex-1 flex flex-col">
                    <div class="flex items-center space-x-2 text-slate-600 text-xs mb-3 font-bold uppercase tracking-widest">
                        <span>{{ $story->published_date ? $story->published_date->format('M d, Y') : $story->created_at->format('M d, Y') }}</span>
                    </div>
                    <h2 class="text-xl font-bold mb-4 line-clamp-2 group-hover:text-blue-600 transition-colors">{{ $story->title }}</h2>
                    <p class="text-slate-700 line-clamp-3 mb-6 text-sm leading-relaxed">
                        {{ $summary }}
                    </p>
                    <div class="mt-auto">
                        <a href="{{ route('stories.show', $story->slug) }}" class="inline-flex items-center space-x-2 text-blue-800 hover:text-blue-950 font-bold group" aria-label="Read Full Story: {{ $story->title }}">
                            <span>Read Full Story</span>
                            <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div>
            {{ $stories->links() }}
        </div>
    @endif
</div>
@endsection