@extends('frontend.layouts.app')
@section('title', 'Technical Assistance Team')
@section('meta', content: 'Technical Assistance Team Page 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">
                        {{ __('technical-assistance-team.technical_assistance_team') }}
                    </h3>
                    <div class="flex space-x-3 items-center">
                        <a href="/" class="text-white font-bold"> {{ __('technical-assistance-team.home') }}
                        </a>
                        <p class="text-white text-base font-bold hover:cursor-pointer">></p>
                        <a href="/technical-assistance-team" class="text-white font-bold cursor-pointer">
                            {{ __('technical-assistance-team.technical_assistance_team') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </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>
                <!-- 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">
                    {{ __('technical-assistance-team.here_to_help') }}
                </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="technical-assistance-team-pattern" x="0" y="0" width=".135" height=".30">
                                    <circle cx="1" cy="1" r=".7"></circle>
                                </pattern>
                            </defs>
                            <rect fill="url(#technical-assistance-team-pattern)" width="52" height="24">
                            </rect>
                        </svg>
                        <span class="relative text-2xl lg:text-3xl font-extrabold text-primary">
                            {{ __('technical-assistance-team.technical_assistance_team') }}
                        </span>
                    </span>
                </h2>
            </div>

            <!-- Description -->
            <p class="p-2 text-base lg:text-lg text-center lg:max-w-4xl mx-auto line-clamp-3 text-gray-700">
                {{ __('technical-assistance-team.technical_assistance_team_description') }}
            </p>

            <div class="flex flex-wrap justify-center gap-8">
                @foreach ($teams as $team)
                    <article
                        class="w-[300px] md:w-[400px] bg-gray-100 p-5 rounded-2xl shadow-md flex flex-col items-center text-center gap-3 h-[480px]">
                        {{-- Designation --}}
                        <div class="text-brandBlue font-bold text-lg line-clamp-2">
                            {{ $team->designation?->{'name_' . app()->getLocale()} ?? '—' }}
                        </div>

                        {{-- Department --}}
                        <div class="text-sm font-medium text-gray-600">
                            {{ $team->department?->{'name_' . app()->getLocale()} ?? '—' }}
                        </div>

                        {{-- Profile Image --}}
                        <img src="{{ asset($team->image) }}" alt="{{ $team->{'name_' . app()->getLocale()} }}"
                            class="w-48 h-48 object-cover rounded-full border-2 border-gray-400">

                        {{-- Name --}}
                        <div class="text-primary text-lg font-bold">
                            {{ $team->{'name_' . app()->getLocale()} }}
                        </div>

                        {{-- Contact Details --}}
                        <div class="flex flex-col items-center gap-3 mt-2 text-gray-600 text-left w-full max-w-xs">
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1 text-gray-600" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 5a2 2 0 012-2h1.586a1 1 0 01.707.293l2.414 2.414a1 1 0 01.293.707V9a1 1 0 01-.293.707l-1.293 1.293a16.016 16.016 0 006.586 6.586l1.293-1.293A1 1 0 0115 15h2.586a1 1 0 01.707.293l2.414 2.414a1 1 0 01.293.707V21a2 2 0 01-2 2h-.586c-9.389 0-17-7.611-17-17V5z" />
                                </svg>
                                <span>{{ $team->phone_no ?? '—' }}</span>
                            </div>
                            <a href="mailto:{{ $team->email ?? '' }}"
                                class="flex items-center gap-2 hover:text-primary transition-colors duration-200">
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-1" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                                <span>{{ $team->email ?? '—' }}</span>
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

@endsection

@push('scripts')
    <script type="module" src="/src/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
@endpush