@extends('layouts.app')

@section('title', $project['title'] . ' | IBS Projects')
@section('description', $project['description'])

@section('content')

<x-subpage-hero 
    title="{{ $project->title }}" 
    description="{{ $project->description }}"
/>

<x-breadcrumbs :items="[
    ['name' => 'Projects', 'url' => route('projects')],
    ['name' => $project->title]
]" />

<section class="py-16 bg-gray-100">
    <div class="max-w-6xl mx-auto px-6">
        <div class="grid md:grid-cols-3 gap-12">
            <div class="md:col-span-2" data-aos="fade-up">
                <h2 class="text-3xl font-bold text-gray-800 mb-6">Project Overview</h2>
                <p class="text-lg text-gray-700 leading-relaxed mb-8">
                    {{ $project->description }}
                </p>

                @if(!empty($project->scope))
                <h3 class="text-2xl font-heading mb-4 text-ibs-dark">Scope of Work</h3>
                <ul class="list-disc list-inside text-gray-600 space-y-2 mb-8">
                    @foreach($project->scope as $item)
                        <li>{{ $item }}</li>
                    @endforeach
                </ul>
                @endif

                {{-- Dynamic Content Area (e.g., more detailed description, challenges, solutions) --}}
                @if(!empty($project->details))
                <h3 class="text-2xl font-heading mb-4 text-ibs-dark">Detailed Description</h3>
                <div class="prose max-w-none text-gray-700 leading-relaxed">
                    {!! $project->details !!}
                </div>
                @endif
            </div>

            <div class="md:col-span-1" data-aos="fade-up" data-aos-delay="200">
                <div class="bg-gray-100 p-8 rounded-lg shadow-md">
                    <h3 class="text-2xl font-heading mb-6 text-ibs-dark">Project Information</h3>
                    <ul class="text-gray-700 space-y-3">
                        <li><strong>Client:</strong> {{ $project->client }}</li>
                        <li><strong>Location:</strong> {{ $project->location }}</li>
                        <li><strong>Timeline:</strong> {{ $project->timeline }}</li>
                        <li><strong>Completed:</strong> {{ $project->completed_date ? $project->completed_date->format('M d, Y') : 'N/A' }}</li>
                    </ul>
                </div>

                {{-- Key Features/Highlights Section --}}
                @if(!empty($project->highlights))
                <div class="bg-yellow-50 p-8 rounded-lg shadow-md mt-8">
                    <h3 class="text-2xl font-heading mb-6 text-yellow-700">Key Highlights</h3>
                    <ul class="text-yellow-800 space-y-3 list-disc list-inside">
                        @foreach($project->highlights as $highlight)
                            <li>{{ $highlight }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>

@if($project->images->isNotEmpty())
<section class="py-16 bg-ibs-light">
    <div class="max-w-6xl mx-auto px-6">
        <x-section-heading title="Gallery" subtitle="Project visuals and progress." />
        <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-6">
            @foreach($project->images as $image)
                <img src="{{ asset('storage/' . $image->image_path) }}" alt="Project Image" class="w-full h-auto object-cover rounded-lg shadow-md" loading="lazy">
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection