@extends('frontend.layouts.app')
@section('title', 'Message From the Director')
@section('meta', 'Message From the Director')
@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">
                        {{ __('message-from-the-director.message_from') }}
                    </h3>
                    <div class="flex space-x-3 items-center">
                        <a href="{{ route('homepage') }}"
                            class="text-white font-bold">{{ __('message-from-the-director.home') }}</a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <p class="text-white font-bold hover:cursor-pointer">
                            {{ __('message-from-the-director.message_from') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- banner-section -->

    <!-- content -->
    <section class="min-h-[20vh] flex flex-col text-center pt-10">
        <!-- Subtitle -->
        <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">
            {{ __('message-from-the-director.a_few_words') }}
        </p>

        <!-- Main Title -->
        <h2
            class="max-w-lg mb-6 font-sans text-2xl leading-none text-primary lg:text-3xl font-extrabold sm:text-4xl 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">
                    {{ __('message-from-the-director.message_from') }}
                </span>
            </span>
        </h2>

        <!-- Description -->
        <p class="p-2 text-base lg:text-lg lg:max-w-4xl mx-auto text-gray-600 font-semibold">
            {{ __('message-from-the-director.director_message_description') }}
        </p>
    </section>


    <section class="min-h-[60vh] flex flex-col mb-18 text-center mx-auto md:mb-12 max-w-8xl pt-8">
        @foreach ($teams as $team)
            <div class="flex flex-col text-gray-700">
                <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 + Name + Designation -->
                    <div class="flex-2 flex flex-col items-center text-center self-start">
                        <div class="flex justify-center items-start text-center">
                            <img src="{{ asset($team->image) }}" alt="{{ $team->{'name_' . app()->getLocale()} }}"
                                class="w-full sm:w-auto sm:max-w-lg h-64 lg:float-left object-contain rounded-md m-4" />
                        </div>
                        <div class="flex flex-col text-center">
                            @if (app()->getLocale() == 'np')
                                <p class="px-3 font-semibold text-xl">{{ $team->name_np }}</p>
                            @else
                                <p class="px-3 font-semibold text-xl">{{ $team->name_en }}</p>
                            @endif
                            <p class="text-primary font-medium tracking-wide text-lg">
                                {{ $team->designation?->{'name_' . app()->getLocale()} ?? '—' }}
                            </p>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="flex-2 text-justify">
                        <p class="text-gray-700 leading-relaxed">
                            {!! app()->getLocale() == 'np' ? $team->description_np : $team->description_en !!}
                        </p>
                    </div>
                </div>
            </div>
        @endforeach
    </section>
@endsection