@extends('layouts.app')

@section('title', 'Home - 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')
<!-- Hero Section -->
<section class="hero-section text-center text-white d-flex align-items-center justify-content-center position-relative overflow-hidden">
    <div class="hero-background"></div>
    <div class="container position-relative z-2">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h1 class="display-3 fw-bold mb-4 animate-fade-in">
                    Transform Lives Through 
                    <span class="text-warning">Biblical Wisdom</span>
                </h1>
                <p class="lead mb-5 fs-5 animate-fade-in-delay">
                    Accredited Christian counseling education that empowers you to bring hope and healing 
                    to individuals, families, and communities.
                </p>
                <div class="d-flex gap-3 justify-content-center flex-wrap animate-fade-in-delay-2">
                    <a href="{{ route('programs.index') }}" class="btn btn-primary btn-lg px-5 py-3 shadow-lg hover-lift">
                        <i class="fas fa-graduation-cap me-2"></i>Explore Programs
                    </a>
                    <a href="{{ route('admissions.application') }}" class="btn btn-outline-light btn-lg px-5 py-3 shadow-lg hover-lift">
                        <i class="fas fa-arrow-right me-2"></i>Apply Now
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="hero-scroll-indicator">
        <div class="scroll-arrow"></div>
    </div>
</section>

<!-- Stats Section -->
<section class="stats-section py-5 bg-light">
    <div class="container">
        <div class="row text-center g-4">
            <div class="col-md-3 col-6">
                <div class="stat-item">
                    <div class="stat-number fw-bold text-primary display-6">500+</div>
                    <div class="stat-label text-muted">Graduates</div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="stat-item">
                    <div class="stat-number fw-bold text-primary display-6">15+</div>
                    <div class="stat-label text-muted">Years Experience</div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="stat-item">
                    <div class="stat-number fw-bold text-primary display-6">95%</div>
                    <div class="stat-label text-muted">Success Rate</div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="stat-item">
                    <div class="stat-number fw-bold text-primary display-6">3</div>
                    <div class="stat-label text-muted">Accredited Programs</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Programs -->
<section class="py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold display-5 mb-3">Our Programs</h2>
                <p class="lead text-muted fs-5">Choose from our comprehensive range of accredited programs designed to equip you for ministry</p>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="program-card card h-100 border-0 shadow-lg hover-lift">
                    <div class="card-body text-center p-5">
                        <div class="program-icon mb-4">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <h4 class="card-title fw-bold mb-3">Diploma Program</h4>
                        <p class="card-text text-muted mb-4">
                            Comprehensive 2-year program combining biblical foundations with professional counseling skills.
                        </p>
                        <ul class="list-unstyled text-start mb-4">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>2-year comprehensive program</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Biblical foundations</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Professional counseling skills</li>
                        </ul>
                        <a href="{{ route('programs.show', 'diploma') }}" class="btn btn-primary w-100">
                            Learn More <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="program-card card h-100 border-0 shadow-lg hover-lift featured">
                    <div class="card-body text-center p-5">
                        <div class="featured-badge">Most Popular</div>
                        <div class="program-icon mb-4">
                            <i class="fas fa-certificate"></i>
                        </div>
                        <h4 class="card-title fw-bold mb-3">USA Certificate</h4>
                        <p class="card-text text-muted mb-4">
                            USA Certified Marriage & Family Counselor program with international recognition.
                        </p>
                        <ul class="list-unstyled text-start mb-4">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>USA certification</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>International recognition</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Marriage & Family focus</li>
                        </ul>
                        <a href="{{ route('programs.show', 'usa-certificate') }}" class="btn btn-primary w-100">
                            Learn More <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="program-card card h-100 border-0 shadow-lg hover-lift">
                    <div class="card-body text-center p-5">
                        <div class="program-icon mb-4">
                            <i class="fas fa-award"></i>
                        </div>
                        <h4 class="card-title fw-bold mb-3">Certificate Program</h4>
                        <p class="card-text text-muted mb-4">
                            Foundational certificate program for those beginning their counseling journey.
                        </p>
                        <ul class="list-unstyled text-start mb-4">
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Foundational training</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Flexible schedule</li>
                            <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Beginner friendly</li>
                        </ul>
                        <a href="{{ route('programs.show', 'certificate') }}" class="btn btn-primary w-100">
                            Learn More <i class="fas fa-arrow-right ms-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mission, Vision, and Video Section -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="mission-vision-container">
                    <div class="mission-card mb-4">
                        <div class="mission-icon">
                            <i class="fas fa-cross"></i>
                        </div>
                        <div class="mission-content">
                            <h3 class="fw-bold mb-3">Our Mission</h3>
                            <p class="text-muted mb-0">
                                To provide Christ-centered counseling education that equips individuals to serve 
                                families and communities with biblical wisdom and professional excellence.
                            </p>
                        </div>
                    </div>
                    <div class="mission-card">
                        <div class="mission-icon">
                            <i class="fas fa-eye"></i>
                        </div>
                        <div class="mission-content">
                            <h3 class="fw-bold mb-3">Our Vision</h3>
                            <p class="text-muted mb-0">
                                To be the leading Christian counseling institution, recognized for our commitment 
                                to academic excellence, spiritual formation, and practical ministry preparation.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="text-center mb-4">
                    <h2 class="fw-bold display-6">A Word from Our Community</h2>
                    <p class="text-muted">Hear from our principal</p>
                </div>
                <div class="video-container-wrapper">
                    <div id="video-container" class="video-container shadow-lg" 
                         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="video-overlay">
                            <div class="play-button">
                                <i class="fas fa-play"></i>
                            </div>
                            <div class="video-text">
                                <h5 class="text-white mb-2">Thriving Lives Christian Counselling Center</h5>
                                <p class="text-white-50">Click to watch</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Recent Blog Posts -->
@if($recentPosts->count() > 0)
<section class="py-5">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="fw-bold display-5 mb-3">Latest from Our Blog</h2>
                <p class="lead text-muted fs-5">Insights and resources for your counseling journey</p>
            </div>
        </div>
        <div class="row g-4">
            @foreach($recentPosts as $post)
                <div class="col-lg-4 col-md-6">
                    <div class="blog-card card h-100 border-0 shadow-lg hover-lift">
                        @if($post->image)
                            <div class="blog-image-container">
                                <img src="{{ $post->image }}" class="blog-image" alt="{{ $post->title }}">
                                <div class="blog-overlay">
                                    <a href="{{ route('blog.show', $post) }}" class="btn btn-light btn-sm">
                                        <i class="fas fa-eye me-2"></i>Read More
                                    </a>
                                </div>
                            </div>
                        @endif
                        <div class="card-body p-4">
                            <div class="blog-meta mb-3">
                                <span class="badge bg-primary me-2">{{ $post->published_at->format('M d, Y') }}</span>
                                <span class="text-muted">{{ $post->author->name }}</span>
                            </div>
                            <h5 class="card-title fw-bold mb-3">{{ $post->title }}</h5>
                            <p class="card-text text-muted mb-4">{{ $post->excerpt ?: Str::limit($post->body, 120) }}</p>
                            <a href="{{ route('blog.show', $post) }}" class="btn btn-outline-primary">
                                Read Article <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="text-center mt-5">
            <a href="{{ route('blog.index') }}" class="btn btn-primary btn-lg px-5">
                View All Articles <i class="fas fa-arrow-right ms-2"></i>
            </a>
        </div>
    </div>
</section>
@endif

<!-- Call to Action -->
<section class="cta-section py-5 text-white position-relative overflow-hidden">
    <div class="cta-background"></div>
    <div class="container position-relative z-2 text-center">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <h2 class="fw-bold display-5 mb-4">Ready to Start Your Journey?</h2>
                <p class="lead mb-5 fs-5">Join our community of Christian counselors making a difference in the world.</p>
                <div class="d-flex gap-4 justify-content-center flex-wrap">
                    <a href="{{ route('admissions.application') }}" class="btn btn-light btn-lg px-5 py-3 shadow-lg hover-lift">
                        <i class="fas fa-rocket me-2"></i>Apply Today
                    </a>
                    <a href="{{ route('contact.index') }}" class="btn btn-outline-light btn-lg px-5 py-3 shadow-lg hover-lift">
                        <i class="fas fa-envelope me-2"></i>Contact Us
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
    /* Hero Section */
    .hero-section {
        background: linear-gradient(135deg, rgba(25, 135, 84, 0.9), rgba(25, 135, 84, 0.8)), 
                    url('/assets/images/home.jpeg') no-repeat center center;
        background-size: cover;
        min-height: 80vh;
        position: relative;
    }
    
    .hero-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* background: linear-gradient(135deg, rgba(25, 135, 84, 0.9), rgba(25, 135, 84, 0.8)); */
        z-index: 1;
    }
    
    .z-2 {
        z-index: 2;
    }
    
    .hero-scroll-indicator {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
    }
    
    .scroll-arrow {
        width: 30px;
        height: 30px;
        border: 2px solid white;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
        animation: bounce 2s infinite;
    }
    
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); }
        40% { transform: translateY(-10px) rotate(45deg); }
        60% { transform: translateY(-5px) rotate(45deg); }
    }
    
    /* Animations */
    .animate-fade-in {
        animation: fadeInUp 1s ease-out;
    }
    
    .animate-fade-in-delay {
        animation: fadeInUp 1s ease-out 0.3s both;
    }
    
    .animate-fade-in-delay-2 {
        animation: fadeInUp 1s ease-out 0.6s both;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Stats Section */
    .stat-item {
        padding: 2rem 1rem;
        transition: transform 0.3s ease;
    }
    
    .stat-item:hover {
        transform: translateY(-5px);
    }
    
    /* Program Cards */
    .program-card {
        transition: all 0.3s ease;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .program-card:hover {
        transform: translateY(-10px);
    }
    
    .program-card.featured {
        border: 3px solid var(--bs-primary);
        position: relative;
    }
    
    .featured-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        background: var(--bs-primary);
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: bold;
    }
    
    .program-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, var(--bs-primary), #20c997);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        color: white;
        font-size: 2rem;
    }
    
    /* Mission Vision Cards */
    .mission-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        display: flex;
        align-items: flex-start;
        gap: 1.5rem;
        transition: transform 0.3s ease;
    }
    
    .mission-card:hover {
        transform: translateY(-5px);
    }
    
    .mission-icon {
        width: 60px;
        height: 60px;
        background: var(--bs-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        flex-shrink: 0;
    }
    
    /* Video Container */
    .video-container-wrapper {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
    }
    
    .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;
        max-width: 360px;
        margin: 0 auto;
        border-radius: 20px;
        transition: all 0.3s ease;
    }
    
    .video-container:hover {
        transform: scale(1.05);
    }
    
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(25, 135, 84, 0.8), rgba(25, 135, 84, 0.6));
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2rem;
    }
    
    .play-button {
        width: 80px;
        height: 80px;
        background: rgba(255,255,255,0.2);
        border: 3px solid white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }
    
    .video-container:hover .play-button {
        background: rgba(255,255,255,0.3);
        transform: scale(1.1);
    }
    
    .play-button i {
        color: white;
        font-size: 2rem;
        margin-left: 5px;
    }
    
    /* Blog Cards */
    .blog-card {
        border-radius: 15px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .blog-card:hover {
        transform: translateY(-10px);
    }
    
    .blog-image-container {
        position: relative;
        height: 200px;
        overflow: hidden;
    }
    
    .blog-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .blog-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(25, 135, 84, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .blog-card:hover .blog-overlay {
        opacity: 1;
    }
    
    .blog-card:hover .blog-image {
        transform: scale(1.1);
    }
    
    /* CTA Section */
    .cta-section {
        background: linear-gradient(135deg, var(--bs-primary), #20c997);
        position: relative;
    }
    
    .cta-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        opacity: 0.1;
    }
    
    /* Utility Classes */
    .hover-lift {
        transition: all 0.3s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
        .hero-section {
            min-height: 70vh;
        }
        
        .display-3 {
            font-size: 2.5rem;
        }
        
        .display-5 {
            font-size: 2rem;
        }
        
        .display-6 {
            font-size: 1.5rem;
        }
        
        .mission-card {
            flex-direction: column;
            text-align: center;
        }
        
        .video-container {
            max-width: 280px;
        }
    }
</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';
            this.innerHTML = ''; 
            this.appendChild(iframe);
        }, { once: true });
    }
    
    // Smooth scroll for hero scroll indicator
    const scrollIndicator = document.querySelector('.hero-scroll-indicator');
    if (scrollIndicator) {
        scrollIndicator.addEventListener('click', function() {
            const statsSection = document.querySelector('.stats-section');
            if (statsSection) {
                statsSection.scrollIntoView({ behavior: 'smooth' });
            }
        });
    }
    
    // Intersection Observer for animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // Observe elements for animation
    document.querySelectorAll('.program-card, .mission-card, .blog-card, .stat-item').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'all 0.6s ease';
        observer.observe(el);
    });
});
</script>
@endpush