@extends('layouts.app')

@section('title', $page->title ?? 'About')

@section('content')
<!-- Page Header -->
<section class="bg-gray-100 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="font-serif text-3xl md:text-4xl text-gray-900 italic">About The Conference</h1>
        <p class="text-gray-600 mt-2">Learn more about TEFLIN 72nd International Conference</p>
    </div>
</section>

<section class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- Sidebar -->
            <aside class="lg:w-64 flex-shrink-0">
                <nav class="bg-white rounded-xl shadow-sm p-4 sticky top-20">
                    <h3 class="font-semibold text-gray-900 mb-3">Navigation</h3>
                    <ul class="space-y-1">
                        @foreach($pages as $p)
                        <li>
                            <a href="{{ route('about', $p->slug) }}" class="block px-3 py-2 rounded-lg text-sm {{ $page && $page->slug === $p->slug ? 'bg-primary-50 text-primary-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">
                                {{ $p->title }}
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </nav>
            </aside>

            <!-- Main Content -->
            <main class="flex-1 min-w-0">
                <div class="bg-white rounded-xl shadow-sm p-6 lg:p-8">
                    @if($page)
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">{{ $page->title }}</h2>
                    <div class="prose prose-primary max-w-none">
                        {!! $page->content !!}
                    </div>
                    @else
                    <p class="text-gray-500">Content coming soon...</p>
                    @endif

                    @if(request()->segment(2) === 'committee' || (isset($page) && $page->slug === 'committee'))
                    <!-- Committee Members -->
                    @if($committees->count() > 0)
                    <div class="mt-12">
                        @foreach(['steering' => 'Steering Committee', 'organizing' => 'Organizing Committee', 'scientific' => 'Scientific Committee'] as $type => $label)
                        @php $typeMembers = $committees->where('type', $type); @endphp
                        @if($typeMembers->count() > 0)
                        <div class="mb-10">
                            <h3 class="text-xl font-bold text-gray-900 mb-6">{{ $label }}</h3>
                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                                @foreach($typeMembers as $member)
                                <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
                                    @if($member->photo)
                                    <img src="{{ Storage::url($member->photo) }}" alt="{{ $member->name }}" class="w-12 h-12 rounded-full object-cover">
                                    @else
                                    <div class="w-12 h-12 rounded-full bg-primary-100 flex items-center justify-center">
                                        <span class="text-primary-600 font-semibold">{{ substr($member->name, 0, 1) }}</span>
                                    </div>
                                    @endif
                                    <div>
                                        <h4 class="font-medium text-gray-900">{{ $member->name }}</h4>
                                        <p class="text-sm text-gray-500">{{ $member->position }}</p>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif
                        @endforeach
                    </div>
                    @endif
                    @endif
                </div>
            </main>
        </div>
    </div>
</section>
@endsection
