@extends('layout.frontend.master-layout')
@section('page-title')
    <title>
        {{ isset($seoPageName->meta_title) ? @$seoPageName->meta_title . ' - ' . @$viewComposerSiteSetting->company_name : 'About Us - 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')
    <section class="relative min-h-[450px] rounded-2xl overflow-hidden m-2">
        <div class="absolute inset-0">
            <img class="w-full h-full object-cover" src="{{ asset(@$siteBanner->banner_image) }}" alt="">
        </div>

        <div class="absolute top-0 left-0 w-full h-full bg-brand-dark-1/30 pt-[10em]">
            <h1 class="text-center h1 text-brand-green-3 font-bold max-sm:text-4xl">
                {{ @$siteBanner->display_name }}
            </h1>
            <div class="text-center text-light-1 mt-4">
                <a href="{{ route('frontend.home') }}">Home</a> <span> > </span> {{ @$siteBanner->display_name }}
            </div>
        </div>

    </section>

    <section class="py-32 max-xl:py-24">
        <div class="space-y-24">
            <div class="grid grid-cols-2 gap-x-14 max-lg:grid-cols-1">
                <div class="relative w-full h-full rounded-2xl overflow-hidden max-sm:min-h-[550px]">
                    <img class="w-full h-full object-cover" src="{{ asset('assets/images/frontend/about.jpg') }}"
                         alt=""/>
                    <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=""/>
                            <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 pr-[10em] max-xl:pr-8 max-lg:px-5 max-lg:mt-10">
                    <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->year_of_expertise }}</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>
                    <hr class="border-t border-t-brand-gray-1">
                    <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]">OUR MISSION</span>
                    </div>
                    <h2 class="text-brand-dark-1 text-xl font-semibold max-lg:text-4xl max-sm:text-xl">
                        {{ strip_tags(@$whoWeAre->our_mission_description) }}</h2>
                    <hr class="border-t border-t-brand-gray-1">
                    <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]">OUR VISION</span>
                    </div>
                    <h2 class="text-brand-dark-1 text-xl font-semibold max-lg:text-4xl max-sm:text-xl">
                        {{ strip_tags(@$whoWeAre->our_vision_description) }}
                    </h2>


                </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]">
                            <h2 class="text-light-1 text-5xl font-semibold max-sm:text-3xl capitalize">{{ @$bessOverview->title }}</h2>
                            <div class="text-light-1">
                                {!! @$bessOverview->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($besses) > 0)
                    <div id="cards">
                        <div class="pt-32 max-sm:pt-14">
                            @forelse($besses as $bess)
                                <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">
                                        <h4 class="text-brand-green-3 text-3xl mt-8 max-sm:text-2xl">{{ $bess->title }}</h4>
                                        <div class="text-brand-green-4 mt-3 mb-8 prose">
                                            {!! $bess->short_description !!}
                                        </div>
                                    </div>
                                </div>
                            @empty
                            @endforelse
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>

    <section class="pt-30 max-xl:py-24 max-sm:pb-0">
        <div class="container">
            <div class="text-center">
                <div class="flex justify-center">
                    <div class="flex uppercase text-brand-dark-1/75 gap-2 items-center mb-6">
                        <img class="w-3" src="{{ asset('assets/images/flash-dark.webp') }}" alt="Golcha">
                        <span class="tracking-[1.6px]">{{ @$ourServiceOverview->core_value_name }}</span>
                    </div>
                </div>
                <h2 class="text-brand-dark-1 text-5xl font-semibold max-lg:text-4xl max-sm:text-3xl">{{ @$ourServiceOverview->core_value_title }}</h2>
                <div class="mt-24">
                    <img class="mx-auto"
                         src="{{ @$ourServiceOverview->core_value_image ? asset(@$ourServiceOverview->core_value_image) : asset('assets/images/frontend/chart.png') }}"
                         alt="Golcha">
                </div>
            </div>
        </div>
    </section>

    @if(count($whyChooseSolarData) > 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 Choose Solar</h2>
                    </div>
                </div>
                <div class="grid grid-cols-3 gap-y-6 gap-x-6 max-lg:grid-cols-1 max-lg:gap-y-6">
                    @forelse($whyChooseSolarData as $index => $whyChooseSolar)
                        <div class="bg-light-2 rounded-xl border border-brand-green-4 p-6 space-y-4">
                            <img class="w-12 h-12" src="{{ asset($whyChooseSolar->icon) }}" alt="Golcha">
                            <h4 class="text-2xl font-semibold text-brand-dark-1 mb-4 max-sm:font-normal">
                                {{ $whyChooseSolar->title }}
                            </h4>
                            <div class="">
                                {!! $whyChooseSolar->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
    @include('frontend.include._contact-bottom-part')
@endsection
@section('script')
    @vite(['resources/js/frontend/pages/about.js'])
@endsection