@extends('frontend.layouts.app')
@section('title', 'About Us')
@section('meta', 'About Us')

@section('content')

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


            <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-black/30"></div>


            <div class="absolute inset-0 flex items-center px-6 lg:px-10">
                <div>
                    <h3 class="text-2xl lg:text-3xl font-extrabold text-white">
                        {{ __('about-us.about_us') }}
                    </h3>

                    <div class="flex items-center space-x-2 text-white mt-2">
                        <a href="{{ route('homepage') }}" class="font-semibold hover:text-primary transition">
                            {{ __('about-us.home') }}
                        </a>
                        <span class="font-bold">/</span>
                        <span class="font-semibold">
                            {{ __('about-us.about_us') }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </section>


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

            <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">
                {{ __('about-us.who_we_are') }}
            </p>


            <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="message-from-the-director-pattern" x="0" y="0" width=".135" height=".30">
                                <circle cx="1" cy="1" r=".7"></circle>
                            </pattern>
                        </defs>
                        <rect fill="url(#message-from-the-director-pattern)" width="52" height="24"></rect>
                    </svg>
                    <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                        {{ __('about-us.about_us') }}

                    </span>
                </span>
            </h2>
            <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl mx-auto text-gray-600 font-semibold">
                {{ __('about-us.discover_story') }}</p>
        </div>
        @php $firstProfile = $companyProfiles->first(); @endphp

        @if ($firstProfile)
            <div class="max-w-7xl mx-auto px-6 lg:px-10 flex flex-col xl:flex-row gap-10 items-start mb-20">
                @if ($firstProfile->image)
                    <img src="{{ asset($firstProfile->image) }}" alt="{{ $firstProfile->name_en }}"
                        class="w-full xl:w-[420px] rounded-lg shadow-md object-cover" />
                @endif

                <div class="flex-1 space-y-4">
                    <h2 class="text-2xl lg:text-3xl font-bold text-primary">
                        {{ app()->getLocale() == 'np' ? $firstProfile->name_np : $firstProfile->name_en }}
                    </h2>

                    <p class="text-gray-700 leading-relaxed">
                        {!! app()->getLocale() == 'np' ? $firstProfile->description_np : $firstProfile->description_en !!}
                    </p>
                </div>
            </div>
        @endif


        <div class="max-w-7xl mx-auto px-6 lg:px-10 mb-16">
            <h2 class="text-2xl lg:text-3xl font-bold text-primary mb-4">
                {{ __('about-us.functions') }}
            </h2>
            <p class="text-gray-700 text-base lg:text-lg">
                {{ __('about-us.functions_description') }}
            </p>
        </div>

        @foreach ($companyProfiles->skip(1) as $profile)
            <div class="max-w-7xl mx-auto px-6 lg:px-10 mb-20">


                <div class="flex flex-col items-center text-center">
                    @if ($profile->image)
                        <img src="{{ asset($profile->image) }}" alt="{{ $profile->name_en }}"
                            class="w-full max-w-xl rounded-lg shadow-md object-contain my-10">
                    @endif

                    <p class="text-gray-500 text-sm">
                        {{ __('about-us.fig') }}
                        {{ app()->getLocale() == 'np' ? $profile->name_np : $profile->name_en }}
                    </p>
                </div>


                <div>
                    <h1 class="text-2xl lg:text-3xl font-bold text-primary mb-4">
                        {{ app()->getLocale() == 'np' ? $profile->name_np : $profile->name_en }}
                    </h1>

                    <div>
                        <p class="text-gray-700 leading-relaxed">
                            {!! app()->getLocale() == 'np' ? $profile->description_np : $profile->description_en !!}
                        </p>
                    </div>
                </div>

            </div>
        @endforeach

    </section>

@endsection