@extends('layouts.site')

@section('title', ($page->title ?? 'About Us') . ' - Visit Sri Lanka 360')

@php
$heroBg = !empty($page->hero_image)
    ? asset('storage/' . ltrim($page->hero_image, '/'))
    : asset('images/hero/tours-hero.jpg'); // fallback

$sections = collect($page->sections ?? [])->values();
$gallery = collect($page->gallery ?? [])->values();
@endphp

@section('content')
    <div class="tour-show-page">

        {{-- HERO (same style as Tours page) --}}
        <section class="relative full-bleed">
            <div class="h-[34vh] md:h-[38vh] relative overflow-hidden bg-slate-900 bg-cover bg-center"
                style="background-image: url('{{ $heroBg }}');">

                {{-- overlays --}}
                <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">
                            {{ $page->hero_kicker ?? 'Discover Sri Lanka with' }}
                        </div>

                        <h1 class="mt-3 text-white text-3xl md:text-5xl font-semibold"
                            style="font-family: var(--font-display);">
                            {{ $page->subtitle ?? 'VSL360' }}
                        </h1>

                        @if(!empty($page->excerpt))
                            <p class="mt-3 text-white/80 text-sm md:text-base max-w-2xl">
                                {{ $page->excerpt }}
                            </p>
                        @endif

                        <div class="mt-6 flex flex-wrap gap-3">
                            <a href="{{ url('/tours') }}" class="btn-gold">Explore Tours</a>
                            <a href="{{ url('/destinations') }}" class="inline-flex items-center justify-center gap-2 rounded-2xl px-5 py-3 text-sm font-semibold transition
                                              bg-white/10 text-white border border-white/20 hover:bg-white/15">
                                View Destinations
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

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

                {{-- ✅ Centered Mission + Cards (better than left big empty space) --}}
                <div class="max-w-6xl mx-auto">
                    <div class="text-center">
                        <div class="text-xs font-semibold tracking-[.22em] uppercase text-gold-700">
                            Our Purpose
                        </div>

                        <h2 class="mt-3 text-2xl md:text-4xl font-semibold" style="font-family: var(--font-display);">
                            {{ $page->mission_title ?? 'Our Mission' }}
                        </h2>

                        @if(!empty($page->mission_text))
                            <p class="mt-4 text-slate-600 leading-relaxed max-w-3xl mx-auto">
                                {{ $page->mission_text }}
                            </p>
                        @endif
                    </div>

                    {{-- Cards --}}
                    @if($sections->count())
                        <div class="mt-10 grid md:grid-cols-2 gap-6">
                            @foreach($sections as $sec)
                                @php
        $img = !empty($sec['image']) ? asset('storage/' . ltrim($sec['image'], '/')) : null;
                                @endphp

                                <div class="card p-6 flex flex-col">
                                    <div class="text-lg font-semibold text-slate-900">
                                        {{ $sec['title'] ?? '' }}
                                    </div>

                                    <p class="mt-3 text-sm text-slate-600 leading-relaxed whitespace-pre-line flex-1">
                                        {{ $sec['text'] ?? '' }}
                                    </p>

                                    @if($img)
                                        <div class="mt-5 rounded-2xl overflow-hidden border border-slate-200 bg-slate-100">
                                            <img src="{{ $img }}" class="h-52 w-full object-cover" alt="">
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- Gallery --}}
                @if($gallery->count())
                    <div class="max-w-6xl mx-auto mt-14">
                        <h3 class="text-xl md:text-2xl font-semibold text-center" style="font-family: var(--font-display);">
                            Moments from Sri Lanka
                        </h3>

                        <div class="mt-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                            @foreach($gallery as $g)
                                <div class="rounded-2xl overflow-hidden border border-slate-200 bg-slate-100">
                                    <img src="{{ asset('storage/' . ltrim($g, '/')) }}"
                                        class="h-40 sm:h-44 md:h-56 w-full object-cover" alt="">
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                {{-- TEAM SECTION --}}
                @if(isset($members) && $members->count())
                    <section class="py-14 border-t border-slate-200 bg-white">
                        <div class="container-site">

                            <div class="text-center max-w-2xl mx-auto">
                                <div class="text-xs font-semibold tracking-[.22em] uppercase text-gold-700">
                                    Our People
                                </div>

                                <h2 class="mt-3 text-3xl md:text-4xl font-semibold" style="font-family: var(--font-display);">
                                    Meet Our Team
                                </h2>

                                <p class="mt-3 text-slate-600">
                                    The passionate travel experts behind your unforgettable Sri Lanka journey.
                                </p>
                            </div>

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

                                    <a href="{{ route('team.show', $member->slug) }}"
                                        class="group block bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-soft hover:-translate-y-1 transition">

                                        <div class="relative h-80 overflow-hidden">
                                            <img src="{{ $photo }}" alt="{{ $member->name }}"
                                                class="absolute inset-0 w-full h-full object-cover transition duration-700 group-hover:scale-105">
                                            <div
                                                class="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent opacity-0 group-hover:opacity-100 transition">
                                            </div>
                                        </div>

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

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

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

                                            <div
                                                class="mt-4 inline-flex items-center gap-2 text-xs font-semibold tracking-[.18em] uppercase text-slate-700 group-hover:text-gold-700 transition">
                                                View Profile
                                                <i class="fa-solid fa-arrow-right text-[11px]"></i>
                                            </div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>

                        </div>
                    </section>
                @endif

            </div>
        </section>

    </div>
@endsection