@extends('layouts.app')

@section('title', 'Ongoing 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">Ongoing Projects</h1>
        <p class="text-xl text-gray-100 max-w-2xl">Discover our current projects that are shaping the future of real estate in Bangalore</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">
            <!-- Serene County -->
            <div class="card group">
                <div class="relative h-72 overflow-hidden">
                    <img src="{{ asset('images/serenecountyongoing.png') }}" alt="Serene County" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute top-4 right-4 bg-gold-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Ongoing</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">Serene County</h3>
                        <p class="text-gray-200">Phase 1</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">Bangalore</span>
                    </div>
                    <p class="text-gray-600 mb-4">SERENE COUNTY PHASE 1 is an AHUDA-approved plotted development with amenities strategically located near KIA INDIA PVT LTD, Penukonda, Andhra Pradesh.</p>
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-sm text-gray-500">
                            <span class="font-semibold text-gray-900">Starting from</span> ₹25 Lakhs
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
                            </svg>
                            1200 - 2400 sq.ft
                        </div>
                    </div>
                    <a href="{{ url('projects/serene-county') }}" class="btn-primary w-full text-center">View Details</a>
                </div>
            </div>

            <!-- Green Woods -->
            <div class="card group">
                <div class="relative h-72 overflow-hidden">
                    <img src="{{ asset('images/ongoing2greenwoods.jpg') }}" alt="Green Woods" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute top-4 right-4 bg-gold-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Ongoing</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">Green Woods</h3>
                        <p class="text-gray-200">Harohalli, Kanakapura Main 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">Harohalli, Industrial Area</span>
                    </div>
                    <p class="text-gray-600 mb-4">Greenwoods sprawls around 50 acres with dense greenery in the form of plantations situated at Harohalli on Kanakapura road, Bangalore. Land consists of numerous wood bearing trees and the available Plot dimensions are 3000, 5000, 7000, 10000 sqft and odd dimensions.</p>
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-sm text-gray-500">
                            <span class="font-semibold text-gray-900">Starting from</span> ₹15 Lakhs
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
                            </svg>
                            2400 - 4800 sq.ft
                        </div>
                    </div>
                    <a href="{{ url('projects/green-woods') }}" class="btn-primary w-full text-center">View Details</a>
                </div>
            </div>

            <!-- Smilee Nisarga -->
            <div class="card group">
                <div class="relative h-72 overflow-hidden">
                    <img src="{{ asset('images/smilenisegreongoing3.jpg') }}" alt="Smilee Nisarga" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute top-4 right-4 bg-gold-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Ongoing</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">Smilee Nisarga</h3>
                        <p class="text-gray-200">Kambalipura, Chandapura</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">Kambalipura, Chandapura</span>
                    </div>
                    <p class="text-gray-600 mb-4">Smilee Nisarga is a BMRDA approved gated community layout sprawling about 23 acres surrounded by rich natural vegetation in Electronic City Phase3. The project is a perfect place for constructing villa since it is away from city abuzz and concrete jungles.</p>
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-sm text-gray-500">
                            <span class="font-semibold text-gray-900">Starting from</span> ₹20 Lakhs
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
                            </svg>
                            1200 - 2400 sq.ft
                        </div>
                    </div>
                    <a href="{{ url('projects/smilee-nisarga') }}" class="btn-primary w-full text-center">View Details</a>
                </div>
            </div>

            <!-- Heavenly Woods Phase 2 -->
            <div class="card group">
                <div class="relative h-72 overflow-hidden">
                    <img src="{{ asset('images/ongoing4heavenlywoods.jpg') }}" alt="Heavenly Woods Phase 2" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                    <div class="absolute top-4 right-4 bg-gold-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Ongoing</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">Heavenly Woods Phase 2</h3>
                        <p class="text-gray-200">Indlavadi Village, Jigani</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">Indlavadi Village, Jigani</span>
                    </div>
                    <p class="text-gray-600 mb-4">GOLDEN ERA HEAVENLY WOODS PHASE 2 is a carefully planned farm house project which boast around 20 acres of land studded with amenities planned in 10 acres situated at Indlewadi Pura, Anekal Taluk, Bengaluru-south.</p>
                    <div class="flex items-center justify-between mb-4">
                        <div class="text-sm text-gray-500">
                            <span class="font-semibold text-gray-900">Starting from</span> ₹18 Lakhs
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
                            </svg>
                            2400 - 4800 sq.ft
                        </div>
                    </div>
                    <a href="{{ url('projects/heavenly-woods') }}" class="btn-primary w-full text-center">View Details</a>
                </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">Interested in Our Projects?</h2>
            <p class="text-xl text-gray-100 mb-8 max-w-2xl mx-auto">Schedule a free site visit and explore our properties with our expert team.</p>
            <a href="{{ route('booking') }}" class="btn-secondary inline-block">Book Free Site Visit</a>
        </div>
    </div>
</section>
@endsection