@extends('frontend.layouts.partials.app')
@section('title', 'About Us')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')

    <section class="h-[250px] lg:h-[500px] w-full">
        <div class="flex flex-col lg:flex-row w-full h-full">
            <img src="{{ asset('assets/img/hero_inner.jpg') }}" class="h-full lg:w-1/2" alt="" />
            <div class="hidden h-full lg:w-1/2 bg-[#2c2c2c] p-8 text-white lg:flex justify-center items-center lg:p-0">
                <h2 class="text-2xl lg:text-4xl font-bold">Board of Directors</h2>
            </div>
        </div>
    </section>


    <section class="bg-[#edf1ee] py-16 px-6 sm:px-10 lg:px-20">
        <!-- Chairman Section -->
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-[#004d6e] tracking-tight">
                Chairman
            </h2>
        </div>

        <div class="flex flex-wrap justify-center gap-10">
            @foreach ($chairman as $team)
                <div
                    class="bg-white rounded-3xl shadow-lg overflow-hidden w-[300px] hover:shadow-2xl transition duration-300">
                    <div class="h-72 w-full">
                        <img src="{{ asset('storage/' . $team->photo) }}" alt="{{ $team->name }}"
                            class="w-full h-full object-cover" />
                    </div>
                    <div class="p-6 text-center">
                        <h3 class="text-xl font-semibold text-[#19352d]">{{ $team->name }}</h3>
                        <p class="text-[#004d6e] text-sm font-bold mt-2 uppercase tracking-wide">
                            {{ $team->designation->name }}
                        </p>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Board of Directors Section -->
        <div class="text-center mt-32 mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-[#004d6e] tracking-tight">
                Board of Directors
            </h2>
        </div>

        <div class="flex flex-wrap justify-center gap-10">
            @foreach ($boardOfDirectors as $team)
                <div
                    class="bg-white rounded-3xl shadow-lg overflow-hidden w-[300px] hover:shadow-2xl transition duration-300">
                    <div class="h-72 w-full">
                        <img src="{{ asset('storage/' . $team->photo) }}" alt="{{ $team->name }}"
                            class="w-full h-full object-cover" />
                    </div>
                    <div class="p-6 text-center">
                        <h3 class="text-xl font-semibold text-[#19352d]">{{ $team->name }}</h3>
                        <p class="text-[#004d6e] text-sm font-bold mt-2 uppercase tracking-wide">
                            {{ $team->designation->name }}
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
    </section>


@endsection