@extends('layouts.app')

@section('title', 'Our Portfolio')

@section('content')
<!-- Hero Section -->
<section class="relative py-20 bg-primary text-white">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Our Portfolio</h1>
            <p class="text-xl opacity-90">Explore our successful projects and case studies that demonstrate our expertise in financial consulting.</p>
        </div>
    </div>
</section>

<!-- Portfolio Section -->
<section class="py-20">
    <div class="container mx-auto px-4">
        <!-- Portfolio Filter -->
        <div class="flex flex-wrap justify-center gap-4 mb-12">
            <button class="filter-btn active">All Projects</button>
            <button class="filter-btn">Financial Planning</button>
            <button class="filter-btn">Investment Advisory</button>
            <button class="filter-btn">Risk Management</button>
        </div>
        
        <!-- Portfolio Grid -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @if($portfolios->count() > 0)
                @foreach($portfolios as $portfolio)
                <div class="card group">
                    <div class="relative overflow-hidden">
                        <img src="{{ asset('storage/' . $portfolio->image) }}" alt="{{ $portfolio->title }}" class="w-full h-64 object-cover group-hover:scale-110 transition duration-500">
                        <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
                            <a href="{{ $portfolio->project_url }}" class="btn btn-white">
                                View Details
                            </a>
                        </div>
                    </div>
                    <div class="p-6">
                        <span class="text-sm text-primary font-semibold">{{ $portfolio->category }}</span>
                        <h3 class="text-xl font-semibold mt-2 mb-3">{{ $portfolio->title }}</h3>
                        <p class="text-gray">{{ $portfolio->description }}</p>
                    </div>
                </div>
                @endforeach
            @endif
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20 bg-primary text-white">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">Have a Project in Mind?</h2>
        <p class="text-xl max-w-2xl mx-auto mb-10">Let's discuss how we can help you achieve your financial goals.</p>
        <a href="{{ route('contact') }}" class="btn btn-white text-primary">
            Get In Touch
        </a>
    </div>
</section>
@endsection