@extends('layouts.app')

@section('title', 'Our Team - CHEER MEDICS FOUNDATION')

@section('content')
<!-- TEAM PAGE -->
<div class="pt-20">
    <section class="relative py-32 animated-bg text-white overflow-hidden"><div class="absolute inset-0 bg-black/30"></div><div class="relative max-w-7xl mx-auto px-4 text-center"><h1 class="text-6xl md:text-7xl font-black mb-6">Our Dedicated Team</h1><p class="text-2xl max-w-4xl mx-auto">Passionate individuals working together to support medical students and elderly healthcare</p></div></section>
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex flex-col lg:flex-row gap-8">
                <!-- Sidebar -->
                <aside class="lg:w-72 flex-shrink-0">
                    <div class="lg:sticky lg:top-24 bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
                        <h3 class="text-lg font-black text-gray-900 mb-6 flex items-center gap-2"><span class="w-8 h-8 gradient-primary rounded-lg flex items-center justify-center"><i class="fas fa-layer-group text-white text-sm"></i></span>Team Categories</h3>
                        <nav class="space-y-1" id="sidebar-nav">
                            <a href="#mentors" class="sidebar-link active block px-4 py-3 text-gray-600 font-medium rounded-lg"><i class="fas fa-chalkboard-teacher w-5 mr-3 text-cyan-500"></i>Mentors</a>
                            <a href="#event-coordinators" class="sidebar-link block px-4 py-3 text-gray-600 font-medium rounded-lg"><i class="fas fa-calendar-check w-5 mr-3 text-cyan-500"></i>Event Coordinators</a>
                            <a href="#fundraisers" class="sidebar-link block px-4 py-3 text-gray-600 font-medium rounded-lg"><i class="fas fa-hand-holding-dollar w-5 mr-3 text-cyan-500"></i>Fundraisers</a>
                            <a href="#community-outreach" class="sidebar-link block px-4 py-3 text-gray-600 font-medium rounded-lg"><i class="fas fa-people-arrows w-5 mr-3 text-cyan-500"></i>Community Outreach</a>
                            <a href="#clinical-psychologists" class="sidebar-link block px-4 py-3 text-gray-600 font-medium rounded-lg"><i class="fas fa-brain w-5 mr-3 text-cyan-500"></i>Clinical Psychologists</a>
                        </nav>
                        <div class="mt-8 p-5 gradient-primary rounded-2xl text-white"><h4 class="font-bold mb-2">Join Our Team</h4><p class="text-sm opacity-90 mb-4">Make a difference in healthcare and education</p><a href="{{ route('volunteers') }}" class="block w-full bg-white text-blue-900 py-3 rounded-xl font-bold hover:shadow-lg transition-all text-center">Apply Now</a></div>
                    </div>
                </aside>
                <!-- Main Content -->
                <main class="flex-1 space-y-16">
                    <!-- Mentors -->
                    <section id="mentors" class="team-section reveal">
                        <div class="flex items-center gap-4 mb-8"><div class="feature-icon"><i class="fas fa-chalkboard-teacher text-white text-xl"></i></div><div><h2 class="text-3xl font-black text-gray-900">Mentors</h2><p class="text-gray-600">Guiding the next generation of healthcare professionals</p></div></div>
                        <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
                            <div class="member-card bg-white rounded-2xl shadow-lg overflow-hidden card-hover"><div class="pt-16 pb-6 px-6 text-center"><img src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=200" alt="Dr. Sarah Chen" class="member-image w-24 h-24 rounded-full mx-auto object-cover"><h3 class="text-xl font-black text-gray-900 mt-4">Dr. Sarah Chen</h3><p class="text-cyan-600 font-semibold text-sm">Lead Mentor - Internal Medicine</p><p class="text-gray-500 text-sm mt-2">15+ years experience in medical education</p><div class="flex justify-center gap-3 mt-4"><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fab fa-linkedin-in text-sm"></i></a><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fas fa-envelope text-sm"></i></a></div></div></div>
                            <div class="member-card bg-white rounded-2xl shadow-lg overflow-hidden card-hover"><div class="pt-16 pb-6 px-6 text-center"><img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?w=200" alt="Dr. Michael Okonkwo" class="member-image w-24 h-24 rounded-full mx-auto object-cover"><h3 class="text-xl font-black text-gray-900 mt-4">Dr. Michael Okonkwo</h3><p class="text-cyan-600 font-semibold text-sm">Mentor - Surgery</p><p class="text-gray-500 text-sm mt-2">Specializing in surgical training and career guidance</p><div class="flex justify-center gap-3 mt-4"><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fab fa-linkedin-in text-sm"></i></a><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fas fa-envelope text-sm"></i></a></div></div></div>
                        </div>
                    </section>
                    <!-- Event Coordinators -->
                    <section id="event-coordinators" class="team-section reveal">
                        <div class="flex items-center gap-4 mb-8"><div class="feature-icon"><i class="fas fa-calendar-check text-white text-xl"></i></div><div><h2 class="text-3xl font-black text-gray-900">Event Coordinators</h2><p class="text-gray-600">Orchestrating impactful events and programs</p></div></div>
                        <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
                            <div class="member-card bg-white rounded-2xl shadow-lg overflow-hidden card-hover"><div class="pt-16 pb-6 px-6 text-center"><img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=200" alt="Jessica Williams" class="member-image w-24 h-24 rounded-full mx-auto object-cover"><h3 class="text-xl font-black text-gray-900 mt-4">Jessica Williams</h3><p class="text-cyan-600 font-semibold text-sm">Senior Event Coordinator</p><p class="text-gray-500 text-sm mt-2">Managing large-scale health camps and fundraising galas</p><div class="flex justify-center gap-3 mt-4"><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fab fa-linkedin-in text-sm"></i></a><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fas fa-envelope text-sm"></i></a></div></div></div>
                        </div>
                    </section>
                    <!-- Fundraisers -->
                    <section id="fundraisers" class="team-section reveal">
                        <div class="flex items-center gap-4 mb-8"><div class="feature-icon"><i class="fas fa-hand-holding-dollar text-white text-xl"></i></div><div><h2 class="text-3xl font-black text-gray-900">Fundraisers</h2><p class="text-gray-600">Securing resources to power our mission</p></div></div>
                        <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
                            <div class="member-card bg-white rounded-2xl shadow-lg overflow-hidden card-hover"><div class="pt-16 pb-6 px-6 text-center"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200" alt="Robert Martinez" class="member-image w-24 h-24 rounded-full mx-auto object-cover"><h3 class="text-xl font-black text-gray-900 mt-4">Robert Martinez</h3><p class="text-cyan-600 font-semibold text-sm">Head of Fundraising</p><p class="text-gray-500 text-sm mt-2">Leading donor relations and major gift campaigns</p><div class="flex justify-center gap-3 mt-4"><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fab fa-linkedin-in text-sm"></i></a><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fas fa-envelope text-sm"></i></a></div></div></div>
                        </div>
                    </section>
                    <!-- Community Outreach -->
                    <section id="community-outreach" class="team-section reveal">
                        <div class="flex items-center gap-4 mb-8"><div class="feature-icon"><i class="fas fa-people-arrows text-white text-xl"></i></div><div><h2 class="text-3xl font-black text-gray-900">Community Outreach</h2><p class="text-gray-600">Connecting with communities and expanding our reach</p></div></div>
                        <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
                            <div class="member-card bg-white rounded-2xl shadow-lg overflow-hidden card-hover"><div class="pt-16 pb-6 px-6 text-center"><img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=200" alt="Grace Okafor" class="member-image w-24 h-24 rounded-full mx-auto object-cover"><h3 class="text-xl font-black text-gray-900 mt-4">Grace Okafor</h3><p class="text-cyan-600 font-semibold text-sm">Community Outreach Lead</p><p class="text-gray-500 text-sm mt-2">Building bridges with underserved communities</p><div class="flex justify-center gap-3 mt-4"><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fab fa-linkedin-in text-sm"></i></a><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fas fa-envelope text-sm"></i></a></div></div></div>
                        </div>
                    </section>
                    <!-- Clinical Psychologists -->
                    <section id="clinical-psychologists" class="team-section reveal">
                        <div class="flex items-center gap-4 mb-8"><div class="feature-icon"><i class="fas fa-brain text-white text-xl"></i></div><div><h2 class="text-3xl font-black text-gray-900">Clinical Psychologists</h2><p class="text-gray-600">Supporting mental health and emotional wellbeing</p></div></div>
                        <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
                            <div class="member-card bg-white rounded-2xl shadow-lg overflow-hidden card-hover"><div class="pt-16 pb-6 px-6 text-center"><img src="https://images.unsplash.com/photo-1551836022-deb4988cc6c0?w=200" alt="Dr. Ngozi Uba" class="member-image w-24 h-24 rounded-full mx-auto object-cover"><h3 class="text-xl font-black text-gray-900 mt-4">Dr. Ngozi Uba</h3><p class="text-cyan-600 font-semibold text-sm">Chief Clinical Psychologist</p><p class="text-gray-500 text-sm mt-2">Leading mental health support programs</p><div class="flex justify-center gap-3 mt-4"><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fab fa-linkedin-in text-sm"></i></a><a href="#" class="social-icon w-9 h-9 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 hover:bg-cyan-500 hover:text-white"><i class="fas fa-envelope text-sm"></i></a></div></div></div>
                        </div>
                    </section>
                    <!-- Join CTA -->
                    <section class="gradient-primary rounded-3xl p-10 md:p-16 text-center text-white reveal">
                        <h2 class="text-4xl font-black mb-6">Join Our Amazing Team</h2>
                        <p class="text-xl opacity-90 mb-8">Be part of a passionate community making real impact in healthcare and education.</p>
                        <div class="flex flex-col sm:flex-row gap-4 justify-center">
                            <a href="{{ route('volunteers') }}" class="bg-white text-blue-900 px-10 py-5 rounded-full font-bold text-lg hover:shadow-2xl transition-all">Become a Volunteer</a>
                            <a href="{{ route('contact') }}" class="bg-white/20 backdrop-blur text-white px-10 py-5 rounded-full font-bold text-lg hover:bg-white/30 transition-all">Contact Us</a>
                        </div>
                    </section>
                </main>
            </div>
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script>
window.addEventListener('scroll', () => {
    const sections = document.querySelectorAll('.team-section');
    const sidebarLinks = document.querySelectorAll('.sidebar-link');
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop - 150;
        if (window.scrollY >= sectionTop) { current = section.getAttribute('id'); }
    });
    sidebarLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); }
    });
});
document.querySelectorAll('.sidebar-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
    });
});
</script>
@endpush