@extends('layouts.public')

@section('title', 'About')

@section('content')
    <x-inner-hero kicker="About the symposium" title="Youth, money and the future we are building." :subtitle="$event['tagline'] ?: 'A national platform connecting young people with the institutions and ideas that shape financial inclusion.'" />

    <section class="mesh-light py-16 sm:py-20">
        <div class="mx-auto grid max-w-7xl gap-12 px-4 sm:px-6 lg:grid-cols-[1.4fr_1fr] lg:px-8">
            <div class="max-w-2xl space-y-5 text-lg leading-relaxed text-navy-500">
                <p class="section-kicker">Why it matters</p>
                <h2 class="section-title !mt-2">{{ $event['name'] }}</h2>
                <p class="!text-navy-500">
                    {{ $event['about'] ?: 'The National Youth Empowerment Symposium brings together young people, financial institutions, regulators, fintech innovators and development partners for two days of learning, exchange and action on youth financial inclusion.' }}
                </p>
                <p class="!text-navy-500">
                    Expect keynotes, panels, hands-on workshops and an innovation showcase designed for delegates at every stage — from students opening their first savings account to founders seeking growth capital.
                </p>
                <div class="pt-2">
                    <a href="{{ route('registration.create') }}" class="btn-primary">Register to attend</a>
                    <a href="{{ route('programme') }}" class="btn-ghost ml-2">View programme</a>
                </div>
            </div>

            <aside class="space-y-6 lg:pl-8">
                <dl class="divide-y divide-navy-100 border-y border-navy-100">
                    <div class="py-4">
                        <dt class="section-kicker">Theme</dt>
                        <dd class="mt-1 font-display text-xl font-semibold text-navy-900">{{ $event['theme'] }}</dd>
                    </div>
                    <div class="py-4">
                        <dt class="section-kicker">Dates</dt>
                        <dd class="mt-1 font-display text-xl font-semibold text-navy-900"><x-event-dates :event="$event" /></dd>
                    </div>
                    <div class="py-4">
                        <dt class="section-kicker">Venue</dt>
                        <dd class="mt-1 font-display text-xl font-semibold text-navy-900">{{ $event['venue'] }}</dd>
                    </div>
                </dl>
            </aside>
        </div>
    </section>

    @if ($sponsors->isNotEmpty())
        <section class="bg-white py-14">
            <div class="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
                <p class="section-kicker">Partners &amp; sponsors</p>
                <ul class="mt-8 flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
                    @foreach ($sponsors as $sponsor)
                        <li>
                            @if ($sponsor->logo_path)
                                <img src="{{ asset('storage/'.$sponsor->logo_path) }}" alt="{{ $sponsor->name }}" class="h-12 w-auto max-w-[9rem] object-contain" loading="lazy">
                            @else
                                <span class="font-display text-xl font-semibold text-navy-500">{{ $sponsor->name }}</span>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        </section>
    @endif
@endsection