@extends('public.layouts.app')
@section('title', 'Premios y Reconocimientos')

@section('content')

{{-- ── HERO ─────────────────────────────────── --}}
<div class="page-hero" style="background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#f59e0b 150%);">
    <div class="container">
        <div class="page-hero-content">
            <span class="page-hero-badge"><i class="bi bi-trophy-fill"></i> Reconocimientos</span>
            <h1 class="page-hero-title">Premios & <span style="color:#fcd34d;">Reconocimientos</span></h1>
            <p class="page-hero-desc">La excelencia reconocida. Nuestro compromiso con la calidad nos ha llevado a obtener importantes reconocimientos a nivel nacional.</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 ?? '#f59e0b' }}">
                    <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

{{-- ── PREMIOS 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-award-fill"></i> Nuestros galardones</span>
            <h2 class="section-title">Premios que nos <span class="text-gradient">Respaldan</span></h2>
            <p class="section-desc">Cada reconocimiento es el resultado del trabajo en equipo, la innovación y el compromiso con nuestros clientes.</p>
        </div>

        @if($premios->count())
        <div class="premios-grid" style="grid-template-columns:repeat(auto-fill,minmax(280px,1fr));">
            @foreach($premios as $p)
            <div class="premio-card" data-aos="zoom-in" data-aos-delay="{{ ($loop->index % 3) * 100 }}">
                @if($p->imagen)
                <img src="{{ asset('storage/'.$p->imagen) }}" alt="{{ $p->nombre }}"
                     style="width:80px;height:80px;border-radius:50%;object-fit:cover;margin:0 auto 1rem;display:block;border:3px solid #fcd34d;">
                @else
                <div class="premio-icon">🏆</div>
                @endif
                <h3 class="premio-nombre">{{ $p->nombre }}</h3>
                @if($p->otorgado_por)
                <p class="premio-meta"><i class="bi bi-building"></i> {{ $p->otorgado_por }}</p>
                @endif
                @if($p->anio)
                <span class="premio-anio"><i class="bi bi-calendar3"></i> {{ $p->anio }}</span>
                @endif
                @if($p->descripcion)
                <p style="font-size:.88rem;color:#64748b;margin-top:.75rem;line-height:1.6;">{{ $p->descripcion }}</p>
                @endif
            </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 más reconocimientos.</p>
        </div>
        @endif
    </div>
</section>

{{-- ── TESTIMONIOS (muestra rápida) ────────── --}}
@if($testimonios->count())
<section class="section-padding" style="background:white;">
    <div class="container">
        <div class="section-header" data-aos="fade-up">
            <span class="section-badge"><i class="bi bi-chat-quote-fill"></i> Lo que dicen</span>
            <h2 class="section-title">Clientes que nos <span class="text-gradient">Recomiendan</span></h2>
        </div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;">
            @foreach($testimonios as $t)
            <div class="testimonio-card" data-aos="fade-up" data-aos-delay="{{ $loop->index * 80 }}">
                <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="">@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 }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <div style="text-align:center;margin-top:2.5rem;">
            <a href="{{ route('comunidad') }}" class="btn btn-primary btn-lg">
                <i class="bi bi-people-fill"></i> Ver Comunidad Completa
            </a>
        </div>
    </div>
</section>
@endif

@endsection