@extends('layouts.app')

@section('title', 'Thriving Lives Christian Counselling Center')
@section('description', 'Accredited Christian counseling education with Certificate and Diploma programs. Transform lives through biblical wisdom and professional excellence.')

@section('content')
<header class="hero-section text-center text-white d-flex align-items-center justify-content-center">
    <div class="container">
        <h1 class="display-3 fw-bold">Thriving Lives Christian Counselling Center</h1>
        <p class="lead fw-normal">Equipping individuals to serve with biblical wisdom and professional excellence.</p>
        <a href="{{ route('programs.index') }}" class="btn btn-lg btn-primary me-2">Our Programs</a>
        <a href="{{ route('admissions.application') }}" class="btn btn-lg btn-outline-light">Enroll Now</a>
    </div>
</header>

<!-- Mission, Vision, and Video Section -->
<section class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <div class="p-5 bg-light rounded shadow-sm mb-4">
                    <i class="fas fa-cross fa-3x text-primary mb-3"></i>
                    <h2 class="h4">Our Mission</h2>
                    <p class="text-muted">To provide Christ-centered counseling education that equips individuals to serve families and communities with biblical wisdom and professional excellence.</p>
                </div>
                <div class="p-5 bg-light rounded shadow-sm">
                    <i class="fas fa-eye fa-3x text-primary mb-3"></i>
                    <h2 class="h4">Our Vision</h2>
                    <p class="text-muted">To be the leading Christian counseling institution, recognized for our commitment to academic excellence, spiritual formation, and practical ministry preparation.</p>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="text-center mb-4">
                     <h2 class="fw-bold">A Word from Our Community</h2>
                </div>
                <div id="video-container" class="shadow-sm rounded" 
                     data-src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Freel%2F1657171718216953&show_text=false&width=auto&autoplay=1">
                    <div class="play-button-overlay">
                        <i class="fas fa-play-circle fa-5x text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Programs Section -->
<section class="py-5 bg-white">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Our Programs</h2>
            <p class="text-muted">Discover our accredited Certificate and Diploma programs.</p>
        </div>
        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        <h3 class="card-title">Diploma in Marriage and Family Counseling</h3>
                        <p class="card-text text-muted">A comprehensive program designed to equip students with the knowledge and skills needed for effective Christian marriage and family counseling.</p>
                        <a href="{{ route('programs.show', 'diploma') }}" class="btn btn-outline-primary">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body">
                        <h3 class="card-title">Certificate in Christian Counseling</h3>
                        <p class="card-text text-muted">An intensive program providing foundational knowledge in Christian counseling principles and practices.</p>
                        <a href="{{ route('programs.show', 'certificate') }}" class="btn btn-outline-primary">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">What Our Students Say</h2>
            <p class="text-muted">Hear from those who have experienced our programs.</p>
        </div>
        <div class="row">
            @forelse($testimonials as $testimonial)
                <div class="col-lg-4 mb-4">
                    <div class="card h-100 shadow-sm">
                        <div class="card-body text-center">
                            <img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="{{ $testimonial->name }}" class="rounded-circle mb-3" width="80" height="80" style="object-fit: cover;">
                            <p class="text-muted">"{{ $testimonial->content }}"</p>
                            <h5 class="mb-0">{{ $testimonial->name }}</h5>
                            <p class="text-primary">{{ $testimonial->title }}</p>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col text-center">
                    <p>No testimonials yet. Be the first to share your story!</p>
                </div>
            @endforelse
        </div>
    </div>
</section>

<!-- Call to Action Section -->
<section class="py-5 bg-primary text-white text-center">
    <div class="container">
        <h2 class="fw-bold">Ready to Start Your Journey?</h2>
        <p class="lead mb-4">Apply today and take the first step toward a rewarding career in Christian counseling.</p>
        <a href="{{ route('admissions.application') }}" class="btn btn-lg btn-light">Apply Now</a>
    </div>
</section>

<!-- Featured Blog Posts Section -->
<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">From Our Blog</h2>
            <p class="text-muted">Insights on Christian counseling, marriage, and mental health.</p>
        </div>
        <div class="row">
            @forelse($featuredPosts as $post)
                <div class="col-lg-4 mb-4">
                    <div class="card h-100 shadow-sm">
                        <img src="https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" class="card-img-top" alt="{{ $post->title }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ $post->title }}</h5>
                            <p class="card-text text-muted">{{ $post->excerpt }}</p>
                            <a href="{{ route('blog.show', $post->slug) }}" class="btn btn-outline-primary">Read More</a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col text-center">
                    <p>No featured posts available right now.</p>
                </div>
            @endforelse
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    .hero-section {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.pexels.com/photos/416405/pexels-photo-416405.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2') no-repeat center center;
        background-size: cover;
        min-height: 70vh;
        padding-top: 5rem;
    }
    .text-primary {
        color: #198754 !important;
    }
    #video-container {
        background-image: url('https://images.pexels.com/photos/7841803/pexels-photo-7841803.jpeg?auto=compress&cs=tinysrgb&w=800');
        background-size: cover;
        background-position: center;
        position: relative;
        cursor: pointer;
        aspect-ratio: 9 / 16;
        transition: transform 0.2s;
        max-width: 360px; /* Constrain width */
        margin: 0 auto;    /* Center horizontally */
    }
    #video-container:hover {
        transform: scale(1.02);
    }
    .play-button-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0.8;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    #video-container:hover .play-button-overlay {
        opacity: 1;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const videoContainer = document.getElementById('video-container');

    if (videoContainer) {
        videoContainer.addEventListener('click', function() {
            const iframe = document.createElement('iframe');
            iframe.setAttribute('src', this.getAttribute('data-src'));
            iframe.setAttribute('style', 'border:none;overflow:hidden;width:100%;height:100%;');
            iframe.setAttribute('frameborder', '0');
            iframe.setAttribute('allowfullscreen', 'true');
            iframe.setAttribute('allow', 'autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share');
            
            this.style.backgroundImage = 'none'; // Remove thumbnail background
            this.innerHTML = ''; 
            this.appendChild(iframe);
        }, { once: true }); // Ensure the click event only fires once
    }
});
</script>
@endpush