@extends('layouts.app')

@section('title', 'Completed Projects - Golden Era Property')

@section('content')
<!-- Hero Section -->
<section class="bg-gradient-to-br from-primary-600 to-primary-800 text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-4xl md:text-5xl font-bold mb-4">Completed Projects</h1>
        <p class="text-xl text-gray-100 max-w-2xl">Our legacy of successful projects that have transformed dreams into reality</p>
    </div>
</section>

<!-- Projects Grid -->
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Farm House Phase 1 -->
            <div class="card group">
                <div class="relative h-72 overflow-hidden">
                    <img src="{{ asset('images/completedfarmhouse.jpg') }}" alt="Farm House Phase 1" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Completed</div>
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <h3 class="text-white text-2xl font-bold mb-1">Farm House Phase 1</h3>
                        <p class="text-gray-200">Indlewadi Pura, Anekal Taluk</p>
                    </div>
                </div>
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        <span class="text-gray-600">Indlewadi Pura, Anekal Taluk</span>
                    </div>
                    <p class="text-gray-600 mb-4">GOLDEN ERA HEAVENLY WOODS is a carefully planned farm house project which boast around 20 acres (PHASE 1) of land studded with amenities planned in 10 acres situated at Indlewadi Pura, Anekal Taluk, Bengaluru-south.</p>
                    <div class="flex items-center text-sm text-green-600 mb-4">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        100% Sold Out
                    </div>
                    <a href="{{ url('projects/heavenly-woods') }}" class="btn-outline w-full text-center">View Details</a>
                </div>
            </div>

            <!-- Alta Vista -->
            <div class="card group">
                <div class="relative h-72 overflow-hidden">
                    <img src="{{ asset('images/completedaltavista.jpg') }}" alt="Alta Vista" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Completed</div>
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <h3 class="text-white text-2xl font-bold mb-1">Alta Vista</h3>
                        <p class="text-gray-200">Hosur Highway</p>
                    </div>
                </div>
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        <span class="text-gray-600">Hosur Highway</span>
                    </div>
                    <p class="text-gray-600 mb-4">ALTA VISTA is strategically located beside Hosur highway very close proximity to Electronic city Phase 1 & 2. It possess a peaceful community with an ultramodern structural design without any common walls, a spacious club house and lots of green open spaces.</p>
                    <div class="flex items-center text-sm text-green-600 mb-4">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        100% Sold Out
                    </div>
                    <a href="{{ url('projects/alta-vista') }}" class="btn-outline w-full text-center">View Details</a>
                </div>
            </div>

            <!-- Opera White House -->
            <div class="card group">
                <div class="relative h-72 overflow-hidden">
                    <img src="{{ asset('images/completedoperawhitehouse.jpg') }}" alt="Opera White House" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Completed</div>
                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                    <div class="absolute bottom-4 left-4 right-4">
                        <h3 class="text-white text-2xl font-bold mb-1">Opera White House</h3>
                        <p class="text-gray-200">Gottigere, Bannerughatta Road</p>
                    </div>
                </div>
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        <span class="text-gray-600">Gottigere, Bannerughatta Road</span>
                    </div>
                    <p class="text-gray-600 mb-4">We are happy to inform you about the launch of our apartment project OPERA WHITE HOUSE in mid segment, situated at Gottigere, Bannerughatta road( a kilometer drive from Meenakshi temple). "Opera White House" is a complete blend of excellent quality and simple living @affordable cost.</p>
                    <div class="flex items-center text-sm text-green-600 mb-4">
                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                        </svg>
                        100% Sold Out
                    </div>
                    <a href="{{ url('projects/opera-white-house') }}" class="btn-outline w-full text-center">View Details</a>
                </div>
            </div>
        </div>

        <!-- Stats -->
        <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white p-8 rounded-2xl shadow-lg text-center">
                <div class="text-4xl font-bold text-primary-600 mb-2">3+</div>
                <div class="text-gray-600">Projects Completed</div>
            </div>
            <div class="bg-white p-8 rounded-2xl shadow-lg text-center">
                <div class="text-4xl font-bold text-gold-600 mb-2">5000+</div>
                <div class="text-gray-600">Happy Customers</div>
            </div>
            <div class="bg-white p-8 rounded-2xl shadow-lg text-center">
                <div class="text-4xl font-bold text-green-600 mb-2">100%</div>
                <div class="text-gray-600">Customer Satisfaction</div>
            </div>
        </div>

        <!-- CTA -->
        <div class="mt-16 text-center bg-gradient-to-r from-primary-600 to-primary-800 rounded-2xl p-12 text-white">
            <h2 class="text-3xl font-bold mb-4">Want to Own a Property Like This?</h2>
            <p class="text-xl text-gray-100 mb-8 max-w-2xl mx-auto">Explore our ongoing projects and book your dream property today.</p>
            <a href="{{ route('projects.ongoing') }}" class="btn-secondary inline-block">View Ongoing Projects</a>
        </div>
    </div>
</section>
@endsection