@extends('layouts.app')

@section('content')
    {{-- Hero --}}
    <section class="page-hero">
        <div class="page-hero-bg" style="background-image:url({{ asset('assets/img/projects/akhter-tower.png') }})"></div>
        <div class="page-hero-overlay"></div>
        <div class="container page-hero-content">
            <span class="category">Handover</span>


            <div class="page-hero-title">Akhter Tower</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') }}">Handover Projects</a>
                <span class="sep"><i class="bi bi-chevron-right"></i></span>
                <span class="current">Akhter Tower</span>
            </div>
        </div>
    </section>



    <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">A Landmark of Modern Architecture</span>
                    <h1 class="section-title">Akhter <span>Tower</span></h1>

                    <p class="section-description">
                        Akhter Tower stands as one of the signature developments reflecting EPDL’s commitment to
                        architectural excellence and structural integrity. The building’s distinctive staggered balcony
                        design creates a dynamic visual identity while offering residents expansive views and greater
                        openness.

                    </p>
                    <p class="section-description">
                        Constructed using high-quality materials and modern engineering standards, Akhter Tower combines
                        durability with contemporary elegance.

                    </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>
                                Advanced Fire Safety & Protection

                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Grand Reception Lobby


                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Staggered Balcony for Panoramic View


                            </div>
                        </div>



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


                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Two-Unit Spacious Planning



                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="feature-box">
                                <i class="bi bi-check-circle-fill"></i>
                                Modern Engineering Standards



                            </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="{{ asset('assets/img/projects/akhter-tower.png') }}"
                                data-fancybox="project-gallery" data-caption="Exterior View" class="gallery-item">

                                <img src="{{ asset('assets/img/projects/akhter-tower.png') }}"
                                    alt="Exterior View" loading="lazy">

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




                            <a href="{{ asset('assets/img/gallery/akhter-tower/img-1.webp') }}"
                                data-fancybox="project-gallery" data-caption="Exterior View" class="gallery-item">

                                <img src="{{ asset('assets/img/gallery/akhter-tower/img-1.webp') }}"
                                    alt="Exterior View" loading="lazy">

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


                            <a href="{{ asset('assets/img/gallery/akhter-tower/img-2.webp') }}"
                                data-fancybox="project-gallery" data-caption="Interior Living" class="gallery-item">

                                <img src="{{ asset('assets/img/gallery/akhter-tower/img-2.webp') }}"
                                    alt="Interior Living" 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">Address</div>
                                <div class="detail-meta-value">
                                    328/D, East Nakhalpara, Tejgaon, 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">
                                    Multi-Unit Residential Tower
                                </div>
                            </div>
                        </div>


                        <div class="detail-meta-item">
                            <i class="bi bi-bounding-box"></i>
                            <div>
                                <div class="detail-meta-label">Total Floors</div>
                                <div class="detail-meta-value">
                                    10 Floors
                                </div>
                            </div>
                        </div>



                        <div class="detail-meta-item">
                            <i class="bi bi-arrows-fullscreen"></i>
                            <div>
                                <div class="detail-meta-label">Flat Size</div>
                                <div class="detail-meta-value">
                                    1530 Sft
                                </div>
                            </div>
                        </div>



                        <div class="detail-meta-item">
                            <i class="bi bi-bounding-box"></i>
                            <div>
                                <div class="detail-meta-label">
                                    Plot Size
                                </div>
                                <div class="detail-meta-value">
                                    5.88 Katha
                                </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>

                        @include('components.project-contact-form', [
                            'subject' => 'Interested akhter tower project ',
                            'project' => 'Akhter Tower',
                            'project_type' => 'Handover',
                        ])
                    </div>
                </div>

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