@extends('public.layouts.app')

@section('title', $config['empresa_nombre'] ?? 'WebSoft Solutions')

@section('content')

<!-- =============================================
     HERO CAROUSEL
============================================= -->
<section class="hero-carousel">
    <div class="swiper hero-swiper">
        <div class="swiper-wrapper">
            @forelse($sliders as $slide)
            <div class="swiper-slide">
                <div class="hero-slide"
                     @if($slide->imagen) style="background-image: linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(30,58,138,0.85) 50%, rgba(14,116,144,0.85) 100%), url('{{ asset('storage/'.$slide->imagen) }}'); background-size: cover; background-position: center;" @endif>
                    <div class="container">
                        <div class="hero-grid">
                            <div class="hero-content">
                                <div class="hero-badge" data-aos="fade-down">
                                    <i class="bi bi-lightning-charge-fill"></i>
                                    Sistemas Web Profesionales
                                </div>
                                <h1 class="hero-title" data-aos="fade-up" data-aos-delay="100">
                                    {{ $slide->titulo }}
                                    @if($slide->subtitulo)
                                    <span class="text-gradient d-block">{{ $slide->subtitulo }}</span>
                                    @endif
                                </h1>
                                @if($slide->descripcion)
                                <p class="hero-desc" data-aos="fade-up" data-aos-delay="200">
                                    {{ $slide->descripcion }}
                                </p>
                                @endif
                                <div class="hero-btns" data-aos="fade-up" data-aos-delay="300">
                                    @if($slide->boton_texto)
                                    <a href="{{ $slide->boton_url ?? '#' }}" class="btn btn-primary btn-lg">
                                        <i class="bi bi-play-circle-fill"></i>
                                        {{ $slide->boton_texto }}
                                    </a>
                                    @endif
                                    @if($slide->boton2_texto)
                                    <a href="{{ $slide->boton2_url ?? '#' }}" class="btn btn-outline btn-lg">
                                        <i class="bi bi-chat-dots-fill"></i>
                                        {{ $slide->boton2_texto }}
                                    </a>
                                    @endif
                                </div>
                            </div>
                            <div class="hero-visual">
                                <div class="hero-float-card">
                                    <span class="hero-float-icon">💻</span>
                                    <div class="hero-float-title">+500 Clientes</div>
                                    <div class="hero-float-text">Confían en nuestros sistemas</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="swiper-slide">
                <div class="hero-slide">
                    <div class="container">
                        <div class="hero-grid">
                            <div class="hero-content">
                                <div class="hero-badge" data-aos="fade-down">
                                    <i class="bi bi-lightning-charge-fill"></i>
                                    Sistemas Web Profesionales
                                </div>
                                <h1 class="hero-title" data-aos="fade-up">
                                    {{ $config['hero_titulo'] ?? 'Soluciones Digitales para tu Institución' }}
                                    <span class="text-gradient d-block">{{ $config['hero_subtitulo'] ?? 'Tecnología de Vanguardia' }}</span>
                                </h1>
                                <p class="hero-desc" data-aos="fade-up" data-aos-delay="200">
                                    Sistemas web académicos, de asistencia y gestión para instituciones educativas y empresas.
                                </p>
                                <div class="hero-btns" data-aos="fade-up" data-aos-delay="300">
                                    <a href="#servicios" class="btn btn-primary btn-lg">
                                        <i class="bi bi-grid-fill"></i> Ver Servicios
                                    </a>
                                    <a href="#contacto" class="btn btn-outline btn-lg">
                                        <i class="bi bi-chat-dots-fill"></i> Contáctanos
                                    </a>
                                </div>
                            </div>
                            <div class="hero-visual">
                                <div class="hero-float-card">
                                    <span class="hero-float-icon">🚀</span>
                                    <div class="hero-float-title">Tecnología IA</div>
                                    <div class="hero-float-text">Reconocimiento facial y más</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforelse
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</section>

<!-- =============================================
     NEWS TICKER
============================================= -->
@if($tickers->count())
<section class="news-ticker">
    <div class="container">
        <div class="ticker-wrap">
            <span class="ticker-label">
                <i class="bi bi-megaphone-fill"></i> NOTICIAS
            </span>
            <div class="ticker-track" id="tickerTrack">
                @foreach($tickers as $item)
                <span class="ticker-item">
                    <i class="bi bi-circle-fill" style="font-size:0.5rem; color:rgba(255,255,255,0.5);"></i>
                    @if($item->url)<a href="{{ $item->url }}" style="color:inherit;">{{ $item->texto }}</a>
                    @else{{ $item->texto }}@endif
                </span>
                @endforeach
                {{-- Duplicate for seamless loop --}}
                @foreach($tickers as $item)
                <span class="ticker-item">
                    <i class="bi bi-circle-fill" style="font-size:0.5rem; color:rgba(255,255,255,0.5);"></i>
                    {{ $item->texto }}
                </span>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endif

<!-- =============================================
     NOTICIAS / COMUNICADOS / CONVOCATORIAS / LOGROS
============================================= -->
<section class="noticias-section section-padding" id="noticias">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="section-badge"><i class="bi bi-newspaper"></i> Información Institucional</span>
            <h2 class="section-title">Noticias, Comunicados y <span class="highlight">Logros</span></h2>
            <p class="section-subtitle">Mantente al día con todo lo que sucede en WebSoft Solutions.</p>
        </div>

        <!-- Tabs -->
        <div class="noticias-tabs" data-aos="fade-up">
            <button class="noticias-tab-btn active" data-tab="all">
                <i class="bi bi-grid-3x3-gap-fill"></i> Todos
            </button>
            <button class="noticias-tab-btn" data-tab="noticia">
                <i class="bi bi-newspaper"></i> Noticias
            </button>
            <button class="noticias-tab-btn" data-tab="comunicado">
                <i class="bi bi-megaphone-fill"></i> Comunicados
            </button>
            <button class="noticias-tab-btn" data-tab="convocatoria">
                <i class="bi bi-people-fill"></i> Convocatorias
            </button>
            <button class="noticias-tab-btn" data-tab="logro">
                <i class="bi bi-trophy-fill"></i> Logros
            </button>
        </div>

        <!-- All -->
        <div class="noticias-tab-content active" id="tab-all">
            <div class="noticias-grid">
                @foreach($noticias->take(6) as $noticia)
                @include('public.partials.noticia-card', ['noticia' => $noticia])
                @endforeach
            </div>
        </div>

        @foreach(['noticia','comunicado','convocatoria','logro'] as $tipo)
        <div class="noticias-tab-content" id="tab-{{ $tipo }}">
            @php $filtradas = $noticias->where('tipo', $tipo); @endphp
            @if($filtradas->count())
            <div class="noticias-grid">
                @foreach($filtradas as $noticia)
                @include('public.partials.noticia-card', ['noticia' => $noticia])
                @endforeach
            </div>
            @else
            <div class="text-center" style="padding:3rem; color:var(--gray);">
                <i class="bi bi-inbox" style="font-size:3rem; display:block; margin-bottom:1rem; opacity:0.4;"></i>
                No hay {{ $tipo === 'noticia' ? 'noticias' : ($tipo === 'logro' ? 'logros' : $tipo.'s') }} registradas aún.
            </div>
            @endif
        </div>
        @endforeach
        <div class="text-center" style="margin-top:2.5rem;" data-aos="fade-up">
            <a href="{{ route('noticias') }}" class="btn btn-primary btn-lg">
                <i class="bi bi-newspaper"></i> Ver todas las publicaciones
                <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- =============================================
     NUESTROS SERVICIOS
============================================= -->
<section class="servicios-section section-padding" id="servicios">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="section-badge"><i class="bi bi-grid-fill"></i> Lo que ofrecemos</span>
            <h2 class="section-title">Nuestros <span class="highlight">Sistemas Web</span></h2>
            <p class="section-subtitle">Soluciones tecnológicas diseñadas para optimizar la gestión de tu institución o empresa.</p>
        </div>

        <div class="servicios-grid">
            @foreach($servicios as $index => $servicio)
            <div class="servicio-card {{ $servicio->destacado ? 'destacado' : '' }}" data-aos="fade-up" data-aos-delay="{{ ($index % 3) * 100 }}">
                @if($servicio->badge)
                <div class="servicio-badge" style="background: {{ $servicio->badge_color ?? '#3b82f6' }}">
                    {{ $servicio->badge }}
                </div>
                @endif
                <div class="servicio-icon">
                    <i class="bi {{ $servicio->icono ?? 'bi-laptop' }}"></i>
                </div>
                <div class="servicio-tipo">
                    @if($servicio->tipo === 'venta') 🛒 Venta
                    @elseif($servicio->tipo === 'alquiler') 🔄 Alquiler
                    @else 🛒 Venta / 🔄 Alquiler @endif
                </div>
                <h3 class="servicio-name">{{ $servicio->nombre }}</h3>
                <p class="servicio-desc">{{ $servicio->descripcion }}</p>
                @if($servicio->caracteristicas)
                <div class="servicio-features">
                    @foreach($servicio->caracteristicas_array as $feature)
                    <div class="servicio-feature">
                        <i class="bi bi-check-circle-fill"></i>
                        {{ $feature }}
                    </div>
                    @endforeach
                </div>
                @endif
                <div class="servicio-footer">
                    <div class="servicio-precio">
                        <span>Desde </span>
                        <strong>{{ $servicio->precio_desde ?? 'Consultar' }}</strong>
                        <span>/mes</span>
                    </div>
                    <a href="{{ $servicio->url_demo ?? '#contacto' }}" class="btn btn-primary btn-sm">
                        <i class="bi bi-play-fill"></i> Ver Demo
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        <div class="text-center" style="margin-top:2.5rem;" data-aos="fade-up">
            <a href="{{ route('servicios') }}" class="btn btn-primary btn-lg">
                <i class="bi bi-grid-fill"></i> Ver todos los servicios
                <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- =============================================
     ESTADÍSTICAS
============================================= -->
@if($estadisticas->count())
<section class="stats-section">
    <div class="container">
        <div class="stats-grid">
            @foreach($estadisticas as $stat)
            <div class="stat-card" data-aos="zoom-in" data-aos-delay="{{ $loop->index * 100 }}">
                @if($stat->icono)
                <span class="stat-icon" style="color:{{ $stat->color ?? '#3b82f6' }}">
                    <i class="bi {{ $stat->icono }}"></i>
                </span>
                @endif
                <div class="stat-number">
                    <span class="counter" data-target="{{ $stat->valor }}">0</span>{{ $stat->sufijo }}
                </div>
                <div class="stat-label">{{ $stat->etiqueta }}</div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- =============================================
     PREMIOS Y RECONOCIMIENTOS
============================================= -->
@if($premios->count())
<section class="premios-section section-padding" id="premios">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="section-badge"><i class="bi bi-trophy-fill"></i> Reconocimientos</span>
            <h2 class="section-title">Premios y <span class="highlight">Reconocimientos</span></h2>
            <p class="section-subtitle">Reconocimientos que avalan nuestra excelencia y compromiso con la calidad.</p>
        </div>
        <div class="premios-grid">
            @foreach($premios as $index => $premio)
            <div class="premio-card" data-aos="fade-up" data-aos-delay="{{ ($index % 4) * 100 }}">
                <div class="premio-icon">
                    @if($premio->imagen)
                    <img src="{{ asset('storage/'.$premio->imagen) }}" alt="{{ $premio->nombre }}" style="width:100%;height:100%;object-fit:cover;border-radius:50%;">
                    @else
                    🏆
                    @endif
                </div>
                <h4 class="premio-name">{{ $premio->nombre }}</h4>
                @if($premio->otorgado_por)
                <p class="premio-org">{{ $premio->otorgado_por }}</p>
                @endif
                @if($premio->anio)
                <span class="premio-year">{{ $premio->anio }}</span>
                @endif
            </div>
            @endforeach
        </div>
        <div class="text-center" style="margin-top:2.5rem;" data-aos="fade-up">
            <a href="{{ route('premios') }}" class="btn btn-outline-primary btn-lg">
                <i class="bi bi-trophy-fill"></i> Ver todos los reconocimientos
                <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </div>
</section>
@endif

<!-- =============================================
     NUESTRA COMUNIDAD (TESTIMONIOS)
============================================= -->
@if($testimonios->count())
<section class="testimonios-section" id="comunidad">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="section-badge light"><i class="bi bi-people-fill"></i> Nuestra Comunidad</span>
            <h2 class="section-title text-white">Lo que dicen <span class="highlight">nuestros clientes</span></h2>
            <p class="section-subtitle" style="color:rgba(255,255,255,0.6);">
                La satisfacción de nuestros clientes es nuestra mayor motivación.
            </p>
        </div>
        <div class="swiper testimonios-swiper" data-aos="fade-up">
            <div class="swiper-wrapper">
                @foreach($testimonios as $testimonio)
                <div class="swiper-slide" style="height:auto;">
                    <div class="testimonio-card">
                        <div class="testimonio-stars">
                            @for($i = 1; $i <= 5; $i++)
                            <i class="bi {{ $i <= $testimonio->estrellas ? 'bi-star-fill' : 'bi-star' }}"></i>
                            @endfor
                        </div>
                        <p class="testimonio-text">"{{ $testimonio->mensaje }}"</p>
                        <div class="testimonio-author">
                            <div class="testimonio-avatar">
                                @if($testimonio->avatar)
                                <img src="{{ asset('storage/'.$testimonio->avatar) }}" alt="{{ $testimonio->nombre }}">
                                @else
                                {{ strtoupper(substr($testimonio->nombre, 0, 1)) }}
                                @endif
                            </div>
                            <div>
                                <div class="testimonio-author-name">{{ $testimonio->nombre }}</div>
                                <div class="testimonio-author-role">
                                    {{ $testimonio->cargo }}{{ $testimonio->cargo && $testimonio->empresa ? ' — ' : '' }}{{ $testimonio->empresa }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-pagination" style="margin-top:2rem; position:static;"></div>
        </div>
        <div class="text-center" style="margin-top:2.5rem;" data-aos="fade-up">
            <a href="{{ route('comunidad') }}" class="btn btn-white btn-lg">
                <i class="bi bi-people-fill"></i> Ver toda la comunidad
                <i class="bi bi-arrow-right"></i>
            </a>
        </div>
    </div>
</section>
@endif

<!-- =============================================
     CTA FINAL
============================================= -->
<section class="cta-section">
    <div class="container">
        <h2 class="cta-title" data-aos="fade-up">
            ¿Listo para digitalizar<br>tu institución?
        </h2>
        <p class="cta-subtitle" data-aos="fade-up" data-aos-delay="100">
            Únete a más de 500 instituciones que ya confían en nuestros sistemas.
            Agenda una demo gratuita hoy mismo.
        </p>
        <div class="cta-btns" data-aos="fade-up" data-aos-delay="200">
            @if($config['social_whatsapp'] ?? false)
            <a href="https://wa.me/{{ $config['social_whatsapp'] }}?text=Hola,%20quiero%20una%20demo%20gratuita"
               class="btn btn-white btn-lg" target="_blank">
                <i class="bi bi-whatsapp"></i> WhatsApp Ahora
            </a>
            @endif
            @if($config['empresa_email'] ?? false)
            <a href="mailto:{{ $config['empresa_email'] }}" class="btn btn-outline btn-lg">
                <i class="bi bi-envelope-fill"></i> Enviar Correo
            </a>
            @endif
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
// Testimonios Swiper (hero se inicializa en app.js)
document.addEventListener('DOMContentLoaded', function () {
    if (typeof Swiper !== 'undefined') {
        new Swiper('.testimonios-swiper', {
            loop: true,
            autoplay: { delay: 5000, disableOnInteraction: false },
            slidesPerView: 1,
            spaceBetween: 24,
            pagination: { el: '.testimonios-swiper .swiper-pagination', clickable: true },
            breakpoints: {
                768: { slidesPerView: 2 },
                1024: { slidesPerView: 3 },
            },
        });
    }
});
</script>
@endsection