@extends('layouts/master')

@section('css')
@stop

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

@section('gtaghead')
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5S495HG4');</script>
<!-- End Google Tag Manager -->
@endsection

@section('gtagbody')
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5S495HG4"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
@endsection

@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="frontend/videos/background.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">Crafting Unforgettable Guest Experiences, One Space at a Time</h1>
                            <p class="wow fadeInUp" data-wow-delay="0.2s">We specialise in transforming hospitality environments with cohesive design, operational strategy, and seamless project delivery—from boutique hotels to bustling restaurants and serene resorts.</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">Insightful and Guest-Centric Solutions <span>for Hospitality Excellence</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 tailored services transform your hospitality concept into a high-performing, beautifully crafted space—enhancing both guest satisfaction and operational success.</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 -->
    
    <!-- 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">From Vision to Guest Experience,<span> Perfectly Delivered</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">We manage every phase of your hospitality project with precision, creativity, and guest-focused strategy. Our end-to-end approach ensures every touchpoint—from concept to grand opening—feels effortless, immersive, and exceptional.</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. Discovery & Brand Immersion</h3>
                                <p>We begin by understanding your hospitality concept, brand identity, target guests, and operational goals. Site visits and competitor benchmarking help us tailor the journey from the start.</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 & Market Alignment</h3>
                                <p>We assess the location’s potential, regulatory requirements, guest demand, and financial projections to ensure your vision is commercially viable and strategically sound.</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. Experience-Led Design Strategy</h3>
                                <p>We create a fully-aligned plan blending interior design, flow, guest journey mapping, and operational logistics. Every element supports memorable guest experiences and operational efficiency.</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. Execution & Operational Integration</h3>
                                <p>We oversee procurement, build, and pre-opening phases—coordinating with contractors and vendors while ensuring timelines, budgets, and quality standards are met. Final delivery includes readiness for launch and ongoing support.</p>
                            </div>
                        </div>
                        <!-- How We Item End -->
                    </div>
                    <!-- How We Work List End -->

                    
                </div>
            </div>
        </div>
    </div>
    <!-- How We Work 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 Guest Experience Through <span> Immersive Hospitality Design.</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 showcases a diverse range of hospitality environments—from boutique hotels and stylish cafes to luxury resorts and functional co-working lounges. Each project is thoughtfully designed to elevate guest satisfaction while enhancing operational flow and brand identity.</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 -->
    
@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