@extends('public.layouts.app')
@section('title', 'Nuestros Servicios')

@section('content')

{{-- ── HERO ─────────────────────────────────── --}}
<div class="page-hero" style="background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 60%,#0e7490 100%);">
    <div class="container">
        <div class="page-hero-content">
            <span class="page-hero-badge"><i class="bi bi-grid-fill"></i> Nuestros Sistemas</span>
            <h1 class="page-hero-title">Soluciones Web <span style="color:#38bdf8;">Profesionales</span></h1>
            <p class="page-hero-desc">Sistemas diseñados para la gestión integral de instituciones educativas y empresas. Venta o alquiler, tú decides.</p>
        </div>
    </div>
</div>

{{-- ── ESTADÍSTICAS ─────────────────────────── --}}
@if($estadisticas->count())
<section class="stats-section stats-section--light" style="padding:3rem 0;">
    <div class="container">
        <div class="stats-grid">
            @foreach($estadisticas as $stat)
            <div class="stat-item" data-aos="zoom-in" data-aos-delay="{{ $loop->index * 100 }}">
                <div class="stat-icon" style="color:{{ $stat->color ?? '#2563eb' }}">
                    <i class="bi {{ $stat->icono ?? 'bi-bar-chart-fill' }}"></i>
                </div>
                <div class="stat-number counter" data-target="{{ $stat->valor }}">{{ number_format($stat->valor) }}</div>
                <div class="stat-suffix">{{ $stat->sufijo }}</div>
                <div class="stat-label">{{ $stat->etiqueta }}</div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ── SERVICIOS GRID ───────────────────────── --}}
<section class="section-padding" style="background:#f8fafc;">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge"><i class="bi bi-lightning-charge-fill"></i> Lo que ofrecemos</span>
            <h2 class="section-title">Todos nuestros <span class="text-gradient">Sistemas</span></h2>
            <p class="section-desc">Elige entre venta directa o alquiler mensual. Todos incluyen soporte técnico, actualizaciones y capacitación.</p>
        </div>

        @if($servicios->count())
        <div class="servicios-grid">
            @foreach($servicios as $s)
            <div class="servicio-card" data-aos="fade-up" data-aos-delay="{{ ($loop->index % 3) * 100 }}">
                @if($s->badge)
                <div class="servicio-badge" style="background:{{ $s->badge_color ?? '#2563eb' }}">{{ $s->badge }}</div>
                @endif
                <div class="servicio-icon">
                    <i class="bi {{ $s->icono ?? 'bi-laptop' }}"></i>
                </div>
                <h3 class="servicio-nombre">{{ $s->nombre }}</h3>
                @if($s->descripcion)
                <p class="servicio-desc">{{ $s->descripcion }}</p>
                @endif
                @if($s->caracteristicas_array)
                <ul class="servicio-features">
                    @foreach(array_slice($s->caracteristicas_array, 0, 5) as $feat)
                    <li><i class="bi bi-check-circle-fill"></i> {{ $feat }}</li>
                    @endforeach
                </ul>
                @endif
                <div class="servicio-footer">
                    @if($s->precio_desde)
                    <div class="servicio-precio">Desde <strong>{{ $s->precio_desde }}</strong></div>
                    @endif
                    <div style="display:flex;gap:.5rem;flex-wrap:wrap;">
                        @if($s->url_demo)
                        <a href="{{ $s->url_demo }}" target="_blank" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-play-circle-fill"></i> Ver Demo
                        </a>
                        @endif
                        <a href="{{ route('home') }}#contacto" class="btn btn-sm btn-primary">
                            <i class="bi bi-chat-dots-fill"></i> Consultar
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <p style="text-align:center;color:#64748b;padding:3rem 0;">Próximamente más servicios.</p>
        @endif
    </div>
</section>

{{-- ── CTA FINAL ────────────────────────────── --}}
<section class="cta-section">
    <div class="container">
        <div class="cta-inner" data-aos="fade-up">
            <h2 class="cta-title">¿Listo para digitalizar tu institución?</h2>
            <p class="cta-subtitle">Contáctanos y recibe una demo personalizada sin costo.</p>
            <div class="cta-btns">
                @if($config['social_whatsapp'] ?? false)
                <a href="https://wa.me/{{ $config['social_whatsapp'] }}?text=Hola,%20quiero%20una%20demo%20de%20sus%20sistemas"
                   class="btn btn-white btn-lg" target="_blank">
                    <i class="bi bi-whatsapp"></i> Solicitar Demo Gratis
                </a>
                @endif
                <a href="{{ route('home') }}#contacto" class="btn btn-outline-white btn-lg">
                    <i class="bi bi-envelope-fill"></i> Escribirnos
                </a>
            </div>
        </div>
    </div>
</section>

@endsection