@extends('layouts.portal')

@section('title', 'Inicio')

@section('styles')
<style>
    /* Estilos ultra-modernos para la página de inicio */
    /* Hero Section con diseño avanzado */
    .hero-section {
        background: linear-gradient(120deg, #2b5876, #4e4376);
        position: relative;
        color: white;
        padding: 140px 0 160px;
        border-radius: 0 0 50% 50% / 100px;
        overflow: hidden;
        box-shadow: 0 20px 80px rgba(0,0,0,0.12);
    }
    
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.4;
    }
    
    .hero-content {
        position: relative;
        z-index: 2;
    }
    
    .hero-content h1 {
        font-size: 4rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        text-shadow: 0 2px 15px rgba(0,0,0,0.3);
        letter-spacing: -0.5px;
        background: linear-gradient(to right, #ffffff, #ececec);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: fadeInUp 1s ease-out;
    }
    
    .hero-content p {
        font-size: 1.35rem;
        max-width: 700px;
        margin: 0 auto 2.5rem;
        opacity: 0.9;
        line-height: 1.7;
        animation: fadeInUp 1s ease-out 0.2s forwards;
        opacity: 0;
        transform: translateY(20px);
    }
    
    .hero-btn-container {
        animation: fadeInUp 1s ease-out 0.4s forwards;
        opacity: 0;
        transform: translateY(20px);
    }
    
    .hero-btn {
        padding: 1.2rem 2.5rem;
        font-weight: 600;
        border-radius: 50px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 10px 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        font-size: 0.95rem;
    }
    
    .hero-btn::after {
        content: '';
        position: absolute;
        width: 0;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.1);
        transition: all 0.3s ease;
    }
    
    .hero-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    }
    
    .hero-btn:hover::after {
        width: 100%;
    }
    
    .hero-btn-primary {
        background: #fff;
        color: #4e4376;
    }
    
    .hero-btn-primary:hover {
        background: #f8f9fa;
    }
    
    .hero-btn-secondary {
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.3);
        color: #fff;
    }
    
    .hero-image-container {
        position: relative;
        perspective: 1000px;
        animation: fadeInRight 1s ease-out;
    }
    
    .hero-image {
        max-width: 100%;
        border-radius: 20px;
        box-shadow: 0 30px 60px rgba(0,0,0,0.25);
        transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
        transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
        filter: brightness(1.05) contrast(1.05);
        border: 4px solid rgba(255,255,255,0.1);
    }
    
    .hero-image-container:hover .hero-image {
        transform: perspective(1000px) rotateY(0) rotateX(0);
        box-shadow: 0 40px 80px rgba(0,0,0,0.3);
    }
    
    .hero-image-container::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        top: 15px;
        left: 15px;
        background: linear-gradient(120deg, #2b5876, #4e4376);
        z-index: -1;
        opacity: 0.7;
        filter: blur(15px);
        transition: all 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    
    .hero-image-container:hover::after {
        top: 25px;
        left: 25px;
        opacity: 0.9;
        filter: blur(25px);
    }
    
    /* Sección de servicios destacados con diseño premium */
    .featured-services {
        padding: 120px 0;
        position: relative;
        background: #f8f9fa;
        border-radius: 0 100px 0 100px;
        margin: 40px 0;
    }
    
    .featured-services::before {
        content: '';
        position: absolute;
        top: -50px;
        right: 10%;
        width: 200px;
        height: 200px;
        background: linear-gradient(120deg, #2b5876, #4e4376);
        border-radius: 50%;
        opacity: 0.1;
        z-index: 0;
    }
    
    .featured-services::after {
        content: '';
        position: absolute;
        bottom: -30px;
        left: 5%;
        width: 150px;
        height: 150px;
        background: linear-gradient(120deg, #4e4376, #2b5876);
        border-radius: 50%;
        opacity: 0.1;
        z-index: 0;
    }
    
    .section-title {
        text-align: center;
        margin-bottom: 80px;
        position: relative;
        z-index: 1;
    }
    
    .section-title h2 {
        font-size: 3rem;
        font-weight: 800;
        color: #2c3e50;
        margin-bottom: 1.5rem;
        position: relative;
        display: inline-block;
    }
    
    .section-title span {
        color: #4e4376;
    }
    
    .section-title h2::after {
        content: '';
        position: absolute;
        width: 100px;
        height: 5px;
        background: linear-gradient(90deg, #2b5876, #4e4376);
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 5px;
    }
    
    .section-title p {
        color: #6c757d;
        font-size: 1.3rem;
        max-width: 800px;
        margin: 2rem auto 0;
        line-height: 1.8;
    }
    
    .service-card {
        height: 100%;
        transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
        border: none;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        position: relative;
        z-index: 1;
        background: white;
    }
    
    .service-card:hover {
        transform: translateY(-15px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    }
    
    .service-img-container {
        position: relative;
        overflow: hidden;
        height: 240px;
    }
    
    .service-img {
        width: 80%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
        filter: brightness(1.05);
    }
    
    .service-card:hover .service-img {
        transform: scale(1.15);
    }
    
    .service-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        background: linear-gradient(120deg, #2b5876, #4e4376);
        color: white;
        padding: 8px 20px;
        border-radius: 50px;
        font-size: 0.85rem;
        font-weight: 600;
        z-index: 10;
        box-shadow: 0 8px 25px rgba(43, 88, 118, 0.3);
        letter-spacing: 1px;
    }
    
    .service-content {
        padding: 30px;
        background: white;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        position: relative;
    }
    
    .service-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 1.2rem;
        position: relative;
        padding-bottom: 15px;
    }
    
    .service-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 3px;
        background: linear-gradient(90deg, #2b5876, #4e4376);
        border-radius: 3px;
        transition: width 0.3s ease;
    }
    
    .service-card:hover .service-title::after {
        width: 80px;
    }
    
    .service-text {
        color: #6c757d;
        line-height: 1.7;
        margin-bottom: 1.8rem;
        flex-grow: 1;
    }
    
    .service-link {
        display: inline-flex;
        align-items: center;
        color: #4e4376;
        font-weight: 600;
        transition: all 0.3s;
        text-decoration: none;
    }
    
    .service-link:hover {
        color: #2b5876;
        transform: translateX(5px);
    }
    
    .service-link i {
        margin-left: 8px;
        transition: all 0.3s;
    }
    
    .service-link:hover i {
        transform: translateX(5px);
    }
    
    /* Estadísticas con diseño impactante */
    .stats-section {
        padding: 100px 0;
        background: linear-gradient(120deg, #2b5876, #4e4376);
        color: white;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        margin: 40px 0;
        box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    }
    
    .stats-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.2;
    }
    
    .stats-container {
        position: relative;
        z-index: 1;
    }
    
    .stat-item {
        text-align: center;
        padding: 20px;
        transition: all 0.3s;
    }
    
    .stat-item:hover {
        transform: translateY(-10px);
    }
    
    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 20px;
        display: inline-block;
        background: rgba(255,255,255,0.1);
        width: 100px;
        height: 100px;
        line-height: 100px;
        border-radius: 50%;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        position: relative;
    }
    
    .stat-icon::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.3);
        top: 0;
        left: 0;
        animation: pulse 2s infinite;
    }
    
    .stat-number {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 10px;
        background: linear-gradient(to right, #ffffff, #ececec);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .stat-text {
        font-size: 1.1rem;
        opacity: 0.9;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    /* Testimonios con diseño exclusivo */
    .testimonials-section {
        padding: 120px 0;
        position: relative;
    }
    
    .testimonial-card {
        background: white;
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 15px 50px rgba(0,0,0,0.08);
        margin-bottom: 30px;
        position: relative;
        transition: all 0.3s;
        border: 1px solid rgba(0,0,0,0.05);
    }
    
    .testimonial-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 60px rgba(0,0,0,0.12);
    }
    
    .testimonial-card::before {
        content: '"';
        position: absolute;
        top: 20px;
        left: 30px;
        font-size: 120px;
        color: rgba(78, 67, 118, 0.1);
        font-family: Georgia, serif;
        line-height: 1;
    }
    
    .testimonial-text {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #555;
        margin-bottom: 25px;
        position: relative;
        z-index: 1;
    }
    
    .testimonial-author {
        display: flex;
        align-items: center;
    }
    
    .testimonial-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        border: 3px solid #4e4376;
    }
    
    .testimonial-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .testimonial-info h4 {
        font-size: 1.2rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 5px;
    }
    
    .testimonial-info p {
        font-size: 0.9rem;
        color: #6c757d;
    }
    
    /* CTA Section con diseño llamativo */
    .cta-section {
        padding: 100px 0;
        background: linear-gradient(120deg, #2b5876, #4e4376);
        color: white;
        text-align: center;
        border-radius: 30px;
        position: relative;
        overflow: hidden;
        margin: 60px 0;
        box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    }
    
    .cta-section::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(rgba(255,255,255,0.1) 8%, transparent 8%);
        background-position: 0 0;
        background-size: 30px 30px;
        opacity: 0.3;
        animation: backgroundMove 30s linear infinite;
    }
    
    .cta-content {
        position: relative;
        z-index: 1;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .cta-content h2 {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        text-shadow: 0 2px 15px rgba(0,0,0,0.3);
    }
    
    .cta-content p {
        font-size: 1.25rem;
        margin-bottom: 2.5rem;
        opacity: 0.9;
        line-height: 1.7;
    }
    
    .cta-btn {
        padding: 1.2rem 3rem;
        font-size: 1.1rem;
        font-weight: 600;
        background: white;
        color: #4e4376;
        border-radius: 50px;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        position: relative;
        overflow: hidden;
    }
    
    .cta-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.2);
        transition: all 0.4s;
        transform: skewX(-30deg);
    }
    
    .cta-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.25);
        color: #2b5876;
    }
    
    .cta-btn:hover::after {
        left: 100%;
    }
    
    /* Animaciones para mejorar UX */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes pulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        50% {
            transform: scale(1.2);
            opacity: 0.5;
        }
        100% {
            transform: scale(1);
            opacity: 0;
        }
    }
    
    @keyframes backgroundMove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 500px 500px;
        }
    }
    
    /* Clases para animaciones scroll */
    .fade-in-up {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.8s ease-out;
    }
    
    .fade-in-up.in-view {
        opacity: 1;
        transform: translateY(0);
    }
    
    .fade-in-left {
        opacity: 0;
        transform: translateX(-50px);
        transition: all 0.8s ease-out;
    }
    
    .fade-in-left.in-view {
        opacity: 1;
        transform: translateX(0);
    }
    
    .fade-in-right {
        opacity: 0;
        transform: translateX(50px);
        transition: all 0.8s ease-out;
    }
    
    .fade-in-right.in-view {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* Media queries para responsividad perfecta */
    @media (max-width: 992px) {
        .hero-content h1 {
            font-size: 3.2rem;
        }
        
        .hero-image-container {
            margin-top: 40px;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
        }
        
        .stat-number {
            font-size: 2.5rem;
        }
    }
    
    @media (max-width: 768px) {
        .hero-section {
            padding: 100px 0 120px;
        }
        
        .hero-content h1 {
            font-size: 2.8rem;
        }
        
        .hero-content p {
            font-size: 1.1rem;
        }
        
        .hero-btn {
            margin-bottom: 15px;
            width: 100%;
        }
        
        .section-title h2 {
            font-size: 2.2rem;
        }
        
        .section-title p {
            font-size: 1.1rem;
        }
        
        .cta-content h2 {
            font-size: 2.5rem;
        }
    }
</style>
@endsection

@section('content')
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="hero-content text-center text-lg-start">
                        <h1>Cuidando su salud con excelencia</h1>
                        <p>Ofrecemos atención médica de primera calidad con los mejores especialistas y tecnología avanzada para el cuidado integral de su salud y la de su familia.</p>
                        <div class="hero-btn-container">
                            <a href="{{ route('portal.appointments') }}" class="hero-btn hero-btn-primary">
                                <i class="fas fa-calendar-check me-2"></i> Agendar Cita
                            </a>
                            <a href="{{ route('portal.services') }}" class="hero-btn hero-btn-secondary">
                                <i class="fas fa-stethoscope me-2"></i> Nuestros Servicios
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="hero-image-container text-center">
                        <img src="{{ asset('img/doctor-hero.png') }}" alt="Médicos profesionales" class="hero-image">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Services -->
    <section class="featured-services">
        <div class="container">
            <div class="section-title fade-in-up">
                <h2>Servicios <span>Destacados</span></h2>
                <p>Ofrecemos una amplia gama de servicios médicos especializados para garantizar una atención integral a nuestros pacientes</p>
            </div>

            <div class="row">
                @forelse($featuredServices as $service)
                    <div class="col-lg-4 col-md-6 mb-4 fade-in-up">
                        <div class="service-card">
                            <div class="service-img-container">
                                @if($service->image_path)
                                    <img src="{{ asset('storage/' . $service->image_path) }}" alt="{{ $service->name }}" class="service-img">
                                @else
                                    <img src="{{ asset('img/service-default.jpg') }}" alt="{{ $service->name }}" class="service-img">
                                @endif
                                <span class="service-badge">Destacado</span>
                            </div>
                            <div class="service-content">
                                <h3 class="service-title">{{ $service->name }}</h3>
                                <p class="service-text">{{ Str::limit($service->description, 150) }}</p>
                                <a href="{{ route('portal.services') }}" class="service-link">Ver más detalles <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center">
                        <p>No hay servicios destacados disponibles en este momento.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <!-- Statistics Section -->
    <section class="stats-section">
        <div class="container">
            <div class="stats-container">
                <div class="row">
                    <div class="col-lg-3 col-md-6 fade-in-up">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-user-md"></i>
                            </div>
                            <div class="stat-number" data-count="25">25+</div>
                            <div class="stat-text">Médicos Especialistas</div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 fade-in-up">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-procedures"></i>
                            </div>
                            <div class="stat-number" data-count="10000">10,000+</div>
                            <div class="stat-text">Pacientes Atendidos</div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 fade-in-up">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-star"></i>
                            </div>
                            <div class="stat-number" data-count="15">15+</div>
                            <div class="stat-text">Años de Experiencia</div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 fade-in-up">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-hospital"></i>
                            </div>
                            <div class="stat-number" data-count="8">8+</div>
                            <div class="stat-text">Especialidades</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="testimonials-section">
        <div class="container">
            <div class="section-title fade-in-up">
                <h2>Testimonios de <span>Pacientes</span></h2>
                <p>Lo que nuestros pacientes dicen sobre nuestros servicios y profesionales médicos</p>
            </div>

            <div class="row">
                <div class="col-lg-4 fade-in-left">
                    <div class="testimonial-card">
                        <p class="testimonial-text">La atención recibida fue excepcional. El personal médico es altamente profesional y dedicado. Me sentí bien cuidado desde el momento en que llegué hasta mi salida.</p>
                        <div class="testimonial-author">
                            <div class="testimonial-avatar">
                                <img src="{{ asset('img/avatar1.jpg') }}" alt="Testimonial Author">
                            </div>
                            <div class="testimonial-info">
                                <h4>Carlos Rodríguez</h4>
                                <p>Paciente de Cardiología</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 fade-in-up">
                    <div class="testimonial-card">
                        <p class="testimonial-text">Lo que más me impresionó fue la rapidez y precisión en el diagnóstico. Los especialistas realmente saben lo que hacen y la atención personalizada marca la diferencia.</p>
                        <div class="testimonial-author">
                            <div class="testimonial-avatar">
                                <img src="{{ asset('img/avatar2.jpg') }}" alt="Testimonial Author">
                            </div>
                            <div class="testimonial-info">
                                <h4>María González</h4>
                                <p>Paciente de Pediatría</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 fade-in-right">
                    <div class="testimonial-card">
                        <p class="testimonial-text">El proceso de agendar una cita fue muy sencillo y rápido. La clínica cuenta con instalaciones modernas y el personal es amable. Definitivamente recomendaré sus servicios.</p>
                        <div class="testimonial-author">
                            <div class="testimonial-avatar">
                                <img src="{{ asset('img/avatar3.jpg') }}" alt="Testimonial Author">
                            </div>
                            <div class="testimonial-info">
                                <h4>Juan Méndez</h4>
                                <p>Paciente de Traumatología</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call To Action -->
    <section class="cta-section">
        <div class="container">
            <div class="cta-content">
                <h2>¿Necesita atención médica?</h2>
                <p>No espere más para cuidar de su salud. Nuestro equipo de profesionales médicos está listo para atenderle con la más alta calidad y tecnología de vanguardia.</p>
                <a href="{{ route('portal.appointments') }}" class="cta-btn">
                    <i class="fas fa-calendar-check me-2"></i> Agendar mi Cita
                </a>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Animación para los números estadísticos
        const stats = document.querySelectorAll('.stat-number');
        
        stats.forEach(stat => {
            const count = parseInt(stat.getAttribute('data-count'), 10);
            let startValue = 0;
            const duration = 2000;
            const startTime = performance.now();
            
            function updateCount(timestamp) {
                const runTime = timestamp - startTime;
                const relativeProgress = runTime / duration;
                
                if (relativeProgress < 1) {
                    if (count >= 1000) {
                        const progress = Math.min(relativeProgress, 1);
                        const currentCount = Math.floor(progress * count);
                        stat.textContent = (currentCount / 1000).toFixed(1) + 'k+';
                    } else {
                        const progress = Math.min(relativeProgress, 1);
                        const currentCount = Math.floor(progress * count);
                        stat.textContent = currentCount + '+';
                    }
                    requestAnimationFrame(updateCount);
                } else {
                    if (count >= 1000) {
                        stat.textContent = (count / 1000).toFixed(1) + 'k+';
                    } else {
                        stat.textContent = count + '+';
                    }
                }
            }
            
            requestAnimationFrame(updateCount);
        });
        
        // Animaciones al hacer scroll
        const animatedElements = document.querySelectorAll('.fade-in-up, .fade-in-left, .fade-in-right');
        
        function checkInView() {
            const windowHeight = window.innerHeight;
            const windowTop = window.pageYOffset;
            const windowBottom = windowTop + windowHeight;
            
            animatedElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top + windowTop;
                const elementBottom = elementTop + element.offsetHeight;
                
                if (elementTop < windowBottom - 100 && elementBottom > windowTop) {
                    element.classList.add('in-view');
                }
            });
        }
        
        window.addEventListener('scroll', checkInView);
        window.addEventListener('resize', checkInView);
        
        // Ejecutar una vez para elementos visibles al cargar
        checkInView();
    });
</script>
@endsection 