@extends('layouts.app')

@section('title', 'Yo Space TV Show - ' . \App\Models\Setting::get('site_title', 'Hannah Arinaitwe'))

@section('nav-class', 'nav-transparent-dark')

@section('content')
<div class="relative bg-theme-900 pt-36 md:pt-44 pb-32 overflow-hidden">
    <div class="absolute inset-0 opacity-10">
        <div class="absolute -top-40 -left-40 w-96 h-96 rounded-full bg-theme-300 blur-3xl"></div>
        <div class="absolute top-40 -right-20 w-80 h-80 rounded-full bg-pink-500 blur-3xl"></div>
    </div>
    
    <div class="max-w-7xl mx-auto px-6 md:px-12 relative z-10 text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold font-heading text-white mb-6">YO SPACE on UBC TV</h1>
        <p class="text-xl text-white/80 max-w-2xl mx-auto leading-relaxed">A youth-led program spotlighting young people’s role in the fight against corruption, in partnership with the Office of the Inspectorate of Government.</p>
    </div>
</div>

<div class="bg-gray-50 pb-24 pt-16 relative z-20">
    <div class="max-w-7xl mx-auto px-6 md:px-12">
        <div class="bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col lg:flex-row border border-gray-100 mt-8">
            <div class="lg:w-1/2 relative min-h-[400px] lg:min-h-full overflow-hidden bg-gray-100">
                <img src="{{ asset('images/TV Show Image.jpg') }}" alt="Yo Space TV Show" class="absolute inset-0 w-full h-full object-cover">
            </div>
            
            <div class="lg:w-1/2 p-8 md:p-12 lg:p-16 flex flex-col justify-center">
                <h2 class="text-3xl font-bold font-heading text-theme-900 mb-6">Empowering the Next Generation</h2>
                
                <div class="prose prose-lg text-gray-600">
                    <p class="mb-6 leading-relaxed">
                        Hosted by Arinaitwe Hannah, YO SPACE is a bold platform on UBC TV that amplifies the voices of young people across Uganda. With a focus on accountability and transformative change, the show dives deep into the issues that matter most to the youth.
                    </p>
                    <p class="leading-relaxed">
                        In partnership with the Office of the Inspectorate of Government, YO SPACE leads the conversation on how young people can actively participate in the fight against corruption, reshaping the narrative and building a better future for the nation.
                    </p>
                </div>
            </div>
        </div>

        <!-- TV Show Image Gallery -->
        <div class="mt-24">
            <h3 class="text-2xl font-bold font-heading text-center text-theme-900 mb-10">Behind the Scenes</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="rounded-2xl overflow-hidden h-64 shadow-md hover:shadow-xl transition-all duration-300">
                    <img src="{{ asset('images/TV Show Guest.jpg') }}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500" alt="TV Show Guest">
                </div>
                <div class="rounded-2xl overflow-hidden h-64 shadow-md hover:shadow-xl transition-all duration-300">
                    <img src="{{ asset('images/TV Show image 01.jpg') }}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500" alt="TV Show Behind the scenes">
                </div>
                <div class="rounded-2xl overflow-hidden h-64 shadow-md hover:shadow-xl transition-all duration-300">
                    <img src="{{ asset('images/TV Show image 0201.jpg') }}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500" alt="TV Show Behind the scenes">
                </div>
            </div>
        </div>
    </div>
</div>
@endsection