@extends('apple')
@section('title', 'Contact Us')

@section('content')

<!-- =========================
        HERO SECTION
========================= -->

<section class="relative bg-indigo-800 text-white">

    <div class="absolute inset-0">

        <img src="{{ asset('images/ac3.jpg') }}"
             class="w-full h-full object-cover opacity-30">

    </div>

    <div class="relative max-w-7xl mx-auto px-6 py-28 text-center">

        <h2 class="text-3xl md:text-5xl font-bold mb-6">
            Contact Us
        </h2>

        <p class="text-lg md:text-xl max-w-3xl mx-auto mb-8">
            Silver Jubilee Reunion & Cultural Festival 2027
        </p>

         <a href="{{route('Registration_Reunion_regular.show')}}"
           class="bg-yellow-400 text-black px-8 py-4 rounded-full font-semibold hover:bg-yellow-300 transition">

            Register(Running stu.)
        </a><br><br><br>
        <a href="{{route('Registration_Reunion.show')}}"
           class="bg-yellow-400 text-black px-8 ml-4 py-4 rounded-full font-semibold hover:bg-yellow-300 transition">

            Register(Ex-stu.)

        </a>

        <!-- Scroll -->
        <div class="mt-16 animate-bounce">

            <svg xmlns="http://www.w3.org/2000/svg"
                 class="w-8 h-8 mx-auto text-white"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor">

                <path stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M19 9l-7 7-7-7"/>

            </svg>

        </div>

    </div>

</section>

<!-- =========================
      ORGANIZING COMMITTEE
========================= -->

<section class="py-24 bg-gradient-to-b from-gray-100 to-white">

    <div class="max-w-7xl mx-auto px-6">

        <div class="text-center mb-16">

            <span class="px-5 py-2 rounded-full bg-indigo-100 text-indigo-700 font-semibold">
                SILVER JUBILEE REUNION 2027
            </span>

            <h2 class="text-4xl md:text-5xl font-bold mt-5 text-gray-800">
                Organizing Committee
            </h2>

            <p class="text-gray-600 mt-5 max-w-3xl mx-auto">
                Meet the dedicated teams working tirelessly to make our
                Silver Jubilee Reunion 2027 a memorable celebration.
            </p>

        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">

            <!-- Card Start -->
            @php
                $teams = [
                    ['Registration Team','Md. Alauddin','01812-345678','12 Members'],
                    ['Reception Team','Md. Hasan','01711-111111','15 Members'],
                    ['Cultural Team','Shirin Akter','01819-222222','18 Members'],
                    ['Food & Catering','Abdul Karim','01618-333333','20 Members'],
                    ['Decoration Team','Jannatul Ferdous','01777-444444','10 Members'],
                    ['Media & Publicity','Rakib Hossain','01888-555555','8 Members'],
                    ['Volunteer Team','Sabbir Ahmed','01999-666666','25 Members'],
                    ['Finance Team','Nur Alam','01555-777777','7 Members'],
                ];
            @endphp

            @foreach($teams as $team)

            <div class="bg-white rounded-3xl shadow-xl overflow-hidden hover:-translate-y-2 hover:shadow-2xl transition duration-300">

                <!-- Photo -->
                <div class="relative">

                    <img src="{{ asset('images/team.jpg') }}"
                         class="w-full h-56 object-cover">

                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>

                    <h3 class="absolute bottom-4 left-4 text-white text-2xl font-bold">
                        {{ $team[0] }}
                    </h3>

                </div>

                <!-- Body -->
                <div class="p-6">

                    <div class="space-y-3">

                        <p>
                            <span class="font-semibold text-indigo-700">
                                👤 Team Leader
                            </span><br>

                            {{ $team[1] }}
                        </p>

                        <p>
                            <span class="font-semibold text-indigo-700">
                                📞 Mobile
                            </span><br>

                            {{ $team[2] }}
                        </p>

                        <p>
                            <span class="font-semibold text-indigo-700">
                                👥 Members
                            </span><br>

                            {{ $team[3] }}
                        </p>

                    </div>


                </div>

            </div>

            @endforeach

        </div>

    </div>

</section>

@endsection