@extends('layouts.app')

@section('title', 'Temple History - Sri Temple')

@section('content')
    <div class="bg-[#FFF9E6] py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto">
                <!-- Introduction -->
                <div class="bg-white rounded-lg shadow-md p-6 mb-8">
                    <h1 class="text-4xl font-bold mb-6">{{ $history['title'] }}</h1>
                    <p class="text-gray-600 text-lg leading-relaxed">{{ $history['introduction'] }}</p>
                </div>

                <!-- Timeline -->
                <div class="bg-white rounded-lg shadow-md p-6 mb-8">
                    <h2 class="text-2xl font-bold mb-6">Historical Timeline</h2>
                    <div class="relative">
                        <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-[#F4C430]"></div>
                        <div class="space-y-8">
                            @foreach($history['timeline'] as $item)
                                <div class="relative pl-12">
                                    <div class="absolute left-0 w-8 h-8 rounded-full bg-[#F4C430] flex items-center justify-center">
                                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                        </svg>
                                    </div>
                                    <div class="bg-gray-50 p-4 rounded-lg">
                                        <div class="text-[#E0115F] font-semibold">{{ $item['year'] }}</div>
                                        <p class="text-gray-600">{{ $item['event'] }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- History Sections -->
                <div class="space-y-8">
                    @foreach($history['sections'] as $section)
                        <div class="bg-white rounded-lg shadow-md overflow-hidden">
                            <img src="{{ $section['image'] }}" alt="{{ $section['title'] }}" class="w-full h-64 object-cover">
                            <div class="p-6">
                                <h2 class="text-2xl font-bold mb-4">{{ $section['title'] }}</h2>
                                <p class="text-gray-600 leading-relaxed">{{ $section['content'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Testimonials -->
                <div class="bg-white rounded-lg shadow-md p-6 mt-8">
                    <h2 class="text-2xl font-bold mb-6">Words from the Wise</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @foreach($history['testimonials'] as $testimonial)
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <div class="flex items-center mb-4">
                                    <img src="{{ $testimonial['image'] }}" alt="{{ $testimonial['name'] }}" class="w-12 h-12 rounded-full object-cover mr-4">
                                    <div>
                                        <div class="font-bold">{{ $testimonial['name'] }}</div>
                                        <div class="text-gray-500 text-sm">{{ $testimonial['title'] }}</div>
                                    </div>
                                </div>
                                <p class="text-gray-600 italic">"{{ $testimonial['quote'] }}"</p>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Gallery -->
                <div class="bg-white rounded-lg shadow-md p-6 mt-8">
                    <h2 class="text-2xl font-bold mb-6">Temple Gallery</h2>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <img src="/images/gallery-1.jpg" alt="Temple View" class="w-full h-32 object-cover rounded-lg">
                        <img src="/images/gallery-2.jpg" alt="Temple Architecture" class="w-full h-32 object-cover rounded-lg">
                        <img src="/images/gallery-3.jpg" alt="Temple Festival" class="w-full h-32 object-cover rounded-lg">
                        <img src="/images/gallery-4.jpg" alt="Temple Rituals" class="w-full h-32 object-cover rounded-lg">
                    </div>
                    <div class="text-center mt-6">
                        <a href="/gallery" class="text-[#E0115F] hover:underline">View Full Gallery →</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection