@extends('layouts.app')

@section('title', 'Opera White House - Golden Era Property')

@section('content')
<section class="relative">
    <div class="relative h-[250px] lg:h-[350px] overflow-hidden">
        <div id="heroCarousel" class="relative h-full w-full">
            <div class="relative h-full w-full">
                <img id="currentSlide" src="{{ asset('images/completedoperawhitehouse.jpg') }}" alt="Opera White House" class="w-full h-full object-cover transition-opacity duration-1000" style="object-fit: cover; object-position: center;">
                <div id="gradientOverlay" class="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60 transition-opacity duration-500"></div>
                <div id="textContainer" class="absolute inset-0 flex items-center justify-center transition-opacity duration-500">
                    <div class="text-center">
                        <h1 class="text-3xl lg:text-5xl font-bold text-white">Opera White House</h1>
                        <p class="text-lg lg:text-2xl text-white/90 mt-4 font-bold">Gottigere, Bannerughatta Road, Bengaluru</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="overview" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="section-title">Project Overview</h2>
                <p class="text-gray-600 text-lg mb-6 leading-relaxed">
                    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. which offers a well planned residential construction with an excellent structural plan,amidst of residential dwellings, IT corridors, shopping malls, schools and hospitals. It is a mixture of 2 & 3 BHK's with basic amenities and excellent connectivity in a reasonable budget.
                </p>
                <div class="bg-gradient-to-br from-primary-50 to-primary-100 p-6 rounded-xl">
                    <h3 class="font-bold text-gray-900 mb-3">Key Highlights</h3>
                    <ul class="space-y-2 text-gray-700">
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> BBMP Approved</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> 100% Vaastu Complied</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> Possession by Dec 2014</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> Excellent Water Facility</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> Loans from all leading banks</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> Excellent Rental Income</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> Nearby to landmarks</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> NICE road approach</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> Robust Return on Investment</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> Surrounded by residential dwellings</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> Situated in famous Bohara Layout</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> Minutes away from many of the establishments</li>
                        <li class="flex items-start"><span class="text-primary-600 mr-2">✓</span> No common wall</li>
                    </ul>
                </div>
            </div>
            <div class="relative space-y-6">
                <img src="{{ asset('images/specifications.jpg') }}" alt="Specifications" class="rounded-2xl shadow-2xl">
            </div>
        </div>
    </div>
</section>

<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="section-title">Amenities</h2>
            <p class="section-subtitle max-w-2xl mx-auto">Premium amenities for comfortable living</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-gradient-to-br from-primary-50 to-primary-100 p-6 rounded-2xl flex items-center">
                <div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                    <span class="text-white text-2xl">🔒</span>
                </div>
                <span class="text-gray-900 font-semibold">24 hrs Security</span>
            </div>
            <div class="bg-gradient-to-br from-gold-50 to-gold-100 p-6 rounded-2xl flex items-center">
                <div class="w-12 h-12 bg-gold-500 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                    <span class="text-white text-2xl">💧</span>
                </div>
                <span class="text-gray-900 font-semibold">Water Supply</span>
            </div>
            <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 p-6 rounded-2xl flex items-center">
                <div class="w-12 h-12 bg-emerald-600 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                    <span class="text-white text-2xl">🛗</span>
                </div>
                <span class="text-gray-900 font-semibold">Elevator</span>
            </div>
            <div class="bg-gradient-to-br from-slate-50 to-slate-100 p-6 rounded-2xl flex items-center">
                <div class="w-12 h-12 bg-slate-600 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                    <span class="text-white text-2xl">🌿</span>
                </div>
                <span class="text-gray-900 font-semibold">Provision Of Landscaping</span>
            </div>
            <div class="bg-gradient-to-br from-primary-50 to-primary-100 p-6 rounded-2xl flex items-center">
                <div class="w-12 h-12 bg-primary-600 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                    <span class="text-white text-2xl">⚡</span>
                </div>
                <span class="text-gray-900 font-semibold">Power Back up</span>
            </div>
            <div class="bg-gradient-to-br from-gold-50 to-gold-100 p-6 rounded-2xl flex items-center">
                <div class="w-12 h-12 bg-gold-500 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                    <span class="text-white text-2xl">🚗</span>
                </div>
                <span class="text-gray-900 font-semibold">Parking</span>
            </div>
            <div class="bg-gradient-to-br from-emerald-50 to-emerald-100 p-6 rounded-2xl flex items-center">
                <div class="w-12 h-12 bg-emerald-600 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                    <span class="text-white text-2xl">🏋️</span>
                </div>
                <span class="text-gray-900 font-semibold">Gym</span>
            </div>
            <div class="bg-gradient-to-br from-slate-50 to-slate-100 p-6 rounded-2xl flex items-center">
                <div class="w-12 h-12 bg-slate-600 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                    <span class="text-white text-2xl">💧</span>
                </div>
                <span class="text-gray-900 font-semibold">Provision Of Cauvery Water Supply & Landscaping</span>
            </div>
        </div>
    </div>
</section>

<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="section-title">Location & Media</h2>
            <p class="section-subtitle max-w-2xl mx-auto">Explore our project location and media</p>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <div class="bg-white p-6 rounded-2xl shadow-lg">
                <h3 class="text-xl font-bold text-gray-900 mb-4">📍 Google Maps</h3>
                <div class="rounded-xl overflow-hidden aspect-video">
                    <iframe 
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3888.756849656136!2d77.5945633!3d12.8731493!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae6bae0d69e9e1%3A0x9f7d5c9e4c9d6e1f!2sGottigere%2C%20Bengaluru%2C%20Karnataka!5e0!3m2!1sen!2sin!4v1716634800000!5m2!1sen!2sin" 
                        width="100%" 
                        height="300" 
                        style="border:0;" 
                        allowfullscreen="" 
                        loading="lazy" 
                        referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
                <a href="https://www.google.com/maps/place/Gottigere,+Bengaluru,+Karnataka/@12.8731493,77.5945633,15z/data=!3m1!4b1!4m6!3m5!1s0x3bae6bae0d69e9e1:0x9f7d5c9e4c9d6e1f!8m2!3d12.8731493!4d77.5945633!16s%2Fg%2F11bc84v2r9?hl=en&entry=ttu&g_ep=EgoyMDI2MDUyMC4wIKXMDSoASAFQAw%3D%3D" 
                   target="_blank" 
                   class="mt-4 inline-flex items-center text-primary-600 hover:text-primary-700 font-semibold">
                    <span>View on Google Maps</span>
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                    </svg>
                </a>
            </div>
            <div class="bg-white p-6 rounded-2xl shadow-lg">
                <h3 class="text-xl font-bold text-gray-900 mb-4">🎥 Site Visit Video</h3>
                <div class="rounded-xl overflow-hidden aspect-video">
                    <iframe 
                        src="https://www.youtube.com/embed/uyRBiYwGzTY" 
                        width="100%" 
                        height="300" 
                        title="Opera White House Site Visit" 
                        frameborder="0" 
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                        allowfullscreen>
                    </iframe>
                </div>
                <a href="https://www.youtube.com/watch?v=uyRBiYwGzTY&t=2s" 
                   target="_blank" 
                   class="mt-4 inline-flex items-center text-primary-600 hover:text-primary-700 font-semibold">
                    <span>Watch on YouTube</span>
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="section-title">Download & Booking</h2>
            <p class="section-subtitle max-w-2xl mx-auto">Get our brochure and booking form</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <a href="https://www.goldeneraproperty.com/images/opera.pdf" 
               target="_blank" 
               class="bg-gradient-to-br from-primary-50 to-primary-100 p-8 rounded-2xl text-center hover:shadow-xl transition-all group">
                <div class="w-16 h-16 bg-primary-600 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Download Brochure</h3>
                <p class="text-gray-600">Get our detailed project brochure</p>
            </a>
            <a href="https://www.goldeneraproperty.com/images/BOOKING%20FORM%20Flat.pdf" 
               target="_blank" 
               class="bg-gradient-to-br from-gold-50 to-gold-100 p-8 rounded-2xl text-center hover:shadow-xl transition-all group">
                <div class="w-16 h-16 bg-gold-500 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900 mb-2">Download Booking Form</h3>
                <p class="text-gray-600">Get our booking form</p>
            </a>
        </div>
    </div>
</section>

<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="section-title">Opera White Gallery</h2>
            <p class="section-subtitle max-w-2xl mx-auto">View our project photos</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite1.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite2.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite3.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite4.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite5.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite6.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite7.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite8.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite9.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite10.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite11.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
            <div class="relative group overflow-hidden rounded-2xl">
                <img src="{{ asset('images/operawhite12.jpg') }}" alt="Opera White House" class="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </div>
        </div>
    </div>
</section>

<section class="py-20 bg-gradient-to-r from-primary-600 to-primary-800 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">Project Completed</h2>
        <p class="text-xl text-gray-100 mb-8 max-w-2xl mx-auto">This project is 100% completed and sold out. Explore our ongoing projects for new opportunities.</p>
        <a href="{{ route('projects.ongoing') }}" class="btn-secondary inline-block">View Ongoing Projects</a>
    </div>
</section>
@endsection