@extends("layouts.app")

@section('title', '- ' . $project->title)
@section('meta_description', $project->meta_description ?? 'Detailed look at our ' . $project->title . ' interior design project')

@section('content')
<div class="modern-project-detail">
    <!-- Project Hero -->
    <section class="relative h-[70vh] bg-cover bg-center" style="background-image: url('{{ $project->featured_image_url }}')">
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
            <div class="text-center text-white max-w-3xl px-4">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">{{ $project->title }}</h1>
                <p class="text-xl md:text-2xl opacity-80">{{ $project->subtitle }}</p>
            </div>
        </div>
    </section>

    <!-- Project Details -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4 grid md:grid-cols-3 gap-12">
            <!-- Project Overview -->
            <div class="md:col-span-2" data-aos="fade-right">
                <h2 class="text-3xl font-bold mb-8 text-gray-800">Project Overview</h2>
                <div class="prose text-gray-700 leading-relaxed">
                    {!! $project->description !!}
                </div>

                <!-- Project Gallery -->
                <div class="mt-12 grid md:grid-cols-3 gap-6">
                    @foreach($project->images as $image)
                    <div class="group relative overflow-hidden rounded-lg shadow-lg">
                        <img src="/storage/{{ $image->image }}" alt="{{ $project->title }} - {{ $image->caption }}" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition duration-500 flex items-center justify-center">
                            <p class="text-white opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition duration-500">
                                {{ $image->caption }}
                            </p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- Project Metadata -->
            <div data-aos="fade-left">
                <div class="bg-gray-50 p-8 rounded-lg">
                    <h3 class="text-2xl font-bold mb-6 text-gray-800">Project Details</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-semibold text-gray-700">Category</h4>
                            <p class="text-gray-600">{{ $project->category->name }}</p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-700">Location</h4>
                            <p class="text-gray-600">{{ $project->location }}</p>
                        </div>
                        @if($project->completion_date)
                        <div>
                            <h4 class="font-semibold text-gray-700">Completed</h4>
                            <p class="text-gray-600">{{ $project->completion_date->format('F Y') }}</p>
                        </div>
                        @endif
                        @if($project->scale)
                        <div>
                            <h4 class="font-semibold text-gray-700">Project Scale</h4>
                            <p class="text-gray-600">{{ $project->scale }}</p>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Client Testimonial -->
                @if($project->client_testimonial)
                <div class="mt-8 bg-white p-8 rounded-lg shadow-md">
                    <blockquote class="italic text-gray-700 mb-4">
                        "{{ $project->client_testimonial }}"
                    </blockquote>
                    <div class="flex items-center">
                        <img src="@image($project->client_photo)" alt="{{ $project->client_name }}" class="w-12 h-12 rounded-full mr-4 object-cover">
                        <div>
                            <p class="font-semibold text-gray-800">{{ $project->client_name }}</p>
                            <p class="text-sm text-gray-600">{{ $project->client_company }}</p>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </section>

    <!-- Related Projects -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Related Projects</h2>
            <div class="grid md:grid-cols-3 gap-8">
                @foreach($relatedProjects as $relatedProject)
                <div class="group relative overflow-hidden rounded-lg shadow-lg">
                    <img src="{{ $relatedProject->featured_image_url }}" alt="{{ $relatedProject->title }}" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
                    <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-70 transition duration-500 flex flex-col items-center justify-center text-white text-center p-4">
                        <h3 class="text-xl font-bold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition duration-500">
                            {{ $relatedProject->title }}
                        </h3>
                        <a href="{{ route('projects.show', $relatedProject->slug) }}" class="opacity-0 group-hover:opacity-100 mt-4 px-6 py-2 border border-white rounded-full transform translate-y-4 group-hover:translate-y-0 transition duration-500 delay-100">
                            View Project
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
</div>

@push('scripts')
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 1000,
        once: true
    });
</script>
@endpush
@endsection