@extends('layouts.frontend.master')

@section('title', 'BAU 2001–2002 Alumni Association')

@section('content')
    <section class="bg-[#F4FAF6] text-gray-900 font-karla py-16">
        <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 px-6">
            @foreach($committeeTypes as $committee)
                <div class="bg-white rounded-lg shadow-lg p-6 transition-all duration-300 hover:shadow-xl hover:border-green-600 hover:border">
                    <h3 class="font-bold text-xl text-green-600">{{ $committee->name }}</h3>
                    <p class="text-gray-600 mt-3">
                        {{ $committee->description }}
                    </p>
                    @auth
                        <a href="{{ route('admin.committee-members.index') }}"
                           class="mt-4 bg-transparent border border-green-600 text-green-600 font-medium py-2 px-4 rounded transition-all duration-300 flex items-center">
                            Learn more
                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </a>
                    @else
                        <a href="{{ route('login') }}"
                           class="mt-4 bg-transparent border border-green-600 text-green-600 font-medium py-2 px-4 rounded transition-all duration-300 flex items-center">
                            Learn more
                            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </a>
                    @endauth
                </div>
            @endforeach
        </div>
    </section>
@endsection