@extends('layouts.app')

@section('title', $caseStudy->title . ' | Case Studies')

@section('content')
<div class="bg-gray-50">
    <!-- Hero Section -->
    <div class="relative">
        @if($caseStudy->image)
            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-50"></div>
            <div class="h-64 md:h-96 w-full bg-cover bg-center" style="background-image: url('{{ asset('storage/case-studies/' . $caseStudy->image) }}')"></div>
        @else
            <div class="h-64 md:h-96 w-full bg-gradient-to-r from-red-800 to-red-500"></div>
        @endif
        
        <div class="absolute bottom-0 left-0 right-0 p-6 md:p-12 text-white">
            <div class="container mx-auto">
                <div class="flex flex-col md:flex-row md:items-center gap-4">
                    <div class="flex-1">
                        <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-2">{{ $caseStudy->title }}</h1>
                        <p class="text-lg md:text-xl opacity-90">{{ $caseStudy->client }}</p>
                    </div>
                    <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur px-4 py-3 rounded-lg">
                        <div class="text-sm uppercase tracking-wide">Sector</div>
                        <div class="font-semibold">{{ $caseStudy->sector }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Main Content -->
    <div class="container mx-auto py-12 px-4">
        <div class="max-w-4xl mx-auto">
            <!-- Summary -->
            <div class="mb-12">
                <h2 class="text-2xl md:text-3xl font-bold mb-6">Project Overview</h2>
                <p class="text-lg text-gray-700 leading-relaxed">{{ $caseStudy->summary }}</p>
                
                <!-- Project Details -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                    @if($caseStudy->completion_date)
                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                        <h3 class="font-semibold text-gray-600 mb-2">Completion Date</h3>
                        <p class="text-gray-900">{{ $caseStudy->completion_date->format('F Y') }}</p>
                    </div>
                    @endif
                    
                    @if($caseStudy->project_duration)
                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                        <h3 class="font-semibold text-gray-600 mb-2">Project Duration</h3>
                        <p class="text-gray-900">{{ $caseStudy->project_duration }}</p>
                    </div>
                    @endif
                </div>
            </div>
            
            <!-- Challenge, Solution, Results -->
            <div class="space-y-16">
                <!-- The Challenge -->
                <div>
                    <div class="flex items-center mb-6">
                        <div class="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center mr-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold">The Challenge</h2>
                    </div>
                    <div class="pl-16">
                        <p class="text-lg text-gray-700 leading-relaxed whitespace-pre-line">{{ $caseStudy->challenge }}</p>
                    </div>
                </div>
                
                <!-- The Solution -->
                <div>
                    <div class="flex items-center mb-6">
                        <div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold">Our Solution</h2>
                    </div>
                    <div class="pl-16">
                        <p class="text-lg text-gray-700 leading-relaxed whitespace-pre-line">{{ $caseStudy->solution }}</p>
                    </div>
                </div>
                
                <!-- The Results -->
                <div>
                    <div class="flex items-center mb-6">
                        <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                            </svg>
                        </div>
                        <h2 class="text-2xl md:text-3xl font-bold">The Results</h2>
                    </div>
                    <div class="pl-16">
                        <p class="text-lg text-gray-700 leading-relaxed whitespace-pre-line">{{ $caseStudy->results }}</p>
                    </div>
                </div>
            </div>
            
            <!-- Testimonial -->
            @if($caseStudy->testimonial)
            <div class="my-16 bg-white p-8 rounded-lg shadow-md border-l-4 border-red-500 relative">
                <svg class="absolute top-4 left-4 h-8 w-8 text-red-200 transform -translate-x-6 -translate-y-6" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true">
                    <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
                </svg>
                <blockquote class="relative">
                    <p class="text-lg text-gray-700 leading-relaxed italic">{{ $caseStudy->testimonial }}</p>
                </blockquote>
            </div>
            @endif
            
            <!-- Related Case Studies -->
            @if($relatedCaseStudies->count() > 0)
            <div class="mt-16 pt-12 border-t border-gray-200">
                <h2 class="text-2xl font-bold mb-8">Related Case Studies</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($relatedCaseStudies as $relatedCase)
                    <a href="{{ route('case-studies.show', $relatedCase->slug) }}" class="group">
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden transition-transform duration-300 transform group-hover:-translate-y-1 group-hover:shadow-md">
                            @if($relatedCase->image)
                            <div class="h-48 bg-cover bg-center" style="background-image: url('{{ asset('storage/case-studies/' . $relatedCase->image) }}')"></div>
                            @else
                            <div class="h-48 bg-gradient-to-r from-red-700 to-red-500 flex items-center justify-center">
                                <span class="text-white text-xl font-semibold">{{ $relatedCase->client }}</span>
                            </div>
                            @endif
                            <div class="p-6">
                                <h3 class="text-lg font-semibold mb-2 group-hover:text-red-600">{{ $relatedCase->title }}</h3>
                                <p class="text-sm text-gray-600 mb-2">{{ $relatedCase->sector }}</p>
                                <p class="text-gray-700 line-clamp-3">{{ $relatedCase->summary }}</p>
                            </div>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
            @endif
            
            <!-- Call to Action -->
            <div class="mt-16 pt-12 border-t border-gray-200 text-center">
                <h2 class="text-2xl font-bold mb-4">Ready to start your project?</h2>
                <p class="text-gray-700 mb-8">Contact us today to discuss how we can help you achieve similar results.</p>
                <a href="{{ route('contact') }}" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
                    Get in Touch
                </a>
            </div>
        </div>
    </div>
</div>
@endsection