@extends('layouts.app')


@section('content')
    <section class="hero-section">

        {{-- Slides --}}
        <div class="hero-slide active" style="position:absolute; inset:0;">
            <div class="hero-bg" style="background-image:url({{ asset('assets/img/hero-home.webp') }})">
            </div>
        </div>

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

        <div class="container hero-content">
            <div class="row align-items-center min-vh-100">
                <div class="col-lg-8">

                    {{-- Badge --}}
                    <div class="hero-badge" data-aos="fade-in" data-aos-duration="800" data-aos-delay="100">
                        <i class="bi bi-building"></i>
                        Premium Real Estate Development
                    </div>

                    {{-- Title --}}
                    <h1 class="hero-title mt-3" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
                        <span>EPDL</span> <br> Building the Future,
                        One Property at a Time
                    </h1>

                    {{-- Subtitle --}}
                    <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                        <p class="hero-subtitle mt-3">
                            Expert Solutions in Real Estate — Buying, Selling & Investment.
                            We guide you through every step, from selecting the perfect property
                            to seamless transactions, ensuring smart decisions, maximum returns,
                            and peace of mind for every client.
                        </p>

                        {{-- Buttons --}}
                        <div class="d-flex flex-wrap gap-3">
                            <a href="{{ route('contact') }}" class="btn-brand">
                                <i class="bi bi-telephone"></i>
                                <span>Talk to Expert</span>
                            </a>
                            <a href="{{ route('projects.ongoing.index') }}" class="btn-outline hero">
                                <span>Explore Projects</span>
                                <i class="bi bi-arrow-right"></i>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </section>


    {{-- ═══════════════════════════════════════════════════════
     2. PROJECTS SECTION
════════════════════════════════════════════════════════ --}}



    <section class="section-pad bg-white" id="projects">
        <div class="container">
            <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                <div class="text-center mb-2">
                    <span class="section-badge-dubble">Projects</span>
                </div>
                <h2 class="section-title text-center">Featured <span>Projects</span></h2>
                <p class="section-subtitle text-center">
                    Explore our diverse portfolio of premium residential and commercial developments across the region.
                </p>
            </div>

            {{-- Filter Tabs --}}
            <div class="filter-tabs" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
                <button class="filter-tab active" data-filter="all">All Projects</button>
                <button class="filter-tab" data-filter="handover">Handover</button>
                <button class="filter-tab" data-filter="ongoing">On Going</button>
                <button class="filter-tab" data-filter="ready">Ready to Sale</button>
                <button class="filter-tab" data-filter="upcoming">Up Coming</button>
            </div>

            <div class="row gy-4 gx-md-4">
                @include('components.handover-projects')
                @include('components.on-going-projects')
                @include('components.upcoming-projects')
            </div>

            <div class="text-center mt-5">
                <a href="{{ route('projects.index') }}" class="btn-dark">
                    <span>View All Projects</span>
                    <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
    </section>


    {{-- ═══════════════════════════════════════════════════════
     3. GLANCE SECTION
════════════════════════════════════════════════════════ --}}
    <section class="glance-section section-pad">
        <div class="container">

            <div class="text-center mb-5" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                <span class="section-badge-dubble" style="color:rgba(255,255,255,.5)">Our Achievements</span>
                <h2 class="section-title" style="color:#fff">Our Projects <span>at a Glance</span></h2>
            </div>


            <div class="row gy-4 gx-md-4 justify-content-center">
               
                <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-delay="100">
                    <div class="glance-card">
                        <div class="glance-icon"><i class="bi bi-house-check"></i></div>
                        <div class="glance-num"><span data-count="4">0</span></div>
                        <div class="glance-label">Projects Handover</div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-delay="200">
                    <div class="glance-card">
                        <div class="glance-icon"><i class="bi bi-hammer"></i></div>
                        <div class="glance-num"><span data-count="1">0</span></div>
                        <div class="glance-label">Project in Progress</div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-delay="300">
                    <div class="glance-card">
                        <div class="glance-icon"><i class="bi bi-calendar-event"></i></div>
                        <div class="glance-num"><span data-count="1">0</span></div>
                        <div class="glance-label">Upcoming Project</div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    {{-- ═══════════════════════════════════════════════════════
     4. INTERIOR DESIGN HIGHLIGHTS
════════════════════════════════════════════════════════ --}}
    <section class="interior-section section-pad">
        <div class="container">
            <div class="row align-items-center gy-5 gx-md-5 mb-5">
                <div class="col-lg-6 reveal" data-aos="fade-right">
                    <span class="section-badge" style="color:rgba(255,255,255,.5)">Aesthetics</span>

                    <h2 class="section-title" style="color:#fff">Explore Stunning <span>Interior Designs</span></h2>

                    <p style="color:rgba(255,255,255,.6);">
                        Discover inspiring interior design ideas that elevate every space. From contemporary minimalism to
                        timeless classics, find your perfect style to complement your dream home.
                    </p>
                    <a href="{{ route('contact') }}" class="btn-brand mt-3">
                        <span>Get Design Consultation</span>
                        <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
                <div class="col-lg-6  interior-section" data-aos="fade-left">
                    <div class="interior-container">
                        <div class="interior-grid">
                            <div class="interior-item">
                                <div class="interior-icon"><i class="bi bi-palette"></i></div>
                                <div class="interior-title">Modern</div>
                            </div>
                            <div class="interior-item">
                                <div class="interior-icon"><i class="bi bi-palette"></i></div>
                                <div class="interior-title">Classic</div>
                            </div>
                            <div class="interior-item">
                                <div class="interior-icon"><i class="bi bi-palette"></i></div>
                                <div class="interior-title">Minimalist</div>
                            </div>
                            <div class="interior-item">
                                <div class="interior-icon"><i class="bi bi-palette"></i></div>
                                <div class="interior-title">Luxury</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Gallery Grid --}}
            <div class="gallery-grid  interior-gallery">
                <a href="{{ asset('assets/img/gallery/img-2.png') }}" data-fancybox="interior" data-caption="Living Room"
                    class="gallery-item">
                    <img src="{{ asset('assets/img/gallery/img-2.png') }}" alt="Living Room" loading="lazy">
                    <div class="gallery-overlay">
                        <i class="bi bi-zoom-in"></i>
                    </div>
                </a>

                <a href="{{ asset('assets/img/gallery/img-1.png') }}" data-fancybox="interior" data-caption="Kitchen"
                    class="gallery-item">
                    <img src="{{ asset('assets/img/gallery/img-1.png') }}" alt="Kitchen" loading="lazy">
                    <div class="gallery-overlay">
                        <i class="bi bi-zoom-in"></i>
                    </div>
                </a>

                <a href="{{ asset('assets/img/gallery/img-3.png') }}" data-fancybox="interior" data-caption="Bedroom"
                    class="gallery-item">
                    <img src="{{ asset('assets/img/gallery/img-3.png') }}" alt="Bedroom" loading="lazy">
                    <div class="gallery-overlay">
                        <i class="bi bi-zoom-in"></i>
                    </div>
                </a>

                <a href="{{ asset('assets/img/gallery/img-4.png') }}" data-fancybox="interior" data-caption="Bathroom"
                    class="gallery-item">
                    <img src="{{ asset('assets/img/gallery/img-4.png') }}" alt="Bathroom" loading="lazy">
                    <div class="gallery-overlay">
                        <i class="bi bi-zoom-in"></i>
                    </div>
                </a>

                <a href="{{ asset('assets/img/gallery/img-5.png') }}" data-fancybox="interior" data-caption="Dining"
                    class="gallery-item">
                    <img src="{{ asset('assets/img/gallery/img-5.png') }}" alt="Dining" loading="lazy">
                    <div class="gallery-overlay">
                        <i class="bi bi-zoom-in"></i>
                    </div>
                </a>

                <a href="{{ asset('assets/img/gallery/img-6.png') }}" data-fancybox="interior"
                    data-caption="Living Room 2" class="gallery-item">
                    <img src="{{ asset('assets/img/gallery/img-6.png') }}" alt="Living Room 2" loading="lazy">
                    <div class="gallery-overlay">
                        <i class="bi bi-zoom-in"></i>
                    </div>
                </a>

                <a href="{{ asset('assets/img/gallery/img-7.png') }}" data-fancybox="interior" data-caption="Kitchen 2"
                    class="gallery-item">
                    <img src="{{ asset('assets/img/gallery/img-7.png') }}" alt="Kitchen 2" loading="lazy">
                    <div class="gallery-overlay">
                        <i class="bi bi-zoom-in"></i>
                    </div>
                </a>


            </div>
        </div>
    </section>


    {{-- ═══════════════════════════════════════════════════════
     5. SERVICES SECTION
════════════════════════════════════════════════════════ --}}
    <section class="section-pad bg-white">
        <div class="container">

            <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                <div class="text-center mb-2">
                    <span class="section-badge-dubble">What We Offer</span>
                </div>
                <h2 class="section-title text-center">Our <span>Services</span></h2>
                <p class="section-subtitle text-center">
                    Comprehensive real estate solutions tailored to your needs — from development to management.
                </p>
            </div>


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

                {{-- Development Service --}}
                <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-aos-delay="80">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-building"></i>
                        </div>
                        <h3>Development</h3>
                        <p>
                            We design and develop high-quality residential and commercial properties that blend
                            functionality, aesthetics, and sustainability. Our team ensures each project meets modern
                            standards while respecting local needs and culture.
                        </p>
                    </div>
                </div>

                {{-- Consultation Service --}}
                <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-aos-delay="160">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-comments-dollar"></i>
                        </div>
                        <h3>Consultation</h3>
                        <p>
                            Whether you're investing, buying, or selling, our expert consultants provide honest, data-driven
                            guidance. We help you make informed decisions aligned with your goals and the real estate market
                            trends in Bangladesh.
                        </p>
                    </div>
                </div>

                {{-- Interior Service --}}
                <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-aos-delay="240">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-couch"></i>
                        </div>
                        <h3>Interior Service</h3>
                        <p>
                            Transform your space with our customised interior solutions. From modern minimalism to
                            traditional elegance, we bring your vision to life with smart designs and quality craftsmanship.
                        </p>
                    </div>
                </div>

                {{-- Buying Assistance --}}
                <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-aos-delay="80">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <h3>Buying Assistance</h3>
                        <p>
                            Finding your dream property is easier with our dedicated team. We offer end-to-end support—from
                            identifying the right options to legal checks—ensuring a smooth, stress-free purchase process.
                        </p>
                    </div>
                </div>

                {{-- Selling Assistance --}}
                <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-aos-delay="160">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-dollar-sign"></i>
                        </div>
                        <h3>Selling Assistance</h3>
                        <p>
                            Sell your property faster and at the right price with our strategic marketing and professional
                            network. We handle everything from property valuation to buyer negotiations.
                        </p>
                    </div>
                </div>

                {{-- Property Management --}}
                <div class="col-lg-4 col-md-6 reveal" data-aos="fade-up" data-aos-delay="240">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fas fa-tools"></i>
                        </div>
                        <h3>Property Management</h3>
                        <p>
                            Keep your investment secure and stress-free. Our property management service covers maintenance,
                            rent collection, tenant management, and more—so you enjoy peace of mind and steady returns.
                        </p>
                    </div>
                </div>

            </div>

            <div class="text-center mt-5">
                <a href="{{ route('contact') }}" class="btn-brand">
                    <span>Get a Free Consultation</span>
                    <i class="bi bi-arrow-right"></i>
                </a>
            </div>
        </div>
    </section>


    {{-- ═══════════════════════════════════════════════════════
     6. WHY CHOOSE US / FAQ
════════════════════════════════════════════════════════ --}}
    <section class="why-section section-pad">
        <div class="container">
            <div class="row gy-5 gx-md-5 align-items-start">

                <div class="col-lg-5 reveal" data-aos="fade-right">
                    <span class="section-badge">Why EPDL</span>
                    <h2 class="section-title">Why Choose <span>Us?</span></h2>
                    <p class="text-muted mb-4" style="font-size:.95rem;line-height:1.8;">
                        With years of experience and a commitment to excellence, EPDL stands as the region's most trusted
                        real estate development partner.
                    </p>

                    <div class="why-feature">
                        <div class="why-feature-icon"><i class="bi bi-shield-check"></i></div>
                        <div class="why-feature-text">
                            <h6>Trusted & Transparent</h6>
                            <p>Full transparency in pricing, documentation, and project updates at every stage.</p>
                        </div>
                    </div>
                    <div class="why-feature">
                        <div class="why-feature-icon"><i class="bi bi-award"></i></div>
                        <div class="why-feature-text">
                            <h6>Award-Winning Quality</h6>
                            <p>Recognized for construction excellence and design innovation consistently.</p>
                        </div>
                    </div>
                    <div class="why-feature">
                        <div class="why-feature-icon"><i class="bi bi-people"></i></div>
                        <div class="why-feature-text">
                            <h6>Expert Team</h6>
                            <p>Seasoned architects, engineers, and consultants dedicated to your project.</p>
                        </div>
                    </div>
                    <div class="why-feature">
                        <div class="why-feature-icon"><i class="bi bi-clock-history"></i></div>
                        <div class="why-feature-text">
                            <h6>On-Time Delivery</h6>
                            <p>We pride ourselves on meeting deadlines without compromising quality.</p>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7 reveal" data-aos="fade-left">
                    <span class="section-badge">FAQ</span>
                    <h2 class="section-title">Frequently Asked <span>Questions</span></h2>

                    {{-- FAQ 1 --}}
                    <div class="faq-item active">
                        <div class="faq-question">
                            <span>What services does EPDL provide?</span>
                            <div class="faq-icon"> <i class="bi bi-plus"></i></div>
                        </div>
                        <div class="faq-answer">
                            We offer a complete range of real estate services including land development, residential and
                            commercial property sales, rentals, property management, and construction project development
                            across Bangladesh.
                        </div>
                    </div>

                    {{-- FAQ 2 --}}
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>Is EPDL a government-approved developer?</span>
                            <div class="faq-icon"><i class="bi bi-plus"></i></div>
                        </div>
                        <div class="faq-answer">
                            Yes, EPDL is a government-registered real estate company, operating under the rules and
                            regulations of RAJUK and the Real Estate & Housing Association of Bangladesh (REHAB).
                        </div>
                    </div>

                    {{-- FAQ 3 --}}
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>How can I book a flat or land with EPDL?</span>
                            <div class="faq-icon"><i class="bi bi-plus"></i></div>
                        </div>
                        <div class="faq-answer">
                            You can contact our sales team via phone, email, or by visiting our office. Once you choose a
                            unit, you'll need to fill out a booking form and submit the initial booking fee. We will guide
                            you through every step.
                        </div>
                    </div>

                    {{-- FAQ 4 --}}
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>What is the payment schedule for flats or plots?</span>
                            <div class="faq-icon"><i class="bi bi-plus"></i></div>
                        </div>
                        <div class="faq-answer">
                            We offer flexible payment plans including down payments, monthly instalments, and bank loan
                            support. The payment schedule varies depending on the project type and stage of development.
                        </div>
                    </div>

                    {{-- FAQ 5 --}}
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>How can I check the legal status of a property before purchase?</span>
                            <div class="faq-icon"><i class="bi bi-plus"></i></div>
                        </div>
                        <div class="faq-answer">
                            We ensure full legal transparency. All properties go through thorough vetting, and you are
                            welcome to review ownership documents with your lawyer before making a purchase.ices own improve
                            now see. Called person are around county talked her esteem. Those fully these way nay thing
                            seems.
                        </div>
                    </div>

                    {{-- FAQ 6 --}}
                    <div class="faq-item">
                        <div class="faq-question">
                            <span>What is your handover timeline?</span>
                            <div class="faq-icon"><i class="bi bi-plus"></i></div>
                        </div>
                        <div class="faq-answer">
                            Handover timelines depend on the specific project, but we are committed to delivering on time.
                            Handover dates are clearly mentioned in our sale agreements.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    {{-- ═══════════════════════════════════════════════════════
     7. CONTACT SECTION
════════════════════════════════════════════════════════ --}}
    <section class="contact-section section-pad" id="contact">
        <div class="container">

            <div data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                <div class="text-center mb-2">
                    <span class="section-badge-dubble">Reach Out</span>
                </div>
                <h2 class="section-title text-center">Get In <span>Touch</span></h2>
                <p class="section-subtitle text-center">Have a question or ready to find your perfect property? We're here
                    to
                    help.</p>
            </div>


            <div class="row gy-5 gx-md-5 align-items-stretch">
                <div class="col-lg-6 reveal" data-aos="fade-right">
                    <div class="contact-map-wrap h-100">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3649.8119571009697!2d90.4184476!3d23.8252849!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c7007d348453%3A0x8d4d878d00654c0c!2sEPDL!5e0!3m2!1sen!2sus!4v1773130246454!5m2!1sen!2sus"
                            allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>

                <div class="col-lg-6 reveal" data-aos="fade-left">
                    <div class="contact-form-card">
                        <h4 class="mb-1" style="font-size:1.5rem;">Send Us a Message</h4>
                        <p class="text-muted mb-4" style="font-size:.88rem;">Fill out the form and our team will respond
                            within 24 hours.</p>

                        @include('components.contact-form')
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
