@extends('frontend.layouts.app')
@section('title', __('mission-vision.title'))
@section('meta', __('mission-vision.meta_description'))
@section('content')

    <!-- banner-section -->
    <section class="relative">
        <div class="mb-10">
            <img src="{{ asset('assets/images/become-an-agent/breadcrumb-serv.jpg') }}" alt="{{ __('mission-vision.title') }}"
                class="h-60 w-full object-cover" />
        </div>
        <div class="absolute w-full top-20">
            <div class="flex flex-col space-y-8 ml-10">
                <h3 class="text-2xl md:text-4xl font-extrabold text-white">{{ __('mission-vision.title') }}</h3>
                <div class="flex space-x-5 items-center">
                    <a href="{{ route('homepage') }}"
                        class="text-white font-bold">{{ __('mission-vision.breadcrumb.home') }}</a>
                    <p class="text-white text-base fony-bold hover:cursor-pointer">></p>
                    <a href="{{ route('missionAndVision') }}"
                        class="text-accent font-bold">{{ __('mission-vision.breadcrumb.mission_vision') }}</a>
                </div>
            </div>
        </div>
    </section>
    <!-- banner-section -->


    @php
        $data = $aboutUs->mission_vision ?? ($missions ?? null);
    @endphp

    <!-- Mission & Vision Section -->
    <section class="max-w-7xl mx-auto px-6 py-16">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
            @foreach (['mission', 'vision'] as $type)
                @php
                    $iconPath = $mission_vision_images[$loop->index] ?? null;
                    $description = $data[$loop->index]['description'] ?? __("mission-vision.$type.description");
                @endphp

                <div
                    class="group bg-white rounded-2xl shadow-md hover:shadow-2xl transition-transform duration-300 hover:-translate-y-2 p-8 border border-gray-100 relative overflow-hidden">
                    <!-- Accent Line -->
                    <span class="absolute top-0 left-0 w-1.5 h-full bg-accent"></span>

                    <!-- Icon -->
                    <div
                        class="flex items-center justify-center w-20 h-20 rounded-full bg-accent/10 text-accent mx-auto mb-6 group-hover:scale-110 transition">
                        @if ($iconPath)
                            <img src="{{ asset('storage/' . $iconPath) }}" alt="{{ __("mission-vision.$type.title") }} Icon"
                                class="h-10 w-10 object-contain">
                        @else
                            {{-- Default SVG --}}
                            @if ($type === 'mission')
                                <svg class="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path
                                        d="M12 16V21M12 21H7M12 21H17M17 13H17.01M12 13H12.01M7 13H7.01M7 8H7.01M12 8H12.01M17 8H17.01M3 3L21 21" />
                                </svg>
                            @else
                                <svg class="h-10 w-10" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M2 12S5.5 7 12 7s10 5 10 5-3.5 5-10 5S2 12 2 12Z" />
                                    <circle cx="12" cy="12" r="2" />
                                </svg>
                            @endif
                        @endif
                    </div>

                    <!-- Title -->
                    <h2 class="text-2xl font-bold text-gray-900 text-center mb-4">
                        {{ __("mission-vision.$type.title") }}
                    </h2>

                    <!-- Description -->
                    <p class="text-gray-600 leading-relaxed text-center">
                        {{ $description }}
                    </p>
                </div>
            @endforeach
        </div>
    </section>
    <!-- End Mission & Vision Section -->
@endsection