@extends('layouts.public')
@section('title', 'Inicio')

@section('content')
@php
    $stats = [
        ['num' => \App\Models\Teacher::count(), 'label' => 'Docentes', 'icon' => 'bi-people'],
        ['num' => $levels->count(), 'label' => 'Niveles', 'icon' => 'bi-layers'],
        ['num' => \App\Models\News::count(), 'label' => 'Noticias', 'icon' => 'bi-newspaper'],
        ['num' => \App\Models\Event::count(), 'label' => 'Eventos', 'icon' => 'bi-calendar-event'],
    ];
    $defaultOrder = ['levels', 'news', 'events', 'teachers', 'gallery', 'videos', 'testimonials'];
    $sectionOrder = array_values(array_unique(array_merge($settings?->sections_order ?: [], $defaultOrder)));
    $sectionIndex = 0;
@endphp

{{-- HERO --}}
@if($heroSlides->isNotEmpty())
<section class="hero">
    <div id="heroCarousel" class="carousel slide hero-carousel {{ ($settings?->hero_effect ?? 'slide') === 'vertical' ? 'hero-carousel-vertical' : '' }}" data-bs-ride="carousel" data-bs-interval="5000">
        <div class="carousel-inner h-100">
            @foreach($heroSlides as $slide)
            <div class="carousel-item h-100 {{ $loop->first ? 'active' : '' }}">
                @if($slide->image)
                    <div class="hero-bg" style="background-image:url('{{ image_url($slide->image) }}');"></div>
                @else
                    <div class="hero-bg" style="background:linear-gradient(120deg,#0f172a,var(--primary));"></div>
                @endif
                <div class="hero-overlay"></div>
                <div class="hero-content h-100 d-flex align-items-center">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-8">
                                @if($slide->title)
                                <h1 class="display-4 fw-bold text-white mb-3" style="letter-spacing:-0.02em;" data-aos="fade-up" data-aos-delay="80">
                                    {{ $slide->title }}
                                </h1>
                                @endif
                                @if($slide->subtitle)
                                <p class="lead text-white-50 mb-4" style="max-width:540px;" data-aos="fade-up" data-aos-delay="160">
                                    {{ $slide->subtitle }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @if($heroSlides->count() > 1)
            <button class="hero-nav hero-nav-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev"><i class="bi bi-chevron-left"></i></button>
            <button class="hero-nav hero-nav-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next"><i class="bi bi-chevron-right"></i></button>
            <div class="hero-indicators">
                @foreach($heroSlides as $i => $slide)
                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ $i }}" class="{{ $loop->first ? 'active' : '' }}"></button>
                @endforeach
            </div>
        @endif
    </div>
    @if($settings?->show_admissions ?? true)
    <div class="hero-cta-wrap">
        <div class="container">
            <a href="{{ route('admissions.index') }}" class="btn btn-brand btn-lg"><i class="bi bi-pencil-square me-2"></i> Solicitar Admision</a>
        </div>
    </div>
    @endif
</section>
@else
<section class="hero">
    @if($settings?->hero_image)
        <div class="hero-bg" style="background-image:url('{{ image_url($settings->hero_image) }}');"></div>
    @else
        <div class="hero-bg" style="background:linear-gradient(120deg,#0f172a,var(--primary));"></div>
    @endif
    <div class="hero-overlay"></div>
    <div class="hero-content">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <h1 class="display-4 fw-bold text-white mb-3" style="letter-spacing:-0.02em;" data-aos="fade-up" data-aos-delay="80">
                        {{ $settings?->hero_title ?? 'Educacion de excelencia para tus hijos' }}
                    </h1>
                    <p class="lead text-white-50 mb-4" style="max-width:540px;" data-aos="fade-up" data-aos-delay="160">
                        {{ $settings?->hero_subtitle ?? '' }}
                    </p>
                </div>
            </div>
        </div>
    </div>
    @if($settings?->show_admissions ?? true)
    <div class="hero-cta-wrap">
        <div class="container">
            <a href="{{ route('admissions.index') }}" class="btn btn-brand btn-lg"><i class="bi bi-pencil-square me-2"></i> Solicitar Admision</a>
        </div>
    </div>
    @endif
</section>
@endif

{{-- STATS BAND / ACCESOS DIRECTOS --}}
@if($settings?->show_access ?? true)
@if($settings?->access1_content || $settings?->access2_content || $settings?->access3_content || $settings?->access4_content)
<section class="section pt-0" style="margin-top:-60px; position:relative; z-index:3;">
    <div class="container">
        <div class="feature-band p-4 p-md-5">
            <div class="row g-4 text-center">
                @foreach(['access1_content','access2_content','access3_content','access4_content'] as $i => $field)
                    <div class="col-12 col-sm-6 col-md-3" data-aos="fade-up" data-aos-delay="{{ $loop->index * 80 }}">
                        <div class="access-block-content" style="{{ $settings->{'access'.($i+1).'_bg'} ? 'background-color:'.$settings->{'access'.($i+1).'_bg'}.';' : '' }}">
                            {!! $settings->{$field} !!}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@else
<section class="section pt-0" style="margin-top:-60px; position:relative; z-index:3;">
    <div class="container">
        <div class="feature-band p-4 p-md-5">
            <div class="row g-4 text-center">
                @foreach($stats as $stat)
                    <div class="col-12 col-sm-6 col-md-3" data-aos="fade-up" data-aos-delay="{{ $loop->index * 80 }}">
                        <div class="icon-box bg-primary-brand bg-opacity-10 text-primary-brand mx-auto mb-2"><i class="bi {{ $stat['icon'] }}"></i></div>
                        <div class="stat-num">{{ $stat['num'] }}</div>
                        <div class="text-muted fw-semibold small">{{ $stat['label'] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif
@endif

{{-- QUIENES SOMOS --}}
@if($settings?->about_content)
<section class="section">
    <div class="container">
        <div class="about-content">
            {!! $settings->about_content !!}
        </div>
    </div>
</section>
@else
<section class="section">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6" data-aos="fade-right">
                <span class="badge-pill mb-3">Quienes Somos</span>
                <h2 class="section-title mb-3">{{ $settings?->name ?? 'Colegio' }}</h2>
                <p class="text-muted mb-4">{!! $settings?->history ?? '' !!}</p>
                <div class="d-grid gap-3">
                    <div class="d-flex gap-3">
                        <div class="icon-box bg-primary-brand bg-opacity-10 text-primary-brand"><i class="bi bi-bullseye"></i></div>
                        <div>
                            <h6 class="mb-1">Mision</h6>
                            <p class="small text-muted mb-0">{!! Str::limit(strip_tags($settings?->mission ?? ''), 150) !!}</p>
                        </div>
                    </div>
                    <div class="d-flex gap-3">
                        <div class="icon-box bg-warning bg-opacity-10 text-warning"><i class="bi bi-eye"></i></div>
                        <div>
                            <h6 class="mb-1">Vision</h6>
                            <p class="small text-muted mb-0">{!! Str::limit(strip_tags($settings?->vision ?? ''), 150) !!}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6" data-aos="fade-left">
                <div class="row g-3">
                    <div class="col-6">
                        @if($settings?->about_image1)
                            <img src="{{ image_url($settings->about_image1) }}" class="img-fluid rounded-4 shadow-sm" alt="">
                        @else
                            <img src="https://picsum.photos/seed/colegio-1/500/420" class="img-fluid rounded-4 shadow-sm" alt="">
                        @endif
                    </div>
                    <div class="col-6 mt-4">
                        @if($settings?->about_image2)
                            <img src="{{ image_url($settings->about_image2) }}" class="img-fluid rounded-4 shadow-sm" alt="">
                        @else
                            <img src="https://picsum.photos/seed/colegio-2/500/420" class="img-fluid rounded-4 shadow-sm" alt="">
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

@foreach($sectionOrder as $sec)
    @if(in_array($sec, ['levels', 'news', 'events', 'teachers', 'gallery', 'videos', 'testimonials']))
        @include('partials.home.' . $sec, ['sectionBg' => $sectionIndex++ % 2 === 0 ? 'section-soft' : ''])
    @endif
@endforeach

{{-- CTA ADMISIONES --}}
@if($settings?->show_admissions ?? true)
<section class="py-5" style="background:linear-gradient(120deg,var(--primary),var(--primary-dark));">
    <div class="container text-center py-4">
        <h2 class="text-white fw-bold mb-3" data-aos="fade-up">{!! $settings?->admissions_title ?: '¿Listo para unirte a nuestra familia?' !!}</h2>
        <p class="text-white-50 mb-4 mx-auto" style="max-width:520px;" data-aos="fade-up" data-aos-delay="80">{!! $settings?->admissions_subtitle ?: 'Las inscripciones estan abiertas. Agenda una visita o solicita mas informacion sobre nuestras vacantes.' !!}</p>
        <div class="d-flex gap-3 justify-content-center flex-wrap" data-aos="fade-up" data-aos-delay="160">
            <a href="{{ route('admissions.index') }}" class="btn btn-admission btn-lg"><i class="bi bi-pencil-square me-2"></i> Solicitar Admision</a>
            <a href="{{ route('contact.index') }}" class="btn btn-outline-light-brand btn-lg">Contactanos</a>
        </div>
    </div>
</section>
@endif

@endsection