@extends('podcast.layouts.podcast')

@section('title', 'Podcast Production Services')

@php
    $theme = $themeClasses;
@endphp

@section('content')
    <!-- Hero Section -->
    <section id="hero" class="relative min-h-[70vh] flex items-center justify-center overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div>
        <div class="relative max-w-5xl mx-auto px-6 lg:px-8 text-center">
            <h1 class="font-display text-5xl md:text-7xl font-bold leading-tight mb-6">
                <span class="text-white">{{ $podcastData['hero']['title'] }}</span>
            </h1>
            <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
                {{ $podcastData['hero']['description'] }}
            </p>
        </div>
    </section>

     <!-- Services Section -->
    <section id="services" class="py-20 md:py-32 {{ $theme['sectionBg'] }}">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="font-display text-4xl md:text-5xl font-bold text-white mb-4">Our Podcast Services</h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                @foreach ($podcastData['services'] as $index => $service)
                    <div class="group p-8 {{ $theme['cardBg'] }} rounded-2xl border {{ $theme['cardBorder'] }} hover:border-purple-500/50 transition duration-500">
                        <div class="w-14 h-14 rounded-full bg-purple-500/10 flex items-center justify-center mb-6 {{ $theme['accent'] }} group-hover:bg-purple-500 group-hover:text-white transition duration-300">
                            @include('podcast.partials.icon', [
                                'name' => $service['icon'],
                                'size' => 'w-7 h-7',
                            ])
                        </div>
                        <h3 class="text-xl font-semibold {{ $theme['textNormal'] }} mb-3 group-hover:{{ $theme['accent'] }} transition">
                            {{ $service['title'] }}</h3>
                        <p class="{{ $theme['textSecondary'] }} text-sm mb-4">{{ $service['description'] }}</p>
                        <div class="{{ $theme['accent'] }} font-medium text-sm">{{ $service['price'] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

@endsection
