@extends('layouts.app')

@section('content')
<!-- Page Header -->
<div class="team-header" style="background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); padding: 60px 0; border-bottom: 1px solid #e9ecef; text-align: center;">
    <h1 style="margin: 0; color: #333; font-weight: 700; font-size: 36px;">Management Team</h1>
    <p style="margin: 10px 0 0 0; color: #6c757d; font-size: 16px;">
        <a href="{{ url('/') }}" style="color: #0170B9; text-decoration: none;">Home</a> / <span style="color: #6c757d;">Management Team</span>
    </p>
</div>

<div class="elementor elementor-12" style="padding: 60px 0;">
    <section class="elementor-section elementor-top-section elementor-element elementor-section-boxed" data-element_type="section">
        <div class="elementor-container elementor-column-gap-default">
            <div class="elementor-row" style="flex-wrap: wrap; justify-content: center; gap: 30px;">
                
                @forelse($team as $member)
                <div style="flex: 0 1 300px; margin-bottom: 30px;">
                    <div style="background: #fff; padding: 30px 20px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); text-align: center; border: 1px solid #f5f5f5; transition: transform 0.3s ease;">
                        
                        <div style="width: 150px; height: 150px; margin: 0 auto 20px; border-radius: 50%; overflow: hidden; border: 4px solid #f0f8ff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
                            @if($member->photo)
                                <img src="{{ asset('storage/' . $member->photo) }}" style="width: 100%; height: 100%; object-fit: cover;" alt="{{ $member->name }}">
                            @else
                                <div style="width: 100%; height: 100%; background: #e9ecef; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-user" style="font-size: 60px; color: #adb5bd;"></i>
                                </div>
                            @endif
                        </div>
                        
                        <h4 style="margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #222;">{{ $member->name }}</h4>
                        <p style="margin: 0; font-size: 15px; color: #0170B9; font-weight: 600;">{{ $member->designation }}</p>
                        
                    </div>
                </div>
                @empty
                <div style="text-align: center; width: 100%; padding: 50px;">
                    <h3 style="color: #666;">No team members found.</h3>
                </div>
                @endforelse

            </div>
        </div>
    </section>

    @include('layouts.footer')
</div>

<style>
    /* Add hover effect for team cards */
    div[style*="transition: transform"] {
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }
    div[style*="transition: transform"]:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    }
    @media (max-width: 768px) {
        .team-header {
            padding: 100px 20px 40px 20px !important;
        }
        .contact-title, .team-header h1 {
            font-size: 28px !important;
        }
    }
</style>
@endsection