@extends('layouts.app')
@php $active_page = 'portfolio'; @endphp

@push('extra_head')
<title>{{ $item->title }} | Extensive Creativity Services Limited</title>
<meta name="description" content="{{ Str::limit($item->description, 150) }}">
@endpush

@section('content')
<main>
    <section class="relative pt-32 pb-20 bg-slate-50 min-h-[60vh] flex items-center overflow-hidden">
        <div class="absolute inset-0 z-0">
            <img src="{{ url($item->image_path) }}" alt="{{ $item->title }}" class="w-full h-full object-cover opacity-20 filter grayscale blur-sm">
            <div class="absolute inset-0 bg-gradient-to-t from-slate-50 via-slate-50/80 to-transparent"></div>
        </div>
        
        <div class="container mx-auto px-6 relative z-10">
            <div class="max-w-4xl mx-auto text-center">
                <span class="text-brand-primary font-bold uppercase tracking-widest text-sm mb-4 block">{{ $item->category }}</span>
                <h1 class="text-4xl md:text-6xl font-extrabold text-slate-900 mb-6 leading-tight">{{ $item->title }}</h1>
            </div>
        </div>
    </section>

    <section class="py-16 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto">
                <img src="{{ url($item->image_path) }}" alt="{{ $item->title }}" class="w-full h-auto rounded-3xl shadow-2xl mb-16 -mt-32 relative z-20">
                
                <div class="prose prose-lg prose-slate max-w-none">
                    <h2 class="text-3xl font-bold text-slate-900 mb-6">Project Overview</h2>
                    <p class="text-slate-600 leading-relaxed whitespace-pre-line text-lg">{{ $item->description }}</p>
                </div>

                <div class="mt-16 pt-16 border-t border-slate-100 flex items-center justify-between">
                    <div>
                        <h4 class="text-sm font-bold text-slate-400 uppercase tracking-widest mb-2">Category</h4>
                        <p class="text-lg font-bold text-slate-900">{{ $item->category }}</p>
                    </div>
                    <a href="{{ route('home') }}#portfolio" class="inline-flex items-center text-brand-primary font-bold hover:text-brand-accent transition">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"></path></svg>
                        Back to Portfolio
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-20 bg-brand-dark text-white">
        <div class="container mx-auto px-6 text-center reveal">
            <h2 class="text-3xl font-bold mb-6">Inspired by this project?</h2>
            <p class="text-slate-300 mb-8 max-w-2xl mx-auto">Let's discuss how we can bring similar innovation to your business.</p>
            <a href="{{ route('contact') }}" class="inline-block px-8 py-4 bg-brand-primary text-white font-bold rounded-full hover:bg-brand-accent transition shadow-lg shadow-brand-primary/30 border border-white/10">Start a Project</a>
        </div>
    </section>
</main>
@endsection
