@extends('layouts.app')

@section('content')
    {{-- Hero --}}
    <section class="page-hero">

        <div class="page-hero-bg" ></div>
        <div class="page-hero-overlay"></div>

        <div class="container page-hero-content">

            <span class="hero-badge">
                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">

        <div class="container">

            <div class="row gy-5 gx-md-5">


                {{-- Left Content --}}
                <div class="col-lg-8">

                    <span class="section-badge">
                        About This Project
                    </span>

                    <h2 class="section-title">
                        Skyline <span>Residences</span>
                    </h2>

                    <p class="project-text">
                        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.
                    </p>

                    <p class="project-text">
                        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.
                    </p>



                    {{-- Highlights --}}
                    <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 style="font-family:var(--font-display);font-size:1.8rem;margin-bottom:24px;">Project <span
                                style="color:var(--brand)">Gallery</span></h3>
                        <div class="gallery-grid" style="grid-template-columns:repeat(3,1fr);">
                            @php
                                $imgs = [
                                    ['photo-1600596542815-ffad4c1539a9', 'Exterior View'],
                                    ['photo-1600607687939-ce8a6c25118c', 'Interior Living'],
                                    ['photo-1586023492125-27b2c045efd7', 'Living Room'],
                                    ['photo-1556909114-f6e7ad7d3136', 'Kitchen'],
                                    ['photo-1560448204-e02f11c3d0e2', 'Master Bedroom'],
                                    ['photo-1552321554-5fefe8c9ef14', 'Bathroom'],
                                ];
                            @endphp
                            @foreach ($imgs as $img)
                                <a href="https://images.unsplash.com/{{ $img[0] }}?w=1200&q=90"
                                    data-fancybox="project-gallery" data-caption="{{ $img[1] }}" class="gallery-item"
                                    style="aspect-ratio:4/3;grid-column:span 1;">
                                    <img src="https://images.unsplash.com/{{ $img[0] }}?w=400&q=80"
                                        alt="{{ $img[1] }}" loading="lazy">
                                    <div class="gallery-overlay"><i class="bi bi-zoom-in"></i></div>
                                </a>
                            @endforeach
                        </div>
                    </div>

                </div>



                {{-- Sidebar --}}
                <div class="col-lg-4">


                    {{-- Project Details --}}
                    <div class="project-detail-info mb-4">

                        <h5 class="detail-title">
                            Project Details
                        </h5>

                        <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>



                    {{-- Contact Form --}}
                    <div class="contact-form-card">

                        <h6 class="contact-title">
                            Interested in this project?
                        </h6>

                        <p class="contact-desc">
                            Fill the form and our team will reach out within 24 hours.
                        </p>

                        <form>

                            <div class="d-flex flex-column gap-3">

                                <div>
                                    <label class="form-label-custom">Name *</label>
                                    <input type="text" class="form-control-custom">
                                </div>

                                <div>
                                    <label class="form-label-custom">Phone *</label>
                                    <input type="tel" class="form-control-custom">
                                </div>

                                <div>
                                    <label class="form-label-custom">Email</label>
                                    <input type="email" class="form-control-custom">
                                </div>

                                <div>
                                    <label class="form-label-custom">Message</label>
                                    <textarea class="form-control-custom" rows="3"></textarea>
                                </div>

                                <button type="submit" class="btn-brand">
                                    <span>Send Inquiry</span>
                                    <i class="bi bi-send"></i>
                                </button>

                            </div>

                        </form>

                    </div>


                </div>


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