@extends('frontend::layouts.app')

@php
// Get all programs
$allPrograms = [
    [
        'id' => '1',
        'title' => 'Buddhist Studies',
        'description' => 'Comprehensive programs covering Buddhist philosophy, history, and teachings from various traditions.',
        'image' => '/images/news-scholars.jpg',
        'brief' => 'Explore comprehensive programs covering Buddhist philosophy, history, and teachings from various traditions. Our Buddhist Studies program offers in-depth exploration of the rich heritage and contemporary applications of Buddhist thought.',
        'content' => [
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
        ],
    ],
    [
        'id' => '2',
        'title' => 'Meditation & Mindfulness',
        'description' => 'Practical training in meditation techniques and mindfulness practices for personal development.',
        'image' => '/images/activity-meditation.jpg',
        'brief' => 'Learn practical meditation techniques and mindfulness practices for personal development. Our program offers comprehensive training in various meditation traditions and their applications in daily life.',
        'content' => [
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
        ],
    ],
    [
        'id' => '3',
        'title' => 'Buddhist Philosophy',
        'description' => 'Deep exploration of Buddhist philosophical traditions and their contemporary applications.',
        'image' => '/images/activity-philosophy.jpg',
        'brief' => 'Dive deep into Buddhist philosophical traditions and their contemporary applications. Explore the fundamental teachings and their relevance in modern society.',
        'content' => [
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
        ],
    ],
    [
        'id' => '4',
        'title' => 'Cultural Heritage',
        'description' => 'Programs focused on preserving and understanding Buddhist art, architecture, and cultural traditions.',
        'image' => '/images/activity-art.jpg',
        'brief' => 'Discover programs focused on preserving and understanding Buddhist art, architecture, and cultural traditions. Learn about the rich cultural heritage of Buddhism across different regions.',
        'content' => [
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
        ],
    ],
    [
        'id' => '5',
        'title' => 'Interfaith Dialogue',
        'description' => 'Courses promoting understanding and cooperation between Buddhist and other religious traditions.',
        'image' => '/images/activity-conference.jpg',
        'brief' => 'Engage in courses promoting understanding and cooperation between Buddhist and other religious traditions. Build bridges of dialogue and mutual respect.',
        'content' => [
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
        ],
    ],
    [
        'id' => '6',
        'title' => 'Applied Buddhism',
        'description' => 'Practical applications of Buddhist principles in psychology, counseling, and social work.',
        'image' => '/images/activity-mindfulness.jpg',
        'brief' => 'Learn practical applications of Buddhist principles in psychology, counseling, and social work. Apply timeless wisdom to modern challenges.',
        'content' => [
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).',
        ],
    ],
];

// Find the program by ID
$program = collect($allPrograms)->firstWhere('id', $id);

// If program not found, redirect to academics list
if (!$program) {
    abort(404);
}
@endphp

@section('title', $program['title'] . ' - Academics - WBU - World Buddhist University')

@section('content')
    <section id="page-title" class="gradient-green">
        <div class="container">
            <div class="page-title">
                <h1>{{ $program['title'] }}</h1>
            </div>
            <div class="breadcrumb">
                <ul>
                    <li><a href="{{ route('frontend.index') }}">Home</a></li>
                    <li><a href="{{ url('/academics') }}">I-Am Academy</a></li>
                    <li class="active"><a href="#">{{ $program['title'] }}</a></li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Program Detail Section -->
    <section class="py-12 md:py-16 bg-background">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="max-w-4xl mx-auto">
                <!-- Program Header -->
                <div class="mb-10">
                    <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-6">{{ $program['title'] }}</h2>
                </div>

                <!-- Program Image -->
                <div class="mb-10">
                    <img src="{{ asset('assets/frontend' . $program['image']) }}"
                         alt="{{ $program['title'] }}"
                         class="w-full h-auto rounded-lg object-cover"
                         loading="lazy"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="hidden w-full h-64 bg-accent rounded-lg items-center justify-center">
                        <span class="text-muted-foreground">{{ $program['title'] }}</span>
                    </div>
                </div>

                <!-- Program Content -->
                <div class="prose prose-lg max-w-none">
                    <!-- Brief Description -->
                    <div class="mb-10">
                        <p class="text-lg text-foreground leading-relaxed">{{ $program['brief'] }}</p>
                    </div>

                    <!-- Main Content -->
                    <div class="space-y-6">
                        @foreach($program['content'] as $index => $paragraph)
                            @if($index === 1)
                                <!-- Second paragraph with two columns on larger screens -->
                                <p class="text-foreground leading-relaxed" style="column-count: 2; column-gap: 2.5rem;">
                                    {{ $paragraph }}
                                </p>
                            @else
                                <p class="text-foreground leading-relaxed mt-10">
                                    {{ $paragraph }}
                                </p>
                            @endif
                        @endforeach
                    </div>
                </div>

                <!-- Image Gallery -->
                <div class="mb-8 mt-12">
                    <h2 class="text-xl font-semibold text-foreground mb-4">Image Gallery</h2>
                    <p class="text-sm text-muted-foreground mb-4">Click to view larger image</p>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                        <button type="button" class="relative h-32 md:h-40 rounded-lg overflow-hidden hover:opacity-90 transition-opacity">
                            <img alt="Gallery image 1" loading="lazy" class="object-cover w-full h-full" src="{{ asset('assets/frontend/images/activity-meditation.jpg') }}">
                        </button>
                        <button type="button" class="relative h-32 md:h-40 rounded-lg overflow-hidden hover:opacity-90 transition-opacity">
                            <img alt="Gallery image 2" loading="lazy" class="object-cover w-full h-full" src="{{ asset('assets/frontend/images/activity-mindfulness.jpg') }}">
                        </button>
                        <button type="button" class="relative h-32 md:h-40 rounded-lg overflow-hidden hover:opacity-90 transition-opacity">
                            <img alt="Gallery image 3" loading="lazy" class="object-cover w-full h-full" src="{{ asset('assets/frontend/images/activity-retreat.jpg') }}">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection