@extends('layouts.site')

@section('title', ($member->name ?? 'Team Member') . ' - Visit Sri Lanka 360')

@php
    $photo = $member->photo
        ? asset('storage/' . ltrim($member->photo, '/'))
        : asset('images/hero/tours-hero.jpg');
@endphp

@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('{{ $photo }}');">
            <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">
                        Meet Our Team
                    </div>
                    <h1 class="mt-3 text-white text-3xl md:text-5xl font-semibold"
                        style="font-family: var(--font-display);">
                        {{ $member->name }}
                    </h1>

                    @if($member->position)
                        <p class="mt-3 text-white/85 text-sm md:text-base uppercase tracking-[.18em]">
                            {{ $member->position }}
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- PROFILE --}}
    <section class="py-10 md:py-14">
        <div class="container-site">
            <div class="grid lg:grid-cols-12 gap-8 lg:gap-10">

                {{-- LEFT --}}
                <div class="lg:col-span-4">
                    <div class="card overflow-hidden">
                        <div class="h-[420px] bg-slate-100">
                            <img src="{{ $photo }}" alt="{{ $member->name }}" class="h-full w-full object-cover">
                        </div>
                    </div>
                </div>

                {{-- RIGHT --}}
                <div class="lg:col-span-8">
                    <div class="card p-6 md:p-8">
                        <div class="text-xs tracking-[.22em] uppercase text-gold-700 font-semibold">
                            Team Profile
                        </div>

                        <h2 class="mt-2 text-3xl md:text-4xl font-semibold" style="font-family: var(--font-display);">
                            {{ $member->name }}
                        </h2>

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

                        @if($member->bio)
                            <div class="mt-6 text-slate-600 leading-relaxed whitespace-pre-line">
                                {{ $member->bio }}
                            </div>
                        @endif

                        <div class="mt-8 grid sm:grid-cols-2 gap-4">
                            @if($member->email)
                                <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                                    <div class="text-xs uppercase tracking-[.18em] text-slate-500">Email</div>
                                    <div class="mt-2 font-semibold text-slate-900">{{ $member->email }}</div>
                                </div>
                            @endif

                            @if($member->phone)
                                <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                                    <div class="text-xs uppercase tracking-[.18em] text-slate-500">Phone</div>
                                    <div class="mt-2 font-semibold text-slate-900">{{ $member->phone }}</div>
                                </div>
                            @endif
                        </div>

                        @if($member->facebook_url || $member->instagram_url || $member->linkedin_url)
                            <div class="mt-8 flex items-center gap-4">
                                @if($member->facebook_url)
                                    <a href="{{ $member->facebook_url }}" target="_blank"
                                        class="h-10 w-10 rounded-2xl border border-slate-200 grid place-items-center text-slate-700 hover:text-gold-700 hover:border-gold-500 transition">
                                        <i class="fa-brands fa-facebook-f"></i>
                                    </a>
                                @endif

                                @if($member->instagram_url)
                                    <a href="{{ $member->instagram_url }}" target="_blank"
                                        class="h-10 w-10 rounded-2xl border border-slate-200 grid place-items-center text-slate-700 hover:text-gold-700 hover:border-gold-500 transition">
                                        <i class="fa-brands fa-instagram"></i>
                                    </a>
                                @endif

                                @if($member->linkedin_url)
                                    <a href="{{ $member->linkedin_url }}" target="_blank"
                                        class="h-10 w-10 rounded-2xl border border-slate-200 grid place-items-center text-slate-700 hover:text-gold-700 hover:border-gold-500 transition">
                                        <i class="fa-brands fa-linkedin-in"></i>
                                    </a>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>

            </div>

            {{-- OTHER MEMBERS --}}
            @if($otherMembers->count())
                <div class="mt-14">
                    <h3 class="text-2xl md:text-3xl font-semibold text-center" style="font-family: var(--font-display);">
                        Meet More of Our Team
                    </h3>

                    <div class="mt-8 grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        @foreach($otherMembers as $m)
                            @php
                                $mPhoto = $m->photo
                                    ? asset('storage/' . ltrim($m->photo, '/'))
                                    : 'https://placehold.co/600x700';
                            @endphp

                            <a href="{{ route('team.show', $m->slug) }}"
                                class="group block rounded-2xl overflow-hidden border border-slate-200 bg-white shadow-soft hover:-translate-y-1 transition">
                                <div class="h-72 overflow-hidden">
                                    <img src="{{ $mPhoto }}"
                                        class="h-full w-full object-cover transition duration-700 group-hover:scale-105">
                                </div>
                                <div class="p-4 text-center">
                                    <div class="font-semibold text-slate-900">{{ $m->name }}</div>
                                    @if($m->position)
                                        <div class="mt-1 text-xs uppercase tracking-[.18em] text-gold-700">
                                            {{ $m->position }}
                                        </div>
                                    @endif
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

        </div>
    </section>
@endsection