@extends('layout.frontend.master-layout')
@section('page-title')
    <title>
        {{ isset($seoPageName->meta_title) ? @$seoPageName->meta_title . ' - ' . @$viewComposerSiteSetting->company_name : 'Home - Golcha Green Energy' }}
    </title>
@endsection
@section('meta-tags')
    <meta name="title" content="{{ @$seoPageName->meta_title }}">
    <meta name="description" content="{{ @$seoPageName->meta_description }}">
@endsection
@section('style')
@endsection
@section('main-content')


    <div class="swiper homeBannerSwiper">
        <div class="swiper-wrapper">
            @forelse($homeBanners as $homeBanner)
                <div class="swiper-slide">
                    <section class="relative min-h-[884px] content-center max-xl:rounded-none max-lg:min-h-[650px] max-sm:min-h-[800px] rounded-2xl overflow-hidden m-2">
                        <div class="absolute inset-0 -z-1">
                            <img class="w-full h-full object-cover overflow-hidden max-xl:mx-0 max-xl:mt-0 max-xl:rounded-none"
                                 src="{{ asset($homeBanner->banner_image_lg) }}" alt="Company Logo">
                        </div>
                        <div class="container mt-50 max-lg:mt-20">
                            <div>
                                <h1 class="max-xs:!text-3xl max-md:text-4xl max-xl:text-5xl h1 text-white">
                                    @php
                                        $words = explode(' ', $homeBanner->title);
                                        if (count($words) > 3) {
                                            $title = implode(' ', array_slice($words, 0, 3)) . '<br>' . implode(' ', array_slice($words, 3));
                                        } else {
                                            $title = implode(' ', $words);
                                        }
                                    @endphp
                                    {!! $title !!}
                                </h1>
                                <p class="text-light-1 max-w-[960px] mt-5 max-xl:max-w-none">
                                    {{ strip_tags($homeBanner->short_description) }}
                                </p>
                                @if($homeBanner->button_link)
                                    <div class="flex flex-wrap mt-12 max-md:mt-6">
                                        <a href="{{ $homeBanner->button_link }}"
                                           class="btn btn-primary flex items-center gap-2 py-3.5 transition ease-in-out duration-300 hover:btn-primary-dark">
                                            {{ $homeBanner->button_text }}
                                            <img class="w-3" src="{{ asset('assets/images/flash-light.webp') }}" alt="Golcha">
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </section>
                </div>
            @empty
            @endforelse
        </div>
    </div>




    <section class="py-32 max-xl:py-24" id="about">
        <div class="container">
            <div class="grid grid-cols-2 gap-x-14 max-lg:gap-x-8 max-md:grid-cols-1">
                <div class="relative w-full h-full rounded-2xl overflow-hidden max-sm:min-h-[550px] group">
                    <img
                        class="w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110"
                        src="{{ asset('assets/images/frontend/about.jpg') }}" alt="who we are"/>
                    <div class="absolute inset-0 bg-gradient-to-t from-brand-dark-1/60 to-white/5"></div>
                    <div class="bg-white  absolute bottom-0 right-0 pl-2 pt-2 rounded-tl-2xl">
                        <div
                            class="w-[240px] bg-brand-green-5 space-y-2 py-8 px-4 rounded-xl text-center before:bg-curve-1 before:w-5 before:aspect-square before:block before:right-0 before:-top-5 before:absolute before:[--color-1:transparent] before:[--color-2:white] after:bg-curve-1 after:w-5 after:aspect-square after:block after:-left-5 after:bottom-0 after:absolute after:[--color-1:transparent] after:[--color-2:white] max-sm:py-4">
                            <img class="w-12 mx-auto" src="{{ asset('assets/images/medal.webp') }}" alt="who we are"/>
                            <h5 class="text-brand-green-3 text-3xl font-semibold max-sm:text-xl">{{ @$whoWeAre->innovator_title }}</h5>
                            <p class="text-light-1">{{ @$whoWeAre->innovator_short_text }}</p>
                        </div>
                    </div>
                </div>

                <div class="space-y-8 max-md:mt-10 max-md:space-y-4">
                    <div class="flex uppercase text-brand-dark-1/75 gap-2 items-center">
                        <img class="w-3 " src="{{ asset('assets/images/flash-dark.webp') }}" alt="Golcha">
                        <span class="tracking-[1.6px]">who we are</span>
                    </div>
                    <h2 class="text-brand-dark-1 text-5xl font-semibold max-lg:text-4xl max-sm:text-3xl">{{ @$whoWeAre->title }}</h2>
                    <div>
                        {!! @$whoWeAre->short_description !!}

                    </div>
                    <div>
                        <ul class="grid grid-cols-4 justify-between max-xl:grid-cols-2 gap-x-10 gap-y-10">
                            <li>
                                <h5 class="text-4xl font-semibold">{{ @$whoWeAre->year_of_expertise }}</h5>
                                <span class="text-sm">Years of Expertise</span>
                            </li>
                            <li>
                                <h5 class="text-4xl font-semibold">{{ @$whoWeAre->happy_client }}</h5>
                                <span class="text-sm">Happy Clients</span>
                            </li>
                            <li>
                                <h5 class="text-4xl font-semibold">{{ @$whoWeAre->solar_power }}</h5>
                                <span class="text-sm">Solar Power</span>
                            </li>
                            <li>
                                <h5 class="text-4xl font-semibold">{{ @$whoWeAre->project_completed }}</h5>
                                <span class="text-sm">Projects Completed</span>
                            </li>
                        </ul>
                    </div>
                    <div class="flex flex-wrap mt-12 max-md:mt-6">
                        <a href=""
                           class="btn btn-primary flex items-center gap-2 py-3.5 transition ease-in-out duration-300 hover:btn-primary-dark">
                            Find Out About Us
                            <img class="w-3" src="{{ asset('assets/images/flash-light.webp') }}" alt="Golcha">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="service-block pb-32 max-xl:pb-24 bg-brand-dark-1 rounded-2xl mx-4" id="services">
        <div class="container">
            <div class="grid grid-cols-2 gap-x-14 max-lg:grid-cols-1 max-lg:gap-y-8">

                <div id="cards">
                    <div class="text-white sticky top-0 pt-32">
                        <div class="space-y-8 max-w-[500px]">
                            <div class="flex uppercase text-brand-dark-1/75 gap-2 items-center">
                                <img class="w-3" src="{{ asset('assets/images/flash-light.webp') }}" alt="Golcha">
                                <span
                                    class="tracking-[1.6px] text-light-1">{{ @$ourServiceOverview->our_services_name }}</span>
                            </div>
                            <h2 class="text-light-1 text-5xl font-semibold max-sm:text-3xl">{{ @$ourServiceOverview->title }}</h2>
                            <div class="text-light-1">
                                {!! @$ourServiceOverview->short_description !!}
                            </div>
                            {{--                            <div class="flex flex-wrap mt-12">--}}
                            {{--                                <a href="" class="btn btn-outline-dark flex items-center gap-2 py-3.5">--}}
                            {{--                                    See All Services--}}
                            {{--                                </a>--}}
                            {{--                            </div>--}}
                        </div>
                    </div>
                </div>
                @if(count($ourServices) > 0)
                    <div id="cards">
                        <div class="pt-32">
                            @forelse($ourServices as $ourService)
                                <div class="card sticky top-0 pt-4" style="--index: 1;">
                                    <div
                                        class="service-list bg-brand-green-5 p-10 rounded-2xl border border-brand-green-4 max-sm:p-5 max-lg:pb-24">
                                        <img class="w-12 h-12"
                                             src="{{ $ourService->icon ? $ourService->icon : asset('assets/images/home.webp') }}"
                                             alt=""/>
                                        <h4 class="text-brand-green-3 text-3xl mt-5 max-sm:text-2xl">{{ $ourService->title }}</h4>
                                        <div class="text-brand-green-4 mt-3 mb-8">
                                            {!! $ourService->short_description !!}
                                        </div>
                                        {{--                                <div class="mb-6">--}}
                                        {{--                                    <a href="" class="btn btn-outline-dark py-4 ">Learn More</a>--}}
                                        {{--                                </div>--}}
                                    </div>
                                </div>
                            @empty
                            @endforelse
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>
    @if(count($products) > 0)
        <section class="pt-24 max-xl:pt-24 rounded-2xl overflow-hidden">
            <div class="container">
                <div class="space-y-8">
                    <div class="flex uppercase text-brand-dark-1/75 gap-2 items-center justify-center">
                        <img class="w-3" src="{{ asset('assets/images/flash-dark.webp') }}" alt="Golcha">
                        <span
                            class="tracking-[1.6px]">Products</span>
                    </div>
                    <div class="max-w-4xl text-center space-y-6 mx-auto">
                        <h2 class="text-5xl font-semibold text-brand-dark-1 max-sm:text-3xl">Comprehensive Products
                            Tailored
                            to Your Needs</h2>
                        <div>
                            <p class="text-brand-dark-2 text-lg leading-8">
                                From design to installation and maintenance, we offer end-to-end solar energy services
                                that
                                guarantee maximum efficiency and long-term savings.
                            </p>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-4 max-lg:grid-cols-2 max-sm:grid-cols-1">
                        @forelse($products as $product)
                            <div class="bg-light-2 border border-brand-green-4 p-4 rounded-2xl">
                                <div class="group overflow-hidden rounded-2xl">
                                    <img
                                        class="h-[250px] object-cover rounded-2xl overflow-hidden transition-transform duration-500 ease-in-out group-hover:scale-110"
                                        src="{{ asset($product->image) }}" alt="Golcha">
                                </div>
                                <h4 class="text-xl font-semibold my-2 mt-8">
                                    <a href="{{ route('frontend.productDetails',$product->slug) }}">{{ $product->title }}</a>
                                </h4>
                                <div class="pb-3 text-brand-dark-2">
                                    {{ strip_tags(\Illuminate\Support\Str::words($product->description,'12','...')) }}
                                </div>
                            </div>
                        @empty
                        @endforelse

                    </div>
                </div>
            </div>
        </section>
    @endif
    @if(count($whyWorkWithUs) > 0)
        <section class="py-32 max-xl:py-24">
            <div class="container">
                <div class="grid grid-cols-2 gap-x-20 mb-15 max-lg:grid-cols-1 max-lg:gap-y-5">
                    <div>
                        <h2 class="text-5xl font-semibold text-brand-dark-1 max-sm:text-3xl">Why you should <br> work
                            with
                            us</h2>
                    </div>
                    <div>
                        <p class="text-brand-dark-2 text-lg leading-8">
                            At Golchha, we are dedicated to delivering sustainable and innovative
                            green energy solutions that empower your journey toward a cleaner
                            future.
                        </p>
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-x-6 max-lg:grid-cols-1 max-lg:gap-y-6">
                    @forelse($whyWorkWithUs as $index => $workWithUs)
                        <div class="bg-light-2 rounded-xl border border-brand-green-4 p-6 space-y-4">
                            <div
                                class="bg-brand-green-1 py-2 px-3 font-thin text-2xl w-fit rounded text-brand-green-3">{{ sprintf('%02d', $index + 1) }}
                            </div>
                            <h4 class="text-2xl font-semibold text-brand-dark-1 mb-4 max-sm:font-normal">
                                {{ $workWithUs->title }}
                            </h4>
                            <div class="">
                                {!! $workWithUs->short_description !!}
                            </div>
                        </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </section>
    @endif
    @if(count($technologyCollaborations) > 0)
        <section>
            <div class="container">
                <div
                    class="swiper client-swiper before:absolute before:left-0 before:top-0 before:z-2 before:h-full before:w-10 before:bg-gradient-to-r before:from-[#F8FBFF] before:to-transparent after:absolute after:right-0 after:top-0 after:z-2 after:h-full after:w-10 after:bg-gradient-to-l after:from-[#F8FBFF] after:to-transparent mb-20"
                    data-direction="false">
                    <div class="swiper-wrapper !ease-linear">
                        @forelse($technologyCollaborations as $technologyCollaboration)
                            <div class="swiper-slide">
                                <img class="mx-auto object-contain grayscale hover:grayscale-0"
                                     title="{{ $technologyCollaboration->title ?? '' }}"
                                     src="{{ asset($technologyCollaboration->icon) }}" alt="">
                            </div>
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
        </section>
    @endif
    <section>
        <div class="container">
            <div class="grid grid-cols-2 gap-x-14 max-xl:grid-cols-1 max-xl:gap-y-8">
                <div class="max-xl:order-1 group overflow-hidden rounded-2xl flex items-center justify-center">
                    <img class="w-1/2"
                         src="{{ asset(@$ourStrategicAlliance->image) }}" alt="">
                </div>
                <div class="space-y-4">
                    <div class="flex gap-x-2">
                        <span class="text-brand-dark-1 uppercase">{{ @$ourStrategicAlliance->benefit_name }}</span>
                    </div>
                    <h2 class="text-brand-dark-1 text-5xl font-semibold max-sm:text-3xl">{{ @$ourStrategicAlliance->title }}</h2>
                    <div class="text-brand-dark-1 prose">
                        {!! @$ourStrategicAlliance->short_description !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mt-[160px] max-xl:mt-[100px]" id="project">
        <div class="container">
            <div class="grid grid-cols-2 items-end max-lg:grid-cols-1 max-lg:gap-y-4">
                <div class="">
                    <div class="flex gap-x-2 mb-4 items-center">
                        <img class="w-3" src="{{ asset('assets/images/flash-dark.webp') }}" alt="Golcha">
                        <span class="text-brand-dark-1 uppercase">{{ @$ourProjectsOverview->our_project_name }}</span>
                    </div>
                    <h2 class="text-5xl font-semibold text-brand-dark-1 max-xl:text-4xl max-sm:text-3xl">
                        @php
                            $words = explode(' ', $ourProjectsOverview->title);
                            if (count($words) > 3) {
                                $title = implode(' ', array_slice($words, 0, 3)) . '<br>' . implode(' ', array_slice($words, 3));
                            } else {
                                $title = implode(' ', $words);
                            }
                        @endphp
                        {!! $title !!}
                    </h2>
                </div>
                <p class="text-brand-dark-1">
                    {{ strip_tags(@$ourProjectsOverview->short_description) }}
                </p>
            </div>
            @if(count($ourProjects) > 0)
                <ul class="mt-20 space-y-10 max-lg:mt-10 max-lg:space-y-5">

                    @forelse($ourProjects as $key => $ourProject)
                        @if($key % 2 == 0)
                            <li>
                                <div class="grid grid-cols-[1fr_200px_1fr] items-center max-lg:grid-cols-1">
                                    <div class="col-span-2 row-start-1 col-start-1 group overflow-hidden rounded-2xl">
                                        <img class="transition-transform duration-500 ease-in-out group-hover:scale-110"
                                             src="{{ asset($ourProject->banner_image) }}" alt="">
                                    </div>
                                    <div
                                        class="col-span-2 row-start-1 col-start-2 max-lg:col-start-1 max-lg:row-start-auto">
                                        <div class="bg-white p-20 pb-10 rounded-2xl relative z-1 max-2xl:p-10">
                                            <address class="text-brand-dark-2">{{ $ourProject->location }}</address>
                                            <h3 class="text-brand-dark-1 mt-8  text-[2.5rem] font-semibold max-2xl:text-2xl max-2xl:mt-2">
                                                {{ $ourProject->title }}</h3>
                                            <p class="text-brand-dark-2 mt-8 max-2xl:mt-2">
                                                {{ strip_tags($ourProject->short_description) }}
                                            </p>
                                            <div class="mt-12 [&_th]:text-brand-dark-2 [&_td]:text-brand-dark-1/75 [&_td]:text-2xl [&_tbody]:divide-y [&_tbody]:divide-brand-gray-1 [&_table]:w-full [&_th]:w-32 [&_th]:text-center [&_td]:py-3 [&_th]:align-middle [&_table]:border-y [&_table]:border-brand-gray-1 max-2xl:mt-2
max-2xl:mt-2">
                                                @if(isset($ourProject->highlights))
                                                    <table>
                                                        @forelse(json_decode($ourProject->highlights) as $highlight)
                                                            <tr>
                                                                <th class="text-brand-dark-2 font-thin text-sm !text-left">
                                                                    {{ $highlight->title }}
                                                                </th>
                                                                <td class="text-brand-dark-1/75 text-2xl max-2xl:text-lg">
                                                                    {{ $highlight->value }}
                                                                </td>
                                                            </tr>
                                                        @empty
                                                        @endforelse
                                                    </table>
                                                @endif
                                            </div>
                                            <div class="mt-12 max-lg:mt-4">
                                                <a class="text-brand-dark-1 flex gap-x-2 uppercase"
                                                   href="{{ route('frontend.projectDetails',$ourProject->slug) }}">
                                                    <span>Read More</span>
                                                    <iconify-icon icon="material-symbols:add" width="24"
                                                                  height="24"></iconify-icon
                                                    >
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        @else
                            <li>
                                <div class="grid grid-cols-[1fr_200px_1fr] items-center max-lg:grid-cols-1">
                                    <div class="col-span-2 row-start-1 col-start-1">
                                        <div class="bg-white p-20 pb-10 rounded-2xl relative z-1 max-2xl:p-10">
                                            <address class="text-brand-dark-2">{{ $ourProject->location }}</address>
                                            <h3 class="text-brand-dark-1 mt-8  text-[2.5rem] font-semibold max-2xl:text-2xl max-2xl:mt-2">
                                                {{ $ourProject->title }}</h3>
                                            <p class="text-brand-dark-2 mt-8 max-2xl:mt-2">
                                                {{ strip_tags($ourProject->short_description) }}
                                            </p>
                                            <div
                                                class="mt-12 [&_th]:text-brand-dark-2 [&_td]:text-brand-dark-1/75 [&_td]:text-2xl [&_tbody]:divide-y [&_tbody]:divide-brand-gray-1 [&_table]:w-full [&_th]:w-32 [&_th]:text-center [&_td]:py-3 [&_th]:align-middle [&_table]:border-y [&_table]:border-brand-gray-1 max-2xl:mt-2
max-2xl:mt-2">
                                                @if(isset($ourProject->highlights))
                                                    <table>
                                                        @forelse(json_decode($ourProject->highlights) as $highlight)
                                                            <tr>
                                                                <th class="text-brand-dark-2 font-thin text-sm !text-left">
                                                                    {{ $highlight->title }}
                                                                </th>
                                                                <td class="text-brand-dark-1/75 text-2xl max-2xl:text-lg">
                                                                    {{ $highlight->value }}
                                                                </td>
                                                            </tr>
                                                        @empty
                                                        @endforelse
                                                    </table>
                                                @endif
                                            </div>
                                            <div class="mt-12 max-lg:mt-4">
                                                <a class="text-brand-dark-1 flex gap-x-2 uppercase"
                                                   href="{{ route('frontend.projectDetails',$ourProject->slug) }}">
                                                    <span>Read More</span>
                                                    <iconify-icon icon="material-symbols:add" width="24"
                                                                  height="24"></iconify-icon
                                                    >
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="col-span-2 row-start-1 col-start-2 max-lg:col-start-1 max-lg:[grid-row-start:-2] group overflow-hidden rounded-2xl">
                                        <img class="transition-transform duration-500 ease-in-out group-hover:scale-110"
                                             src="{{ asset($ourProject->banner_image) }}" alt="">
                                    </div>
                                </div>
                            </li>
                        @endif
                    @empty
                    @endforelse

                </ul>
                <div class="flex flex-wrap justify-center mt-20 max-md:mt-6">
                    <a href="{{ route('frontend.project') }}"
                       class="btn btn-primary flex items-center gap-2 py-3.5 transition ease-in-out duration-300 hover:btn-primary-dark">
                        View all Projects
                        <img class="w-3" src="{{ asset('assets/images/flash-light.webp') }}" alt="Golcha">
                    </a>
                </div>
            @endif

        </div>
    </section>
    @if(count($successStories) > 0)
        <section class="mt-[160px] max-xl:mt-[100px]">
            <div class="container">
                <div class="grid grid-cols-2 gap-x-14 max-lg:grid-cols-1">
                    <div class="">
                        <div class="">
                            <div class="flex gap-x-2 items-center">
                                <img class="w-3" src="{{ asset('assets/images/flash-dark.webp') }}" alt="Golcha">
                                <span class="text-brand-dark-1 uppercase">success stories</span>
                            </div>
                            <h2 class="text-brand-dark-1 mt-8  text-[2.5rem] font-semibold mb-4 max-sm:text-3xl">Hear from Our
                                Customers</h2>
                            <p class="text-brand-dark-2 max-w-xl max-lg:max-w-full">Here's what homeowners, businesses, and community
                                leaders
                                are saying about us.</p>
                        </div>
                    </div>
                </div>
                <div class="swiper testimonial_slider mt-10">
                    <div class="swiper-wrapper">
                        @forelse($successStories as $successStory)
                            <div class="swiper-slide">
                                <div class="grid grid-cols-2 max-lg:grid-cols-1 gap-x-14">
                                    <div class="bg-brand-green-5 p-10 rounded-2xl max-lg:pb-30">
                                        <div class="">
                                            <img class="w-[120px]"
                                                 src="{{ isset($successStory->company_logo) ? asset($successStory->company_logo) : '' }}"
                                                 alt="Golcha"
                                                 style="{{ isset($successStory->company_logo) && $successStory->company_logo ? '' : 'display: none;' }}">
                                        </div>
                                        <figure class="mt-10">
                                            <blockquote class="text-brand-green-3 text-[1.625rem] leading-[1.6] max-sm:text-xl">
                                                {{ strip_tags($successStory->short_description) }}
                                            </blockquote>
                                            <figcaption class="text-right mt-10 max-lg:text-left max-lg:mt-6">
                                                <cite
                                                    class="not-italic text-light-1 font-medium text-2xl"> {{ $successStory->full_name }}</cite>
                                                <p class="text-brand-green-4 text-sm">{{ $successStory->designation }}</p>
                                            </figcaption>
                                        </figure>
                                    </div>
                                    <div class="rounded-2xl overflow-hidden max-lg:hidden">
                                        <img class="" src="{{ asset($successStory->user_profile_image) }}" alt="Golcha">
                                    </div>
                                </div>
                            </div>
                        @empty
                        @endforelse
                    </div>
                    <div class="">
                        <div
                            class="swiper-button-next btn btn-primary px-24 max-lg:px-8 gap-x-5 border-8 max-lg:border-2 py-8 border-white !top-[90%] max-lg:!top-[85%] max-lg:!right-[5%] !text-white after:hidden">
                            <span class="max-lg:hidden">NEXT</span>
                            <iconify-icon icon="mdi-light:arrow-right" width="24" height="24"
                                          class="text-white"></iconify-icon>
                        </div>

                        <div
                            class="swiper-button-prev btn btn-primary px-24 max-lg:px-8 gap-x-5 border-8 max-lg:border-2 py-8 border-white !top-[90%] max-lg:!top-[85%] !left-[53%] max-lg:!left-[5%] !text-white after:hidden">
                            <iconify-icon icon="mdi-light:arrow-left" width="24" height="24"
                                          class="text-white"></iconify-icon>
                            <span class="max-lg:hidden">PREV</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    @include('frontend.include._contact-bottom-part')
@endsection

@section('script')
    @vite(['resources/js/frontend/pages/home.js'])
@endsection