@extends('public.layouts.app')
@section('title', 'Nuestra Comunidad')

@section('content')

{{-- ── HERO ─────────────────────────────────── --}}
<div class="page-hero" style="background:linear-gradient(135deg,#064e3b 0%,#065f46 40%,#0891b2 100%);">
    <div class="container">
        <div class="page-hero-content">
            <span class="page-hero-badge"><i class="bi bi-people-fill"></i> Comunidad</span>
            <h1 class="page-hero-title">Nuestra <span style="color:#6ee7b7;">Comunidad</span></h1>
            <p class="page-hero-desc">Más de 500 instituciones educativas confían en nuestros sistemas. Conoce las experiencias de quienes ya forman parte de nuestra familia.</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 ?? '#059669' }}">
                    <i class="bi {{ $stat->icono ?? 'bi-people-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

{{-- ── TESTIMONIOS ──────────────────────────── --}}
<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-chat-quote-fill"></i> Testimonios</span>
            <h2 class="section-title">Lo que dicen nuestros <span class="text-gradient">Clientes</span></h2>
            <p class="section-desc">Testimonios reales de directores, docentes y administradores que transformaron su gestión con nuestros sistemas.</p>
        </div>

        @if($testimonios->count())
        <div class="testimonios-grid" style="grid-template-columns:repeat(auto-fill,minmax(300px,1fr));">
            @foreach($testimonios as $t)
            <div class="testimonio-card" data-aos="fade-up" data-aos-delay="{{ ($loop->index % 3) * 80 }}">
                <div class="testimonio-quote"><i class="bi bi-quote"></i></div>
                <div class="testimonio-estrellas">
                    @for($i=1;$i<=5;$i++)
                    <i class="bi {{ $i<=$t->estrellas ? 'bi-star-fill' : 'bi-star' }}"></i>
                    @endfor
                </div>
                <p class="testimonio-texto">"{{ $t->mensaje }}"</p>
                <div class="testimonio-autor">
                    <div class="testimonio-avatar">
                        @if($t->avatar)
                        <img src="{{ asset('storage/'.$t->avatar) }}" alt="{{ $t->nombre }}">
                        @else
                        {{ strtoupper(substr($t->nombre, 0, 1)) }}
                        @endif
                    </div>
                    <div>
                        <div class="testimonio-nombre">{{ $t->nombre }}</div>
                        <div class="testimonio-cargo">{{ $t->cargo }}{{ $t->empresa ? ' — '.$t->empresa : '' }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div style="text-align:center;padding:5rem 0;">
            <div style="font-size:4rem;">💬</div>
            <p style="color:#64748b;margin-top:1rem;">Próximamente testimonios de nuestra comunidad.</p>
        </div>
        @endif
    </div>
</section>

{{-- ── CTA ─────────────────────────────────── --}}
<section class="cta-section" style="background:linear-gradient(135deg,#064e3b,#0891b2);">
    <div class="container">
        <div class="cta-inner" data-aos="fade-up">
            <h2 class="cta-title">¿Quieres ser parte de nuestra comunidad?</h2>
            <p class="cta-subtitle">Únete a las instituciones que ya gestionan mejor con nuestros sistemas.</p>
            <div class="cta-btns">
                @if($config['social_whatsapp'] ?? false)
                <a href="https://wa.me/{{ $config['social_whatsapp'] }}?text=Hola,%20quiero%20información%20para%20unirme"
                   class="btn btn-white btn-lg" target="_blank">
                    <i class="bi bi-whatsapp"></i> Contáctanos por WhatsApp
                </a>
                @endif
                <a href="{{ route('servicios') }}" class="btn btn-outline-white btn-lg">
                    <i class="bi bi-grid-fill"></i> Ver Servicios
                </a>
            </div>
        </div>
    </div>
</section>

@endsection