@extends('layouts.app')

@section('title', 'Christian Bible Learning Platform - Home')
@section('meta_description', 'Learn the Bible with explanations, Christian teachings, and articles.')

@section('content')
<div class="hero-section">
    <div class="container text-center position-relative" style="z-index: 10;">
        <h1 class="hero-title">Christian Bible <br><span class="text-accent">Learning Platform</span></h1>
        <p class="hero-subtitle">Read the Bible, explore profound explanations, and grow your faith in a premium spiritual space.</p>
        
        <form action="{{ route('search') }}" method="get" class="hero-search-form d-flex position-relative">
            <input type="search" name="q" class="form-control search-input-modern w-100" placeholder="Search verses, explanations, teachings, articles...">
            <button type="submit" class="btn btn-premium position-absolute end-0 top-0 bottom-0 m-1 px-4 border-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                </svg>
            </button>
        </form>
        <p class="mt-4 mb-0 small opacity-75 float-anim"><a href="{{ route('api.docs') }}" class="text-white text-decoration-underline">Use our API</a> — Bible search + free <a href="https://bible-api.com/" target="_blank" rel="noopener" class="text-white text-decoration-underline">bible-api.com</a> integration</p>
    </div>
</div>

<div class="container">
    <section class="ai-section row g-0 align-items-center" style="background: linear-gradient(120deg, #fff8e7, #e7fbfb);">
        <div class="col-lg-6 p-4 p-md-5 z-index-1">
            <span class="badge-modern mb-3 d-inline-block" style="color: #087e80; border-color: rgba(8,126,128,.18);">{{ __('For Children & Families') }}</span>
            <h2 class="section-title text-start mb-3">{{ __('Kids Zone') }}</h2>
            <p class="text-muted mb-4 lead">{{ __('Explore animated Bible stories, Scripture memory games, safe quizzes, and joyful rewards designed for growing hearts.') }}</p>
            <a href="{{ route('kids.index') }}" class="btn btn-premium">{{ __('Enter Kids Zone') }} &rarr;</a>
        </div>
        <div class="col-lg-6 p-4 z-index-1">
            <img src="{{ asset('images/kids/games-together.webp') }}" alt="Children learning through Bible games" style="width: 100%; max-height: 350px; object-fit: cover; border-radius: 28px; box-shadow: 0 16px 36px rgba(20,70,80,.13);">
        </div>
    </section>

    <div class="ai-section row g-0 align-items-center">
        <div class="col-lg-6 p-4 p-md-5 z-index-1">
            <span class="badge-modern mb-3 d-inline-block">{{ __('AI-Powered') }}</span>
            <h2 class="section-title text-start mb-3">{{ __('Theological Q&A Assistant') }}</h2>
            <p class="text-muted mb-4 lead">{{ __('Ask complex theological questions and get instant, reliable answers from our dedicated local knowledge base. Enhance your spiritual study like never before.') }}</p>
            <a href="{{ route('chat.index') }}" class="btn btn-premium">{{ __('Ask a Question') }} &rarr;</a>
        </div>
        <div class="col-lg-6 p-4 text-center z-index-1">
            <!-- Illustration placeholder or icon -->
            <div class="d-inline-flex align-items-center justify-content-center float-anim" style="width: 250px; height: 250px; background: linear-gradient(135deg, rgba(234,179,8,0.1) 0%, rgba(15,23,42,0.05) 100%); border-radius: 50%; border: 2px dashed rgba(234,179,8,0.3);">
                <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="var(--theme-accent)" class="bi bi-chat-right-quote-fill" viewBox="0 0 16 16">
                  <path d="M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9.586a1 1 0 0 1 .707.293l2.853 2.853a.5.5 0 0 0 .854-.353V2zM7.194 4.766c.087.124.163.26.227.401.428.964.392 2.695-.346 4.053l-.14.254h.671a1 1 0 0 1 .452.108 1 1 0 0 1 .536 1.059l-.048.243A1.5 1.5 0 0 1 7.15 12h-.795a1.5 1.5 0 0 1-1.396-.948A4.27 4.27 0 0 1 4.75 9.5c0-1.921 1.258-3.921 3.235-4.908l.196-.098.056.124c.036.078.07.16.102.247L7.194 4.766zm5 0c.087.124.163.26.227.401.428.964.392 2.695-.346 4.053l-.14.254h.671a1 1 0 0 1 .452.108 1 1 0 0 1 .536 1.059l-.048.243A1.5 1.5 0 0 1 12.15 12h-.795a1.5 1.5 0 0 1-1.396-.948A4.27 4.27 0 0 1 9.75 9.5c0-1.921 1.258-3.921 3.235-4.908l.196-.098.056.124c.036.078.07.16.102.247L12.194 4.766z"/>
                </svg>
            </div>
        </div>
    </div>

    @if($verseOfTheDay)
    <div class="verse-section">
        <div class="verse-quote-icon">❝</div>
        <p class="verse-text">"{{ $verseOfTheDay->verse_text }}"</p>
        <div class="mb-4">
            <span class="badge-modern badge-primary">
                {{ $verseOfTheDay->chapter->book->localizedName() }} {{ $verseOfTheDay->chapter->chapter_number }}:{{ $verseOfTheDay->verse_number }}
            </span>
        </div>
        <a href="{{ route('verse.show', $verseOfTheDay) }}" class="btn btn-premium-outline rounded-pill px-4">Read full context</a>
    </div>
    @endif

    <section class="mb-5 py-4">
        <h2 class="section-title">Latest Bible Explanations</h2>
        <div class="row g-4">
            @forelse($latestExplanations as $exp)
            <div class="col-md-6 col-lg-4">
                <div class="card card-premium">
                    <div class="card-body p-4 d-flex flex-column">
                        <h3 class="card-title h5 mb-3">{{ $exp->title }}</h3>
                        <p class="card-text text-muted mb-4 flex-grow-1">{{ Str::limit(strip_tags($exp->explanation_text), 120) }}</p>
                        @php $v = $exp->verse; @endphp
                        <a href="{{ route('explanations.show', $exp) }}" class="fw-semibold text-decoration-none">
                            <span class="text-accent me-1">📖</span> {{ $v->chapter->book->localizedName() }} {{ $v->chapter->chapter_number }}:{{ $v->verse_number }} &rarr;
                        </a>
                    </div>
                </div>
            </div>
            @empty
            <p class="text-muted text-center">No explanations yet.</p>
            @endforelse
        </div>
    </section>

    <section class="mb-5 py-4">
        <h2 class="section-title">Featured Teachings</h2>
        <div class="row g-4">
            @forelse($featuredTeachings as $t)
            <div class="col-md-6 col-lg-4">
                <div class="card card-premium">
                    @if($t->image)
                    <div class="card-premium-img-wrapper">
                        <img src="{{ $t->image }}" class="card-img-top" alt="">
                    </div>
                    @else
                    <div class="card-premium-img-wrapper" style="background: linear-gradient(135deg, #f1f5f9, #e2e8f0); height:220px;"></div>
                    @endif
                    <div class="card-body p-4">
                        <div class="mb-3">
                            @if($t->show_on_home)<span class="badge badge-modern badge-primary me-1">{{ __('Pinned') }}</span>@endif
                            @if($t->category)<span class="badge badge-modern badge-accent">{{ $t->category }}</span>@endif
                        </div>
                        <h3 class="card-title h5 mb-3">{{ $t->title }}</h3>
                        <p class="card-text text-muted mb-4">{{ Str::limit(strip_tags($t->content), 100) }}</p>
                        <a href="{{ route('teachings.show', ['slug' => $t->slug]) }}" class="stretched-link fw-semibold text-decoration-none">Read teaching &rarr;</a>
                    </div>
                </div>
            </div>
            @empty
            <p class="text-muted text-center">No teachings yet.</p>
            @endforelse
        </div>
    </section>

    <section class="mb-5 py-4">
        <h2 class="section-title">Latest Articles</h2>
        <div class="row g-4">
            @forelse($latestArticles as $a)
            <div class="col-md-6 col-lg-4">
                <div class="card card-premium">
                    @if($a->image)
                    <div class="card-premium-img-wrapper">
                        <img src="{{ $a->image }}" class="card-img-top" alt="">
                    </div>
                    @else
                    <div class="card-premium-img-wrapper" style="background: linear-gradient(135deg, #f1f5f9, #e2e8f0); height:220px;"></div>
                    @endif
                    <div class="card-body p-4">
                        <div class="mb-3">
                            @if($a->show_on_home)<span class="badge badge-modern badge-primary me-1">{{ __('Pinned') }}</span>@endif
                        </div>
                        <h3 class="card-title h5 mb-2">{{ $a->title }}</h3>
                        @if($a->author)<small class="text-accent fw-bold d-block mb-3">{{ $a->author }}</small>@endif
                        <p class="card-text text-muted mb-4">{{ Str::limit(strip_tags($a->content), 100) }}</p>
                        <a href="{{ route('articles.show', ['slug' => $a->slug]) }}" class="stretched-link fw-semibold text-decoration-none">Read article &rarr;</a>
                    </div>
                </div>
            </div>
            @empty
            <p class="text-muted text-center">No articles yet.</p>
            @endforelse
        </div>
    </section>
</div>
@endsection