@extends('frontend.layouts.app')
@section('title', 'Project Support Partner Title')
@section('meta', 'Project Support Partner Meta Description')
@section('content')

    <!-- banner-section -->
    <section class="relative mt-10 pt-[120px] lg:pt-[120px]">
        <!-- Banner Image -->
        <div class="relative">
            <img src="{{ asset('breadcrumb.jpg') }}" alt="Banner Image" class="h-40 w-full object-cover" />

            <!-- Overlay content -->
            <div class="absolute top-5 lg:top-12 w-full">
                <div class="flex flex-col space-y-4 lg:space-y-8 ml-6 lg:ml-10 px-4 lg:px-6">
                    <h3 class="text-2xl md:text-2xl font-extrabold text-white">
                        {{ __('project-support-partner.project_support_partner') }}
                    </h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}" class="text-white font-bold">
                            {{ __('project-support-partner.home') }}
                        </a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <p class="text-white font-bold hover:cursor-pointer">
                            {{ __('project-support-partner.project_support_partner') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- banner-section -->

    <!-- content -->
    <section class="min-h-[60vh] flex flex-col">
        <!-- Heading Section -->
        <div class="mb-10 text-center mx-auto md:mb-12 max-w-8xl pt-10">
            <div>
                <p
                    class="inline-block px-3 py-px mb-4 text-xs lg:text-sm font-semibold tracking-wider text-primary uppercase rounded-full bg-teal-accent-400">
                    {{ __('project-support-partner.navigate_fast') }}
                </p>

                <!-- Main Title -->
                <h2
                    class="max-w-lg mb-6 font-sans text-2xl text-center leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl md:mx-auto">
                    <span class="relative inline-block text-[#5da174]">
                        <svg viewBox="0 0 52 24" fill="currentColor"
                            class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
                            <defs>
                                <pattern id="project-support-partner-pattern" x="0" y="0" width=".135" height=".30">
                                    <circle cx="1" cy="1" r=".7"></circle>
                                </pattern>
                            </defs>
                            <rect fill="url(#project-support-partner-pattern)" width="52" height="24"></rect>
                        </svg>
                        <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                            {{ __('project-support-partner.project_support_partner') }}
                        </span>
                    </span>
                </h2>

                <!-- Description -->
                <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl mx-auto line-clamp-3 text-gray-600 font-medium">
                    {{ __('project-support-partner.project_support_partner_description') }}
                </p>
            </div>

            <div class="min-h-[60vh] flex flex-col mb-18 text-center mx-auto md:mb-12 max-w-8xl pt-8">

                @foreach ($companyProfiles as $company)
                    <div class="flex flex-col text-gray-700">

                        <!-- Wrapper -->
                        <div
                            class="flex flex-col xl:flex-row 
                        {{ $loop->iteration % 2 == 0 ? 'xl:flex-row-reverse' : '' }}
                        xl:justify-around justify-center 
                        gap-10 mx-auto mt-10 p-10 sm:p-10 md:px-20 lg:px-40">

                            <!-- Image + Heading -->
                            <div class="flex-2 flex flex-col items-center text-center self-start">

                                <!-- Image -->
                                <div class="flex justify-center items-start text-center">
                                    @if ($company->image)
                                        <img src="{{ asset($company->image) }}"
                                            alt="{{ app()->getLocale() == 'np' ? $company->name_np : $company->name_en }}"
                                            class="w-full sm:w-auto sm:max-w-lg h-64 object-contain rounded-md m-4" />
                                    @endif
                                </div>

                                <!-- Title -->
                                <div class="flex flex-col text-center">
                                    <p class="px-3 font-semibold text-xl">
                                        {{ app()->getLocale() == 'np' ? $company->name_np : $company->name_en }}
                                    </p>

                                    <p class="text-primary font-medium tracking-wide text-lg">
                                        {{ __('Company Profile') }}
                                    </p>
                                </div>
                            </div>

                            <!-- Description + Button -->
                            <div class="flex-2 text-justify">
                                <p class="text-gray-700 leading-relaxed mb-4">
                                    {!! app()->getLocale() == 'np' ? $company->description_np : $company->description_en !!}
                                </p>

                                <a href="#"
                                    class="relative inline-block px-8 py-3 font-semibold text-white bg-primary rounded-lg
          overflow-hidden group shadow-lg transition-all duration-300 ease-in-out">

                                    <!-- Background effect -->
                                    <span
                                        class="absolute inset-0 w-full h-full bg-white opacity-0 group-hover:opacity-10 transition-all duration-300 rounded-lg"></span>

                                    <!-- Text with hover effect -->
                                    <span
                                        class="relative z-10 group-hover:translate-x-1 group-hover:translate-y-1 transition-transform duration-300">
                                        Read More
                                    </span>

                                    <!-- Animated arrow -->
                                    <span
                                        class="absolute right-4 top-1/2 -translate-y-1/2 transform opacity-0 group-hover:opacity-100 transition-all duration-300">
                                        &rarr;
                                    </span>
                                </a>

                            </div>

                        </div>
                    </div>
                @endforeach

            </div>

        </div>
    </section>
@endsection