@extends('layouts/master')

@section('css')
@stop

@section('title')
{{ setting('site.title') }}
@stop

@section('metas')
    <meta name="title" content="{{ setting('site.title') }}">
    <meta name="description" content="{{ setting('site.description') }}">
    <meta name="keywords" content="{{ setting('site.keywords') }}">
    <meta property="og:title" content="{{ setting('site.title') }}">
    <meta property="og:description" content="{{ setting('site.description') }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:site_name" content="{{ ucwords(config('app.name')) }}">
    <meta property="og:locale" content="en_GB">
    <meta property="og:type" content="{{ ucwords(config('app.name')) }}">
    <meta name="twitter:title" content="{{ setting('site.title') }}">
    <meta name="twitter:description" content="{{ setting('site.description') }}">
    <meta name="twitter:domain" content="{{ env("APP_URL") }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" />
    <style>
        .project-btn {
            pointer-events: none;
        }
        
        .section-title {
            margin-top: 80px;
        }
    </style>
@stop

@section('content')

    <!-- Hero Section Start -->
    <div class="hero hero-video">
        <!-- Video Start -->
        <div class="hero-bg-video">
            <video autoplay muted loop id="myVideo"><source src="https://demo.awaikenthemes.com/assets/videos/inspaire-video.mp4" type="video/mp4"></video>
        </div>
        <!-- Video End -->
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-10">
                    <!-- Hero Content Start -->
                    <div class="hero-content">
                        <!-- Section Title Start -->
                        <div class="section-title">
                            <h1 class="text-anime-style-2" data-cursor="-opaque">Designing your dream spaces, one room at a time</h1>
                            <p class="wow fadeInUp" data-wow-delay="0.2s">Transforming Visions into Reality with Integrated Design, Property, and Construction Solutions.</p>
                        </div>
                        <!-- Section Title End -->

                        <!-- Hero Button Start -->
                        <div class="hero-btn wow fadeInUp" data-wow-delay="0.4s">
                            <a href="{{ route('about_us') }}" class="btn-default">explore more</a>
                            <a href="#projects" class="btn-default btn-highlighted">view projects</a>
                        </div>
                        <!-- Hero Button End -->
                    </div>
                    <!-- Hero Content End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Hero Section End -->
    
    @include('inc.about-us-section')

    @include('inc.how-we-work')

    <!-- Our Services Section Start -->
    <div class="our-services" id="services">
        <div class="container">
            <div class="row section-row align-items-center">
                <div class="col-lg-6">
                    <!-- Section Title Start -->
                    <div class="section-title">
                        <h3 class="wow fadeInUp">our services</h3>
                        <h2 class="text-anime-style-2" data-cursor="-opaque">Imaginative and Functional <span>Designs for All Purposes</span></h2>
                    </div>
                    <!-- Section Title End -->
                </div>

                <div class="col-lg-6">
                    <!-- Section Title Content Start -->
                    <div class="section-title-content">
                        <p class="wow fadeInUp" data-wow-delay="0.2s">Our imaginative and functional design services are tailored to suit your unique needs, seamlessly transforming your vision into reality from the initial concept to the final, stunning result.</p>
                    </div>
                    <!-- Section Title Content End -->
                </div>
            </div>

            <div class="row">
                @foreach($activeservice as $s)
                    <div class="col-lg-4 col-md-6">
                        <!-- Service Item Start -->
                        <div class="service-item wow fadeInUp">
                            <!-- Service Image Start -->
                            <div class="service-image">
                                <a href="javascript:void(0);" data-cursor-text="View">
                                    <figure class="image-anime">
                                        <img src="{{ url('storage') }}/{{ $s->image }}" alt="{{ ucwords($s->title) }}">
                                    </figure>
                                </a>
                            </div>
                            <!-- Service Image End -->

                            <!-- Service Content Start -->
                            <div class="service-content">
                                <h3><a href="javascript:void(0);">{{ ucwords($s->title) }}</a></h3>
                                <p>{{ $s->short_description }}</p>
                            </div>
                            <!-- Service Content End -->
                        </div>
                        <!-- Service Item End -->
                    </div>
                @endforeach

            </div>
        </div>
    </div>
    <!-- Our Services Section End -->

    <!-- Our Project Start -->
    <div class="our-project" id="projects">
        <div class="container">
            <div class="row section-row align-items-center">
                <div class="col-lg-5">
                    <!-- Section Title Start -->
                    <div class="section-title">
                        <h3 class="wow fadeInUp">latest project</h3>
                        <h2 class="text-anime-style-2" data-cursor="-opaque">Defining style through <span> creative projects.</span></h2>
                    </div>
                    <!-- Section Title End -->
                </div>

                <div class="col-lg-7">
                    <!-- Section Title Content Start -->
                    <div class="section-title-content">
                        <p class="wow fadeInUp" data-wow-delay="0.2s">Our portfolio features a wide variety of projects, including elegantly designed residential spaces and modern, functional commercial interiors that blend style and practicality.</p>
                    </div>
                    <!-- Section Title Content End -->
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <!-- Our Project Nav start -->
                    <div class="our-Project-nav wow fadeInUp" data-wow-delay="0.4s">
                        <ul>
                            @foreach($projecttypes as $pt)
                                <li><a href="#" data-filter=".{{str_replace(' ' , '_' , $pt->title)}}">{{ ucwords($pt->title) }}</a></li>
                            @endforeach
                        </ul>
                    </div>
                    <!-- Our Project Nav End -->
                </div>
    
                <div class="col-lg-12">
                    <div class="row project-item-boxes align-items-center">
                        @foreach($projecttypes as $pt)
                            @foreach($pt->projects as $p)
                                <div class="col-md-6 project-item-box {{ str_replace(' ', '_', $pt->title) }}">
                                    <div class="project-item @if($loop->parent->first) wow fadeInUp @endif">
                                        <div class="project-image">
                                            <div class="project-featured-image">
                                                <a href="{{ url('storage') }}/{{ $p->image }}" data-fancybox="gallery" data-caption="{{ $pt->title }}{{ $loop->iteration }}">
                                                    <figure class="image-anime">
                                                        <img src="{{ url('storage') }}/{{ $p->image }}" alt="{{ $pt->title }}{{ $loop->iteration }}">
                                                    </figure>
                                                </a>
                                            </div>
                                            <div class="project-btn">
                                                <a href="{{ url('storage') }}/{{ $p->image }}">
                                                    <img src="{{ url('frontend/images/arrow-white.svg') }}" alt="">
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Our Project End -->

    <!-- How We Work Start -->
    <div class="how-we-work">
        <div class="container">
            <div class="row section-row align-items-center">
                <div class="col-lg-6">
                    <!-- Section Title Start -->
                    <div class="section-title dark-section">
                        <h3 class="wow fadeInUp">how we work</h3>
                        <h2 class="text-anime-style-2" data-cursor="-opaque">Concept to Completion,<span> Perfectly Executed</span></h2>
                    </div>
                    <!-- Section Title End -->
                </div>

                <div class="col-lg-6">
                    <!-- Section Title Content Start -->
                    <div class="section-title-content dark-section">
                        <p class="wow fadeInUp" data-wow-delay="0.2s">From concept to completion, we handle every step with precision and creativity. Our seamless approach ensures your vision is brought to life, delivering designs that are both functional and inspiring.</p>
                    </div>
                    <!-- Section Title Content End -->
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <!-- How We Work List Start -->
                    <div class="how-we-work-list">
                        <!-- How We Item Start -->
                        <div class="how-we-work-item wow fadeInUp">
                            <div class="icon-box">
                                <img src="{{ url('frontend/images/icon-how-we-work-1.svg') }}" alt="">
                            </div>
                            <div class="how-we-work-content">
                                <h3>01. initial consultation</h3>
                                <p>Understand the client’s goals, budget, preferences, and requirements. Conduct site visits, gather data, and discuss project feasibility to set clear objectives.</p>
                            </div>
                        </div>
                        <!-- How We Item End -->

                        <!-- How We Item Start -->
                        <div class="how-we-work-item wow fadeInUp" data-wow-delay="0.2s">
                            <div class="icon-box">
                                <img src="{{ url('frontend/images/icon-how-we-work-2.svg') }}" alt="">
                            </div>
                            <div class="how-we-work-content">
                                <h3>02. Feasibility Study</h3>
                                <p>Evaluate the property's potential, considering location, zoning laws, market trends, and financial viability. Provide insights to guide informed decision-making.</p>
                            </div>
                        </div>
                        <!-- How We Item End -->

                        <!-- How We Item Start -->
                        <div class="how-we-work-item wow fadeInUp" data-wow-delay="0.4s">
                            <div class="icon-box">
                                <img src="{{ url('frontend/images/icon-how-we-work-3.svg') }}" alt="">
                            </div>
                            <div class="how-we-work-content">
                                <h3>03. Strategic Planning</h3>
                                <p>Create a tailored plan that includes design concepts, cost estimates, timelines, and project strategies, ensuring alignment with the client’s vision and goals.</p>
                            </div>
                        </div>
                        <!-- How We Item End -->

                        <!-- How We Item Start -->
                        <div class="how-we-work-item wow fadeInUp" data-wow-delay="0.6s">
                            <div class="icon-box">
                                <img src="{{ url('frontend/images/icon-how-we-work-4.svg') }}" alt="">
                            </div>
                            <div class="how-we-work-content">
                                <h3>04. Implementation</h3>
                                <p>Oversee procurement, compliance, construction, and execution phases. Ensure quality, timelines, and budgets are maintained, delivering a successful project outcome.</p>
                            </div>
                        </div>
                        <!-- How We Item End -->
                    </div>
                    <!-- How We Work List End -->

                    
                </div>
            </div>
        </div>
    </div>
    <!-- How We Work End -->

    @include('inc.our-skill')

    @include('inc.testimonials' , ['testimonials' => $testimonials])
    
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
    <script>
        $(document).ready(function () {
            setTimeout(() => {
                $(".our-Project-nav ul li:first-child a").click(); 
                // $(".our-Project-nav ul li a").click(function (e) {
                //     e.preventDefault();
                //     $("html, body").animate({
                //         scrollTop: $(window).scrollTop() + 50
                //     }, 1000);
                // });

            }, 1000);
        });
    </script>
@stop