@extends('layouts.site')

@section('title', 'Meet Our Team - Visit Sri Lanka 360')

@section('content')

    {{-- HERO --}}
    <section class="relative">
        <div class="h-[34vh] md:h-[38vh] relative overflow-hidden bg-slate-900 bg-cover bg-center"
            style="background-image: url('{{ asset('images/hero/tours-hero.jpg') }}');">
            <div class="absolute inset-0 bg-black/55"></div>
            <div
                class="absolute inset-0 bg-[radial-gradient(900px_500px_at_20%_30%,rgba(215,166,43,.35),transparent_60%),radial-gradient(800px_500px_at_85%_40%,rgba(255,255,255,.10),transparent_55%)]">
            </div>

            <div class="relative container-site h-full flex items-center">
                <div class="max-w-3xl">
                    <div class="text-white/70 text-xs tracking-[.22em] uppercase">
                        The people behind the journey
                    </div>
                    <h1 class="mt-3 text-white text-3xl md:text-5xl font-semibold"
                        style="font-family: var(--font-display);">
                        Meet Our Team
                    </h1>
                    <p class="mt-3 text-white/80 text-sm md:text-base">
                        Passionate travel experts dedicated to creating unforgettable Sri Lanka experiences.
                    </p>
                </div>
            </div>
        </div>
    </section>

    {{-- TEAM GRID --}}
    <section class="py-10 md:py-14">
        <div class="container-site">

            @if($members->count())
                <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    @foreach($members as $member)
                        @php
                            $photo = $member->photo
                                ? asset('storage/' . ltrim($member->photo, '/'))
                                : 'https://placehold.co/800x900';
                        @endphp

                        <div
                            class="group rounded-3xl overflow-hidden border border-slate-200 bg-white shadow-soft hover:-translate-y-1 transition">
                            <div class="relative h-80 bg-slate-100 overflow-hidden">
                                <img src="{{ $photo }}" alt="{{ $member->name }}"
                                    class="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-[1.04]">
                            </div>

                            <div class="p-5 text-center">
                                <div class="text-xl font-semibold text-slate-900" style="font-family: var(--font-display);">
                                    {{ $member->name }}
                                </div>

                                @if($member->position)
                                    <div class="mt-2 text-sm font-semibold tracking-[.18em] uppercase text-gold-700">
                                        {{ $member->position }}
                                    </div>
                                @endif

                                @if($member->bio)
                                    <p class="mt-4 text-sm text-slate-600 leading-relaxed line-clamp-4">
                                        {{ $member->bio }}
                                    </p>
                                @endif

                                @if($member->facebook_url || $member->instagram_url || $member->linkedin_url)
                                    <div class="mt-4 flex justify-center gap-3">
                                        @if($member->facebook_url)
                                            <a href="{{ $member->facebook_url }}" target="_blank"
                                                class="text-slate-500 hover:text-gold-700">
                                                <i class="fa-brands fa-facebook-f"></i>
                                            </a>
                                        @endif

                                        @if($member->instagram_url)
                                            <a href="{{ $member->instagram_url }}" target="_blank"
                                                class="text-slate-500 hover:text-gold-700">
                                                <i class="fa-brands fa-instagram"></i>
                                            </a>
                                        @endif

                                        @if($member->linkedin_url)
                                            <a href="{{ $member->linkedin_url }}" target="_blank"
                                                class="text-slate-500 hover:text-gold-700">
                                                <i class="fa-brands fa-linkedin-in"></i>
                                            </a>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="rounded-3xl border border-slate-200 bg-white p-8 text-center">
                    <div class="text-lg font-semibold">No team members added yet</div>
                    <p class="mt-2 text-slate-600">Add your team from the admin panel.</p>
                </div>
            @endif

        </div>
    </section>
@endsection