@extends('layouts.app')


@section('content')
    {{-- Hero --}}
    <section class="page-hero project-details-hero">
        <div class="page-hero-bg"
            style="background-image:url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?w=1920&q=80')"></div>
        <div class="page-hero-overlay"></div>
        <div class="container page-hero-content">
            <span class="category">Handover</span>


            <div class="page-hero-title">Skyline Residences</div>
            <div class="breadcrumb-nav">
                <a href="{{ route('home') }}">Home</a>
                <span class="sep"><i class="bi bi-chevron-right"></i></span>
                <a href="{{ route('projects.handover.index') }}">Projects</a>
                <span class="sep"><i class="bi bi-chevron-right"></i></span>
                <span class="current">Skyline Residences</span>
            </div>
        </div>
    </section>

    {{-- About Project --}}
    <section class="section-pad project-details">
        <div class="container">
            <div class="row gy-5 gx-md-5">

                <div class="col-lg-8" data-aos="fade-right">
                    {{-- About --}}
                    <span class="section-badge">About This Project</span>
                    <h2 class="section-title">Skyline <span>Residences</span></h2>
                    <p class="section-description">
                        Skyline Residences is EPDL's flagship development located in the heart of Gulshan — Dhaka's most
                        prestigious neighborhood. This 12-story luxury residential tower offers 48 meticulously crafted
                        apartments ranging from 1,200 to 2,400 sqft, designed to provide an unparalleled urban living
                        experience.
                    </p>
                    <p class="section-description">
                        The project features premium amenities including a rooftop infinity pool, state-of-the-art gym,
                        concierge service, 24/7 security, and double-height lobby with imported marble finishes. Every unit
                        is thoughtfully designed to maximize natural light and ventilation.
                    </p>

                    <div class="row g-3 mt-4">

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Rooftop Infinity Pool
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                24/7 Security
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                High-Speed Elevators
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Backup Generator
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Gym & Recreation
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Children's Play Area
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Underground Parking
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Smart Home Features
                            </div>
                        </div>

                    </div>


                    {{-- Gallery --}}
                    <div class="mt-5">
                        <span class="section-badge">Gallery</span>
                        <h3 class="gallery-heading">Project <span style="color:var(--brand)">Gallery</span>
                        </h3>

                        <div class="gallery-grid">
                            <a href="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1200&q=90"
                                data-fancybox="project-gallery" data-caption="Exterior View" class="gallery-item">

                                <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=400&q=80"
                                    alt="Exterior View" loading="lazy">

                                <div class="gallery-overlay">
                                    <i class="bi bi-zoom-in"></i>
                                </div>
                            </a>


                            <a href="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1200&q=90"
                                data-fancybox="project-gallery" data-caption="Interior Living" class="gallery-item">

                                <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=400&q=80"
                                    alt="Interior Living" loading="lazy">

                                <div class="gallery-overlay">
                                    <i class="bi bi-zoom-in"></i>
                                </div>
                            </a>


                            <a href="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=1200&q=90"
                                data-fancybox="project-gallery" data-caption="Living Room" class="gallery-item">

                                <img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&q=80"
                                    alt="Living Room" loading="lazy">

                                <div class="gallery-overlay">
                                    <i class="bi bi-zoom-in"></i>
                                </div>
                            </a>


                            <a href="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=90"
                                data-fancybox="project-gallery" data-caption="Kitchen" class="gallery-item">

                                <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400&q=80"
                                    alt="Kitchen" loading="lazy">

                                <div class="gallery-overlay">
                                    <i class="bi bi-zoom-in"></i>
                                </div>
                            </a>


                            <a href="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=1200&q=90"
                                data-fancybox="project-gallery" data-caption="Master Bedroom" class="gallery-item">

                                <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&q=80"
                                    alt="Master Bedroom" loading="lazy">

                                <div class="gallery-overlay">
                                    <i class="bi bi-zoom-in"></i>
                                </div>
                            </a>


                            <a href="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=90"
                                data-fancybox="project-gallery" data-caption="Bathroom" class="gallery-item">

                                <img src="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=400&q=80"
                                    alt="Bathroom" loading="lazy">

                                <div class="gallery-overlay">
                                    <i class="bi bi-zoom-in"></i>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                {{-- Sidebar --}}
                <div class="col-lg-4" data-aos="fade-left">
                    {{-- Project Details Card --}}
                    <div class="project-detail-info mb-4">
                        <h3>
                            Project Details</h3>
                        <div class="detail-meta-item">
                            <i class="bi bi-geo-alt"></i>
                            <div>
                                <div class="detail-meta-label">Location</div>
                                <div class="detail-meta-value">Gulshan-1, Dhaka</div>
                            </div>
                        </div>

                        <div class="detail-meta-item">
                            <i class="bi bi-building"></i>
                            <div>
                                <div class="detail-meta-label">Property Type</div>
                                <div class="detail-meta-value">Residential Apartment</div>
                            </div>
                        </div>

                        <div class="detail-meta-item">
                            <i class="bi bi-layers"></i>
                            <div>
                                <div class="detail-meta-label">Total Floors</div>
                                <div class="detail-meta-value">12 Floors</div>
                            </div>
                        </div>

                        <div class="detail-meta-item">
                            <i class="bi bi-house"></i>
                            <div>
                                <div class="detail-meta-label">Total Units</div>
                                <div class="detail-meta-value">48 Apartments</div>
                            </div>
                        </div>

                        <div class="detail-meta-item">
                            <i class="bi bi-arrows-fullscreen"></i>
                            <div>
                                <div class="detail-meta-label">Unit Size</div>
                                <div class="detail-meta-value">1200 – 2400 sqft</div>
                            </div>
                        </div>

                        <div class="detail-meta-item">
                            <i class="bi bi-door-open"></i>
                            <div>
                                <div class="detail-meta-label">Bedrooms</div>
                                <div class="detail-meta-value">2, 3 & 4 BHK</div>
                            </div>
                        </div>

                        <div class="detail-meta-item">
                            <i class="bi bi-calendar3"></i>
                            <div>
                                <div class="detail-meta-label">Handover</div>
                                <div class="detail-meta-value">December 2023</div>
                            </div>
                        </div>

                        <div class="detail-meta-item">
                            <i class="bi bi-check-circle"></i>
                            <div>
                                <div class="detail-meta-label">Status</div>
                                <div class="detail-meta-value">Completed</div>
                            </div>
                        </div>
                    </div>

                    {{-- Contact Form --}}
                    <div class="contact-form-card">
                        <h3>Interested in this project?</h3>
                        <p class="description">Fill the form and our team will
                            reach out within 24 hours.</p>
                        <form id="contactForm" action="{{ route('contact.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="subject" value="Inquiry: Skyline Residences">
                            <div class="d-flex flex-column gap-3">
                                <div>
                                    <label class="form-label-custom">Name *</label>
                                    <input type="text" name="name" class="form-control-custom"
                                        placeholder="Your name" required>
                                </div>
                                <div>
                                    <label class="form-label-custom">Phone *</label>
                                    <input type="tel" name="phone" class="form-control-custom"
                                        placeholder="+880 1XXX-XXXXXX" required>
                                </div>
                                <div>
                                    <label class="form-label-custom">Email</label>
                                    <input type="email" name="email" class="form-control-custom"
                                        placeholder="your@email.com">
                                </div>
                                <div>
                                    <label class="form-label-custom">Message</label>
                                    <textarea name="message" class="form-control-custom" rows="3" placeholder="I'm interested in..."></textarea>
                                </div>
                                <button type="submit" class="btn-brand" style="justify-content:center;">
                                    <span>Send Inquiry</span>
                                    <i class="bi bi-send"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection