{% extends "public/base.html" %}

{% block title %}HMI - Himpunan Mahasiswa Islam | Beranda{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="relative min-h-screen hero-section">
    {% if hero_images|length > 0 %}
    <!-- Hero Images Slider -->
    <div class="hero-slider">
        {% for hero_image in hero_images %}
        <div class="hero-slide {% if forloop.first %}active{% endif %}" 
             {% if hero_image.image %}style="background-image: url('{{ hero_image.image.url }}'); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100vh;"{% endif %}>
            <div class="hero-overlay-new"></div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <!-- Default Background -->
    <div class="absolute inset-0" style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);"></div>
    <div class="absolute inset-0 hero-shadow-overlay z-5"></div>
    {% endif %}
    
    <!-- Hero Content -->
    <div class="relative min-h-screen flex items-center" style="z-index: 10;">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-20">
            <div class="max-w-7xl mx-auto">
                <!-- Hero Content Container - Left Aligned -->
                <div class="hero-content-new text-left max-w-2xl lg:max-w-3xl">
                    <!-- Official Website Tag -->
                    <div class="mb-4 sm:mb-6">
                        <span class="inline-block px-4 py-1.5 sm:px-5 sm:py-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full text-white text-xs sm:text-sm font-semibold uppercase tracking-wider">
                            Official Website
                        </span>
                    </div>
                    
                    <!-- Dynamic Title - Split into two lines -->
                    <h1 id="hero-title" class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold mb-3 sm:mb-4 leading-tight text-white" style="font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); letter-spacing: -0.02em;">
                            {% if hero_images|length > 0 and hero_images.0.overlay_text %}
                                {{ hero_images.0.overlay_text }}
                            {% else %}
                            <span class="block">Pengurus Besar</span>
                            <span class="block">Himpunan Mahasiswa Islam</span>
                            {% endif %}
                        </h1>
                        
                        <!-- Dynamic Description -->
                    <p id="hero-description" class="text-sm sm:text-base md:text-lg lg:text-xl text-white leading-relaxed mb-6 sm:mb-8 max-w-xl" style="font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); font-weight: 400;">
                            {% if hero_images|length > 0 and hero_images.0.description %}
                                {{ hero_images.0.description }}
                            {% else %}
                            Adalah sebuah organisasi mahasiswa didirikan pada tahun 1947 yang berlandaskan nilai-nilai Islam. Sebagai organisasi pengkaderan, HMI memberikan wadah bagi para anggotanya untuk mengembangkan potensi diri, berorganisasi, dan berkontribusi bagi masyarakat.
                            {% endif %}
                        </p>
                        
                    <!-- MORE Button -->
                    <div class="mt-6 sm:mt-8">
                            <button onclick="scrollToNextSection()" 
                                class="hero-more-btn inline-flex items-center gap-2 px-6 py-3 sm:px-8 sm:py-4 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
                            <span class="text-sm sm:text-base">MORE</span>
                            <i class="fas fa-chevron-down text-xs sm:text-sm"></i>
                            </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Hero Slider Controls - Only Dots -->
    {% if hero_images and hero_images|length > 1 %}
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20">
        <div class="flex space-x-3">
            {% for hero_image in hero_images %}
            <button class="hero-slider-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white/80 transition-all duration-300 {% if forloop.first %}bg-white{% endif %}" 
                    data-slide="{{ forloop.counter0 }}"
                    title="{{ hero_image.title }}">
            </button>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</section>

<!-- Profil HMI Section -->
<section class="py-8 md:py-12 bg-gradient-to-br from-green-800 to-green-900">
    <div class="container mx-auto px-4">
        <!-- Section Title -->
        <div class="text-center mb-6 md:mb-8">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-3">Profil HMI</h2>
            <div class="w-16 h-1 bg-gradient-to-r from-green-400 to-green-500 mx-auto mb-4 rounded-full"></div>
            <p class="max-w-2xl mx-auto text-green-200 text-lg">Mengenal lebih dekat organisasi mahasiswa Islam terbesar di Indonesia</p>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 items-center">
            <!-- Content Card -->
            <div class="bg-green-700/50 backdrop-blur-sm rounded-xl p-4 md:p-6 shadow-lg border border-green-600/30">
                {% if profil or site_info %}
                <div class="mb-4 md:mb-6">
                    <h3 class="text-xl md:text-2xl font-bold text-white mb-3">
                        {% if profil and profil.nama_organisasi %}{{ profil.nama_organisasi }}{% elif site_info and site_info.nama_website %}{{ site_info.nama_website }}{% else %}Himpunan Mahasiswa Islam UINSU{% endif %}
                    </h3>
                    <div class="w-12 h-1 bg-gradient-to-r from-green-400 to-green-500 rounded-full mb-4"></div>
                </div>
                
                <div class="space-y-3 md:space-y-4 text-green-100 leading-relaxed">
                    {% if profil %}
                        {% if profil.deskripsi_organisasi %}
                        <div class="profil-deskripsi text-base">
                            {{ profil.deskripsi_organisasi|safe }}
                    </div>
                        {% else %}
                        <p class="text-base text-green-300 italic">
                            Belum ada deskripsi yang dibuat. Silakan lengkapi informasi organisasi di halaman admin.
                        </p>
                        {% endif %}
                    {% elif site_info and site_info.hero_description %}
                    <p class="text-base">
                        {{ site_info.hero_description }}
                    </p>
                    {% else %}
                    <p class="text-base text-green-300 italic">
                        Belum ada deskripsi yang dibuat. Silakan lengkapi informasi organisasi di halaman admin.
                    </p>
                    {% endif %}
                </div>
                {% else %}
                <div class="text-center text-green-300">
                    <p class="text-lg">Data profil HMI belum tersedia.</p>
                </div>
                {% endif %}
                
                <div class="flex flex-col sm:flex-row gap-2 md:gap-3 mt-4 md:mt-6">
                    <a href="{% url 'public:about' %}" 
                       class="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white px-4 py-2 md:px-6 md:py-3 rounded-lg font-semibold text-sm md:text-base transition-colors duration-300 shadow-lg">
                        <i class="fas fa-info-circle mr-2"></i>Pelajari Lebih Lanjut
                    </a>
                    <a href="{% url 'anggota:register' %}" 
                       class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-4 py-2 md:px-6 md:py-3 rounded-lg font-semibold text-sm md:text-base transition-colors duration-300 shadow-lg">
                        <i class="fas fa-user-plus mr-2"></i>Bergabung Sekarang
                    </a>
                </div>
            </div>
            
            <!-- Multi Image Slider Card -->
            <div class="relative">
                {% if profil_images %}
                <!-- Auto Sliding Images Container -->
                <div class="profil-images-slider-container relative overflow-hidden rounded-lg shadow-lg">
                    <div class="profil-images-slider flex transition-transform duration-1000 ease-in-out" id="profilImagesSlider">
                        {% for image in profil_images %}
                        <div class="profil-images-slide flex-shrink-0 w-full">
                            <div class="bg-green-700/50 backdrop-blur-sm rounded-lg p-2 md:p-3 shadow-lg border border-green-600/30">
                                {% if image.image %}
                                <img src="{{ image.image.url }}" 
                                     alt="{{ image.title|default:'Gambar Profil HMI' }}" 
                                     class="w-full h-48 md:h-64 object-cover rounded-lg">
                                {% else %}
                                <div class="w-full h-48 md:h-64 bg-gray-300 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-image text-gray-500 text-4xl"></i>
                                </div>
                                {% endif %}
                                {% if image.title %}
                                <div class="mt-2 md:mt-3 text-center">
                                    <h4 class="text-sm md:text-base font-bold text-white">{{ image.title }}</h4>
                                    {% if image.description %}
                                    <p class="text-xs md:text-sm text-green-200 mt-1">{{ image.description|truncatechars:60 }}</p>
                                    {% endif %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                        
                        <!-- Duplicate slides for infinite loop -->
                        {% for image in profil_images %}
                        <div class="profil-images-slide flex-shrink-0 w-full">
                            <div class="bg-green-700/50 backdrop-blur-sm rounded-lg p-2 md:p-3 shadow-lg border border-green-600/30">
                                {% if image.image %}
                                <img src="{{ image.image.url }}" 
                                     alt="{{ image.title|default:'Gambar Profil HMI' }}" 
                                     class="w-full h-48 md:h-64 object-cover rounded-lg">
                                {% else %}
                                <div class="w-full h-48 md:h-64 bg-gray-300 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-image text-gray-500 text-4xl"></i>
                                </div>
                                {% endif %}
                                {% if image.title %}
                                <div class="mt-2 md:mt-3 text-center">
                                    <h4 class="text-sm md:text-base font-bold text-white">{{ image.title }}</h4>
                                    {% if image.description %}
                                    <p class="text-xs md:text-sm text-green-200 mt-1">{{ image.description|truncatechars:60 }}</p>
                                    {% endif %}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% elif profil and profil.foto_utama %}
                <div class="bg-green-700/50 backdrop-blur-sm rounded-lg p-2 md:p-3 shadow-lg border border-green-600/30">
                    <img src="{{ profil.foto_utama.url }}" 
                         alt="Foto HMI" 
                         class="w-full h-48 md:h-64 object-cover rounded-lg">
                </div>
                {% elif site_info and site_info.logo %}
                <div class="bg-green-700/50 backdrop-blur-sm rounded-lg p-2 md:p-3 shadow-lg border border-green-600/30">
                    <img src="{{ site_info.logo.url }}" 
                         alt="Logo HMI" 
                         class="w-full h-48 md:h-64 object-cover rounded-lg">
                </div>
                {% else %}
                <div class="bg-gradient-to-br from-green-600 to-green-700 rounded-lg shadow-lg p-6 md:p-8 text-center">
                    <div class="w-16 h-16 md:w-20 md:h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-3 md:mb-4">
                        <i class="fas fa-university text-2xl md:text-3xl text-white"></i>
                    </div>
                    <h3 class="text-xl md:text-2xl font-bold text-white mb-2">
                        {% if profil and profil.nama_singkat %}{{ profil.nama_singkat }}{% else %}{{ website_settings.site_name|default:'HMI' }}{% endif %}
                    </h3>
                    <p class="text-green-100 text-base">Organisasi Mahasiswa Islam</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>

<!-- Achievements Section -->
<section class="py-8 md:py-12 bg-gradient-to-br from-green-600 via-green-700 to-green-800">
    <div class="container mx-auto px-4">
        <!-- Section Title -->
        <div class="text-center mb-8 md:mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-3">Prestasi & Pencapaian</h2>
            <div class="w-16 h-1 bg-gradient-to-r from-green-400 to-green-500 mx-auto mb-4 rounded-full"></div>
            <p class="max-w-2xl mx-auto text-green-200 text-lg">Berbagai pencapaian dan prestasi yang telah diraih {{ website_settings.site_name|default:'HMI' }}</p>
        </div>
        
        <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-3">
            {% for achievement in achievements %}
            <div class="bg-green-600/30 backdrop-blur-sm rounded-lg p-3 md:p-4 text-center border border-green-500/30 shadow-lg">
                <div class="w-8 h-8 md:w-10 md:h-10 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mx-auto mb-2">
                    <i class="{{ achievement.icon }} text-sm md:text-base text-white"></i>
                </div>
                <h3 class="text-lg md:text-xl font-bold text-white mb-1">{{ achievement.count }}{{ achievement.suffix }}</h3>
                <p class="text-green-200 font-semibold text-sm md:text-base">{{ achievement.title|truncatechars:20 }}</p>
            </div>
            {% empty %}
            <div class="col-span-full text-center text-green-200">
                <p>Belum ada data prestasi yang tersedia.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Services/Layanan Section -->
{% if services %}
<section class="py-8 md:py-12 bg-gradient-to-br from-green-600 via-green-700 to-green-800 text-white">
    <div class="container mx-auto px-4">
        <!-- Section Header -->
        <div class="text-center mb-6 md:mb-8">
            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-2 md:mb-3">Layanan & Program</h2>
            <div class="w-16 md:w-24 h-1 bg-gradient-to-r from-green-400 to-green-500 mx-auto mb-3 md:mb-4 rounded-full"></div>
            <p class="max-w-2xl mx-auto text-green-100 text-sm md:text-base lg:text-lg px-2">Berbagai layanan dan program unggulan yang kami tawarkan untuk pengembangan diri dan organisasi</p>
        </div>
        
        <!-- Mobile: Auto-slide Slider (1 card per slide) -->
        <div class="block md:hidden">
            <div class="services-slider-container relative overflow-hidden">
                <div class="services-slider flex transition-transform duration-1000 ease-in-out" id="servicesSlider" style="transform: translateX(0px);">
                    <!-- First set of slides -->
                    {% for service in services %}
                    <div class="service-slide flex-shrink-0 w-full">
                        <a href="{% url 'layanan_public:service_detail' service.slug %}" class="block px-2">
                            <div class="bg-green-800/95 backdrop-blur-sm rounded-xl overflow-hidden border border-green-500/40 shadow-xl">
                                <!-- Service Image -->
                                <div class="relative h-40 overflow-hidden bg-green-600">
                                    {% if service.image %}
                                    <img src="{{ service.image.url }}" 
                                         alt="{{ service.title }}" 
                                         class="w-full h-full object-cover"
                                         loading="lazy"
                                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                    <div class="w-full h-full bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center absolute inset-0" style="display: none;">
                                        <i class="{{ service.icon|default:'fas fa-cog' }} text-4xl text-white/50"></i>
                                    </div>
                                    {% else %}
                                    <div class="w-full h-full bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center">
                                        <i class="{{ service.icon|default:'fas fa-cog' }} text-4xl text-white/50"></i>
                                    </div>
                                    {% endif %}
                                    <div class="absolute inset-0 bg-gradient-to-t from-green-900/80 to-transparent pointer-events-none"></div>
                                    
                                    <!-- Category Badge -->
                                    <div class="absolute top-2 left-2">
                                        <span class="px-2 py-1 text-xs font-semibold text-white rounded-full backdrop-blur-sm" 
                                              style="background-color: {{ service.category.color|default:'#3b82f6' }}/90;">
                                            <i class="{{ service.category.icon|default:'fas fa-tag' }} mr-1"></i>{{ service.category.name|truncatechars:15 }}
                                        </span>
                                    </div>
                                    
                                    <!-- Status Badge -->
                                    <div class="absolute top-2 right-2">
                                        {% if service.status == 'active' %}
                                        <span class="px-2 py-1 text-xs font-semibold text-white bg-green-500 rounded-full">Aktif</span>
                                        {% elif service.status == 'coming_soon' %}
                                        <span class="px-2 py-1 text-xs font-semibold text-white bg-yellow-500 rounded-full">Segera</span>
                                        {% elif service.status == 'maintenance' %}
                                        <span class="px-2 py-1 text-xs font-semibold text-white bg-red-500 rounded-full">Maint</span>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <!-- Service Content -->
                                <div class="p-4">
                                    <h3 class="text-base font-bold mb-2 line-clamp-2 leading-tight">{{ service.title|truncatechars:40 }}</h3>
                                    <p class="text-green-100 text-xs mb-3 line-clamp-2 leading-relaxed">{{ service.description|striptags|truncatechars:60 }}</p>
                                    
                                    <!-- Price & Duration -->
                                    <div class="flex items-center justify-between mb-3 pb-3 border-b border-green-600/30">
                                        <div>
                                            {% if service.is_free %}
                                            <span class="text-green-300 font-bold text-sm">
                                                <i class="fas fa-gift mr-1"></i>Gratis
                                            </span>
                                            {% else %}
                                            <span class="text-green-200 font-bold text-sm">
                                                <i class="fas fa-tag mr-1"></i>Rp {{ service.price|floatformat:0|default:'0' }}
                                            </span>
                                            {% endif %}
                                        </div>
                                        {% if service.duration %}
                                        <span class="text-green-200 text-xs">
                                            <i class="far fa-clock mr-1"></i>{{ service.duration }}
                                        </span>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Action Button -->
                                    <div class="flex items-center justify-between">
                                        <span class="text-green-200 text-xs font-semibold">Lihat Detail</span>
                                        <i class="fas fa-arrow-right text-green-200 text-xs"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                    
                    <!-- Duplicate slides for infinite loop -->
                    {% for service in services %}
                    <div class="service-slide flex-shrink-0 w-full">
                        <a href="{% url 'layanan_public:service_detail' service.slug %}" class="block px-2">
                            <div class="bg-green-800/95 backdrop-blur-sm rounded-xl overflow-hidden border border-green-500/40 shadow-xl">
                                <!-- Service Image -->
                                <div class="relative h-40 overflow-hidden bg-green-600">
                                    {% if service.image %}
                                    <img src="{{ service.image.url }}" 
                                         alt="{{ service.title }}" 
                                         class="w-full h-full object-cover"
                                         loading="lazy"
                                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                    <div class="w-full h-full bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center absolute inset-0" style="display: none;">
                                        <i class="{{ service.icon|default:'fas fa-cog' }} text-4xl text-white/50"></i>
                                    </div>
                                    {% else %}
                                    <div class="w-full h-full bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center">
                                        <i class="{{ service.icon|default:'fas fa-cog' }} text-4xl text-white/50"></i>
                                    </div>
                                    {% endif %}
                                    <div class="absolute inset-0 bg-gradient-to-t from-green-900/80 to-transparent pointer-events-none"></div>
                                    
                                    <!-- Category Badge -->
                                    <div class="absolute top-2 left-2">
                                        <span class="px-2 py-1 text-xs font-semibold text-white rounded-full backdrop-blur-sm" 
                                              style="background-color: {{ service.category.color|default:'#3b82f6' }}/90;">
                                            <i class="{{ service.category.icon|default:'fas fa-tag' }} mr-1"></i>{{ service.category.name|truncatechars:15 }}
                                        </span>
                                    </div>
                                    
                                    <!-- Status Badge -->
                                    <div class="absolute top-2 right-2">
                                        {% if service.status == 'active' %}
                                        <span class="px-2 py-1 text-xs font-semibold text-white bg-green-500 rounded-full">Aktif</span>
                                        {% elif service.status == 'coming_soon' %}
                                        <span class="px-2 py-1 text-xs font-semibold text-white bg-yellow-500 rounded-full">Segera</span>
                                        {% elif service.status == 'maintenance' %}
                                        <span class="px-2 py-1 text-xs font-semibold text-white bg-red-500 rounded-full">Maint</span>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <!-- Service Content -->
                                <div class="p-4">
                                    <h3 class="text-base font-bold mb-2 line-clamp-2 leading-tight">{{ service.title|truncatechars:40 }}</h3>
                                    <p class="text-green-100 text-xs mb-3 line-clamp-2 leading-relaxed">{{ service.description|striptags|truncatechars:60 }}</p>
                                    
                                    <!-- Price & Duration -->
                                    <div class="flex items-center justify-between mb-3 pb-3 border-b border-green-600/30">
                                        <div>
                                            {% if service.is_free %}
                                            <span class="text-green-300 font-bold text-sm">
                                                <i class="fas fa-gift mr-1"></i>Gratis
                                            </span>
                                            {% else %}
                                            <span class="text-green-200 font-bold text-sm">
                                                <i class="fas fa-tag mr-1"></i>Rp {{ service.price|floatformat:0|default:'0' }}
                                            </span>
                                            {% endif %}
                                        </div>
                                        {% if service.duration %}
                                        <span class="text-green-200 text-xs">
                                            <i class="far fa-clock mr-1"></i>{{ service.duration }}
                                        </span>
                                        {% endif %}
                                    </div>
                                    
                                    <!-- Action Button -->
                                    <div class="flex items-center justify-between">
                                        <span class="text-green-200 text-xs font-semibold">Lihat Detail</span>
                                        <i class="fas fa-arrow-right text-green-200 text-xs"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            
            <!-- Mobile Slider Controls -->
            <div class="flex items-center justify-center gap-2 mt-4">
                <!-- Auto-slide Toggle Button -->
                <button id="servicesAutoSlideToggle" class="bg-green-700/80 hover:bg-green-700 text-white px-3 py-2 rounded-lg transition-all duration-300 shadow-lg" title="Toggle Auto Slide">
                    <i class="fas fa-pause text-xs" id="servicesAutoSlideIcon"></i>
                </button>
                
                <!-- Slide Dots Indicator -->
                <div class="flex gap-1.5" id="servicesSliderDots">
                    {% for service in services %}
                    <button class="service-dot w-2 h-2 rounded-full bg-white/30 transition-all duration-300 {% if forloop.first %}bg-white w-4{% endif %}" 
                            data-slide="{{ forloop.counter0 }}" 
                            aria-label="Slide {{ forloop.counter }}"></button>
                    {% endfor %}
                </div>
                
                <!-- Next Button (Manual Slide) -->
                <button id="servicesNextBtn" class="bg-green-700/80 hover:bg-green-700 text-white px-3 py-2 rounded-lg transition-all duration-300 shadow-lg" title="Slide Berikutnya">
                    <i class="fas fa-chevron-right text-xs"></i>
                </button>
            </div>
        </div>
        
        <!-- Tablet & Desktop: Grid (2 columns on tablet, 4 columns on desktop) -->
        <div class="hidden md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
            {% for service in services %}
            <a href="{% url 'layanan_public:service_detail' service.slug %}" class="group">
                <div class="bg-green-800/95 backdrop-blur-sm rounded-xl overflow-hidden border border-green-500/40 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 h-full flex flex-col">
                    <!-- Service Image -->
                    <div class="relative h-48 lg:h-56 overflow-hidden bg-green-600">
                        {% if service.image %}
                        <img src="{{ service.image.url }}" 
                             alt="{{ service.title }}" 
                             class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 block"
                             loading="lazy"
                             onerror="this.onerror=null; this.style.display='none'; if(this.nextElementSibling) this.nextElementSibling.style.display='flex';">
                        <div class="w-full h-full bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center absolute inset-0" style="display: none;">
                            <i class="{{ service.icon|default:'fas fa-cog' }} text-5xl lg:text-6xl text-white/50"></i>
                        </div>
                        {% else %}
                        <div class="w-full h-full bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center">
                            <i class="{{ service.icon|default:'fas fa-cog' }} text-5xl lg:text-6xl text-white/50"></i>
                        </div>
                        {% endif %}
                        <!-- Light overlay only at bottom for text readability -->
                        <div class="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-green-900/40 to-transparent pointer-events-none"></div>
                        
                        <!-- Category Badge -->
                        <div class="absolute top-3 left-3 z-10">
                            <span class="px-3 py-1.5 text-xs font-semibold text-white rounded-full backdrop-blur-sm shadow-lg" 
                                  style="background-color: {{ service.category.color|default:'#3b82f6' }}/90;">
                                <i class="{{ service.category.icon|default:'fas fa-tag' }} mr-1"></i>{{ service.category.name|truncatechars:20 }}
                            </span>
                        </div>
                        
                        <!-- Status Badge -->
                        <div class="absolute top-3 right-3 z-10">
                            {% if service.status == 'active' %}
                            <span class="px-3 py-1.5 text-xs font-semibold text-white bg-green-500 rounded-full shadow-lg">Aktif</span>
                            {% elif service.status == 'coming_soon' %}
                            <span class="px-3 py-1.5 text-xs font-semibold text-white bg-yellow-500 rounded-full shadow-lg">Segera</span>
                            {% elif service.status == 'maintenance' %}
                            <span class="px-3 py-1.5 text-xs font-semibold text-white bg-red-500 rounded-full shadow-lg">Maint</span>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- Service Content -->
                    <div class="p-4 lg:p-5 flex-1 flex flex-col">
                        <h3 class="text-lg lg:text-xl font-bold mb-2 line-clamp-2 leading-tight group-hover:text-green-200 transition-colors">{{ service.title }}</h3>
                        <p class="text-green-100 text-sm mb-4 line-clamp-3 leading-relaxed flex-1">{{ service.description|striptags|truncatechars:100 }}</p>
                        
                        <!-- Price & Duration -->
                        <div class="flex items-center justify-between mb-4 pb-4 border-b border-green-600/30">
                            <div>
                                {% if service.is_free %}
                                <span class="text-green-300 font-bold text-base">
                                    <i class="fas fa-gift mr-1"></i>Gratis
                                </span>
                                {% else %}
                                <span class="text-green-200 font-bold text-base">
                                    <i class="fas fa-tag mr-1"></i>Rp {{ service.price|floatformat:0|default:'0' }}
                                </span>
                                {% endif %}
                            </div>
                            {% if service.duration %}
                            <span class="text-green-200 text-sm">
                                <i class="far fa-clock mr-1"></i>{{ service.duration }}
                            </span>
                            {% endif %}
                        </div>
                        
                        <!-- Action Button -->
                        <div class="flex items-center justify-between bg-green-700/50 rounded-lg px-4 py-2 group-hover:bg-green-700 transition-colors">
                            <span class="text-white text-sm font-semibold">Lihat Detail</span>
                            <i class="fas fa-arrow-right text-white text-sm group-hover:translate-x-1 transition-transform"></i>
                        </div>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
        
        <!-- View All Button -->
        <div class="text-center mt-6 md:mt-8">
            <a href="{% url 'layanan_public:service_list' %}" 
               class="inline-flex items-center bg-white text-green-800 hover:bg-green-50 px-6 py-3 rounded-lg font-bold text-sm md:text-base shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
                <i class="fas fa-list mr-2"></i>
                Lihat Semua Layanan
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Announcements Section -->
<section class="py-8 md:py-10 bg-gradient-to-br from-green-600 via-green-700 to-green-800 text-white">
    <div class="container mx-auto px-4">
        <div class="text-center mb-6 md:mb-8">
            <h2 class="text-2xl md:text-3xl font-bold mb-2">Pengumuman Penting</h2>
            <div class="w-16 h-0.5 bg-green-400 mx-auto mb-4"></div>
            <p class="max-w-2xl mx-auto text-green-200 text-sm md:text-base">Informasi penting dan pengumuman terkini dari {{ website_settings.site_name|default:'HMI' }}</p>
        </div>
        
        {% if announcements %}
        <!-- Mobile: Auto-slide Slider (1 card per slide) -->
        <div class="block md:hidden">
            <div class="announcements-slider-container relative overflow-hidden">
                <div class="announcements-slider flex transition-transform duration-1000 ease-in-out" id="announcementsSlider" style="transform: translateX(0px);">
                    <!-- First set of slides -->
                    {% for announcement in announcements %}
                    <div class="announcement-slide flex-shrink-0 w-full">
                        <a href="{% url 'blog:blog_detail' announcement.slug %}" class="block">
                            <div class="bg-green-800/95 backdrop-blur-sm rounded-lg p-4 border border-green-500/40 shadow-lg hover:shadow-xl transition-all duration-300 mx-2">
                            <div class="flex items-start">
                                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                        <i class="fas fa-bullhorn text-white text-sm"></i>
                                </div>
                                <div class="flex-1">
                                        <div class="flex items-center mb-1">
                                            <span class="bg-green-600 text-white px-2 py-0.5 rounded text-xs font-medium mr-2">PENGUMUMAN</span>
                                        </div>
                                        <h3 class="text-sm font-bold mb-1 line-clamp-1 text-white">{{ announcement.judul|truncatechars:25 }}</h3>
                                        <p class="text-green-200 mb-2 text-xs line-clamp-2">
                                            {% if announcement.excerpt %}
                                                {{ announcement.excerpt|striptags|truncatechars:40 }}
                                            {% else %}
                                                {{ announcement.konten|striptags|truncatechars:40 }}
                                    {% endif %}
                                        </p>
                                        <span class="inline-flex items-center text-green-400 hover:text-green-300 font-semibold text-xs">
                                            Lihat Detail <i class="fas fa-arrow-right ml-1 text-xs"></i>
                                        </span>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    {% endfor %}
                    
                    <!-- Duplicate slides for infinite loop -->
                    {% for announcement in announcements %}
                    <div class="announcement-slide flex-shrink-0 w-full">
                        <a href="{% url 'blog:blog_detail' announcement.slug %}" class="block">
                            <div class="bg-green-800/95 backdrop-blur-sm rounded-lg p-4 border border-green-500/40 shadow-lg hover:shadow-xl transition-all duration-300 mx-2">
                            <div class="flex items-start">
                                    <div class="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                        <i class="fas fa-bullhorn text-white text-sm"></i>
                                </div>
                                <div class="flex-1">
                                        <div class="flex items-center mb-1">
                                            <span class="bg-green-600 text-white px-2 py-0.5 rounded text-xs font-medium mr-2">PENGUMUMAN</span>
                                        </div>
                                        <h3 class="text-sm font-bold mb-1 line-clamp-1 text-white">{{ announcement.judul|truncatechars:25 }}</h3>
                                        <p class="text-green-200 mb-2 text-xs line-clamp-2">
                                            {% if announcement.excerpt %}
                                                {{ announcement.excerpt|striptags|truncatechars:40 }}
                                            {% else %}
                                                {{ announcement.konten|striptags|truncatechars:40 }}
                                    {% endif %}
                                        </p>
                                        <span class="inline-flex items-center text-green-400 hover:text-green-300 font-semibold text-xs">
                                            Lihat Detail <i class="fas fa-arrow-right ml-1 text-xs"></i>
                                        </span>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- Desktop: Auto-slide Grid (2 cards per slide) -->
        <div class="hidden md:block">
            <div class="announcements-slider-container relative overflow-hidden">
                <div class="announcements-slider flex transition-transform duration-1000 ease-in-out" id="announcementsSliderDesktop" style="transform: translateX(0px);">
                    <!-- First set of slides -->
                    {% for announcement in announcements %}
                    <div class="announcement-slide flex-shrink-0 w-1/2">
                        <a href="{% url 'blog:blog_detail' announcement.slug %}" class="block">
                            <div class="bg-green-800/95 backdrop-blur-sm rounded-lg p-4 border border-green-500/40 shadow-lg hover:shadow-xl transition-all duration-300 mx-2 h-full">
                            <div class="flex items-start">
                                    <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                        <i class="fas fa-bullhorn text-white text-base"></i>
                                </div>
                                <div class="flex-1">
                                        <div class="flex items-center mb-2">
                                            <span class="bg-green-600 text-white px-2 py-1 rounded text-xs font-medium">PENGUMUMAN</span>
                                        </div>
                                        <h3 class="text-base font-bold mb-2 line-clamp-1 text-white">{{ announcement.judul|truncatechars:30 }}</h3>
                                        <p class="text-green-200 mb-2 text-xs line-clamp-2">
                                            {% if announcement.excerpt %}
                                                {{ announcement.excerpt|striptags|truncatechars:50 }}
                                            {% else %}
                                                {{ announcement.konten|striptags|truncatechars:50 }}
                                    {% endif %}
                                        </p>
                                        <span class="inline-flex items-center text-green-400 hover:text-green-300 font-semibold text-xs">
                                            Lihat Detail <i class="fas fa-arrow-right ml-1"></i>
                                        </span>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    {% endfor %}
                    
                    <!-- Duplicate slides for infinite loop -->
                    {% for announcement in announcements %}
                    <div class="announcement-slide flex-shrink-0 w-1/2">
                        <a href="{% url 'blog:blog_detail' announcement.slug %}" class="block">
                            <div class="bg-green-800/95 backdrop-blur-sm rounded-lg p-4 border border-green-500/40 shadow-lg hover:shadow-xl transition-all duration-300 mx-2 h-full">
                            <div class="flex items-start">
                                    <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-3 flex-shrink-0">
                                        <i class="fas fa-bullhorn text-white text-base"></i>
                                </div>
                                <div class="flex-1">
                                        <div class="flex items-center mb-2">
                                            <span class="bg-green-600 text-white px-2 py-1 rounded text-xs font-medium">PENGUMUMAN</span>
                                        </div>
                                        <h3 class="text-base font-bold mb-2 line-clamp-1 text-white">{{ announcement.judul|truncatechars:30 }}</h3>
                                        <p class="text-green-200 mb-2 text-xs line-clamp-2">
                                            {% if announcement.excerpt %}
                                                {{ announcement.excerpt|striptags|truncatechars:50 }}
                                            {% else %}
                                                {{ announcement.konten|striptags|truncatechars:50 }}
                                    {% endif %}
                                        </p>
                                        <span class="inline-flex items-center text-green-400 hover:text-green-300 font-semibold text-xs">
                                            Lihat Detail <i class="fas fa-arrow-right ml-1"></i>
                                        </span>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- View All Button -->
        <div class="text-center mt-6">
            <a href="{% url 'blog:blog_list' %}?type=announcement" class="inline-flex items-center bg-white text-green-800 hover:bg-green-50 px-6 py-3 rounded-lg font-bold text-sm md:text-base shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
                <i class="fas fa-bullhorn mr-2"></i>
                Lihat Semua Pengumuman
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
        {% else %}
        <div class="text-center text-green-200">
            <p>Belum ada pengumuman yang tersedia.</p>
        </div>
        {% endif %}
    </div>
</section>

<!-- News/Berita Section -->
{% if blog_posts %}
<section class="py-16 bg-gradient-to-br from-green-800 via-green-900 to-green-800">
    <div class="container mx-auto px-4">
        <!-- Section Header -->
        <div class="text-center mb-12">
            <!-- BERITA Tag -->
            <div class="inline-block mb-4">
                <span class="inline-flex items-center px-4 py-1.5 rounded-lg text-sm font-semibold bg-green-700/50 text-white border border-green-500 uppercase tracking-wide backdrop-blur-sm">
                    BERITA
                </span>
            </div>
            <!-- Main Title -->
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4 leading-tight">
                Temukan Berita Terbaru dari PB HMI
            </h2>
        </div>
        
        <!-- News Cards - Mobile Slider / Desktop Grid -->
        <!-- Mobile: Slider (1 card per slide, auto-slide) -->
        <div class="block lg:hidden">
            <div class="news-slider-container relative overflow-hidden">
                <div class="news-slider flex transition-transform duration-1000 ease-in-out" id="newsSlider" style="transform: translateX(0px);">
                    <!-- First set of slides -->
                    {% for post in blog_posts %}
                    <div class="news-slide flex-shrink-0 w-full">
                        <a href="{% url 'blog:blog_detail' post.slug %}" class="group block px-2">
                            <div class="news-card relative h-96 rounded-lg overflow-hidden shadow-xl">
                                <!-- Background Image -->
                                {% if post.primary_image %}
                                <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ post.primary_image.url }}');">
                                </div>
                                {% elif post.gambar %}
                                <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ post.gambar.url }}');">
                                </div>
                                {% else %}
                                <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-800">
                                </div>
                                {% endif %}
                                
                                <!-- Content Overlay -->
                                <div class="news-card-content absolute inset-x-0 bottom-0 p-4 text-white">
                                    <!-- Date -->
                                    <div class="mb-2">
                                        <span class="news-card-date text-xs font-semibold text-orange-400" style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);">
                                            {{ post.created_at|date:"d F Y" }}
                                        </span>
                            </div>
                                    
                                    <!-- Title -->
                                    <h3 class="news-card-title text-base font-bold mb-2 leading-tight line-clamp-2" style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);">
                                        {{ post.judul }}
                                    </h3>
                                    
                                    <!-- Excerpt/Snippet -->
                                    {% if post.excerpt %}
                                    <div class="news-card-excerpt text-xs text-white/90 line-clamp-3 leading-relaxed" style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);">
                                        {{ post.excerpt|striptags|truncatechars:120 }}
                        </div>
                                {% else %}
                                    <div class="news-card-excerpt text-xs text-white/90 line-clamp-3 leading-relaxed" style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);">
                                        {{ post.konten|striptags|truncatechars:120 }}
                                    </div>
                                {% endif %}
                        </div>
                                
                                <!-- Hover Overlay -->
                                <div class="absolute inset-0 bg-green-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"></div>
                    </div>
                        </a>
                </div>
                {% endfor %}
                    
                    <!-- Duplicate slides for infinite loop -->
                    {% for post in blog_posts %}
                    <div class="news-slide flex-shrink-0 w-full">
                        <a href="{% url 'blog:blog_detail' post.slug %}" class="group block px-2">
                            <div class="news-card relative h-96 rounded-lg overflow-hidden shadow-xl">
                                <!-- Background Image -->
                                {% if post.primary_image %}
                                <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ post.primary_image.url }}');">
            </div>
                                {% elif post.gambar %}
                                <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ post.gambar.url }}');">
        </div>
                                {% else %}
                                <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-800">
    </div>
                                {% endif %}
                                
                                <!-- Content Overlay -->
                                <div class="news-card-content absolute inset-x-0 bottom-0 p-4 text-white">
                                    <!-- Date -->
                                    <div class="mb-2">
                                        <span class="news-card-date text-xs font-semibold text-orange-400" style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);">
                                            {{ post.created_at|date:"d F Y" }}
                                        </span>
        </div>
            
                                    <!-- Title -->
                                    <h3 class="news-card-title text-base font-bold mb-2 leading-tight line-clamp-2" style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);">
                                        {{ post.judul }}
                                    </h3>
                                    
                                    <!-- Excerpt/Snippet -->
                                    {% if post.excerpt %}
                                    <div class="news-card-excerpt text-xs text-white/90 line-clamp-3 leading-relaxed" style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);">
                                        {{ post.excerpt|striptags|truncatechars:120 }}
                    </div>
                                    {% else %}
                                    <div class="news-card-excerpt text-xs text-white/90 line-clamp-3 leading-relaxed" style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);">
                                        {{ post.konten|striptags|truncatechars:120 }}
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <!-- Hover Overlay -->
                                <div class="absolute inset-0 bg-green-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"></div>
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            </div>
            
            <!-- Mobile Slider Controls -->
            <div class="flex items-center justify-center gap-3 md:gap-4 mt-6">
                <!-- Auto-slide Toggle Button -->
                <button id="newsAutoSlideToggle" class="bg-green-700/80 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-all duration-300 shadow-lg" title="Toggle Auto Slide">
                    <i class="fas fa-pause" id="newsAutoSlideIcon"></i>
                </button>
                
                <!-- Previous Button (Disabled - Forward only) -->
                <button id="newsPrevBtn" class="bg-green-700/50 text-white/50 px-4 py-2 rounded-lg cursor-not-allowed" disabled title="Hanya bisa slide ke kanan">
                    <i class="fas fa-chevron-left"></i>
                </button>
                
                <!-- Slide Dots Indicator -->
                <div class="flex gap-2" id="newsSliderDots">
                    {% for post in blog_posts %}
                    <button class="news-dot w-2 h-2 rounded-full bg-white/30 transition-all duration-300 {% if forloop.first %}bg-white w-4{% endif %}" data-slide="{{ forloop.counter0 }}" aria-label="Slide {{ forloop.counter }}"></button>
                    {% endfor %}
                </div>
                
                <!-- Next Button (Manual Slide) -->
                <button id="newsNextBtn" class="bg-green-700/80 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-all duration-300 shadow-lg" title="Slide Berikutnya">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
        
        <!-- Desktop: Grid (4 columns) -->
        <div class="hidden lg:grid grid-cols-4 gap-6">
            {% for post in blog_posts %}
            <a href="{% url 'blog:blog_detail' post.slug %}" class="group">
                <div class="news-card relative h-[450px] rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
                    <!-- Background Image -->
                    {% if post.primary_image %}
                    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ post.primary_image.url }}');">
                    </div>
                    {% elif post.gambar %}
                    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('{{ post.gambar.url }}');">
                    </div>
                    {% else %}
                    <div class="absolute inset-0 bg-gradient-to-br from-green-600 to-green-800">
                    </div>
                        {% endif %}
                    
                    <!-- Content Overlay -->
                    <div class="news-card-content absolute inset-x-0 bottom-0 p-6 text-white">
                        <!-- Date -->
                        <div class="mb-2">
                            <span class="news-card-date text-sm font-semibold text-orange-400" style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);">
                                {{ post.created_at|date:"d F Y" }}
                            </span>
                    </div>
                        
                        <!-- Title -->
                        <h3 class="news-card-title text-lg lg:text-xl font-bold mb-2 leading-tight line-clamp-2" style="text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);">
                            {{ post.judul }}
                        </h3>
                        
                        <!-- Excerpt/Snippet -->
                        {% if post.excerpt %}
                        <div class="news-card-excerpt text-sm text-white/90 line-clamp-3 leading-relaxed" style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);">
                            {{ post.excerpt|striptags|truncatechars:120 }}
                </div>
                        {% else %}
                        <div class="news-card-excerpt text-sm text-white/90 line-clamp-3 leading-relaxed" style="text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);">
                            {{ post.konten|striptags|truncatechars:120 }}
                </div>
                        {% endif %}
            </div>
                    
                    <!-- Hover Overlay -->
                    <div class="absolute inset-0 bg-green-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"></div>
                </div>
            </a>
            {% endfor %}
        </div>
        
        <!-- View All Button -->
        <div class="text-center mt-10">
            <a href="{% url 'blog:blog_list' %}" class="inline-flex items-center bg-white text-green-800 hover:bg-green-50 px-6 py-3 rounded-lg font-bold text-base shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
                <i class="fas fa-newspaper mr-2"></i>
                Lihat Semua Berita
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Latest Activities Section -->
{% if kegiatan_terbaru %}
<section class="py-16 bg-gradient-to-br from-green-500 to-green-600">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Kegiatan Terbaru</h2>
            <div class="w-24 h-1 bg-green-300 mx-auto mb-8"></div>
            <p class="max-w-3xl mx-auto text-green-100 text-lg">Ikuti berbagai kegiatan menarik yang diselenggarakan oleh HMI.</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for kegiatan in kegiatan_terbaru %}
            <div class="bg-green-400/50 backdrop-blur-sm rounded-lg shadow-md overflow-hidden border border-green-300/30">
                {% if kegiatan.gambar %}
                <div class="h-32 overflow-hidden">
                    <img src="{{ kegiatan.gambar.url }}" alt="{{ kegiatan.judul }}" class="w-full h-full object-cover">
            </div>
                {% endif %}
                <div class="p-3">
                    <div class="flex items-center justify-between mb-2">
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-200 text-green-800">
                            {{ kegiatan.kategori.nama|truncatechars:10 }}
                        </span>
                        <span class="text-xs text-green-200">
                            <i class="fas fa-calendar mr-1"></i>
                            {{ kegiatan.tanggal_mulai|date:"d M" }}
                        </span>
            </div>
                    <h3 class="text-lg md:text-xl font-bold text-white mb-2 line-clamp-2">{{ kegiatan.judul|truncatechars:40 }}</h3>
                    <p class="text-green-100 mb-3 line-clamp-2 text-sm">{{ kegiatan.deskripsi|truncatechars:60 }}</p>
                    {% if kegiatan.slug %}
                    <a href="{% url 'event:event_detail' event.slug %}" class="text-green-200 hover:text-green-100 font-medium text-sm">
                        Lihat <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                    {% else %}
                    <span class="text-green-200 font-medium text-sm">
                        Lihat <i class="fas fa-arrow-right ml-1"></i>
                    </span>
                    {% endif %}
            </div>
            </div>
            {% endfor %}
        </div>
        
        <div class="text-center mt-10">
            <a href="{% url 'public:events' %}" class="inline-flex items-center text-green-200 hover:text-green-100 font-medium text-base">
                Lihat Semua Kegiatan
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </a>
        </div>
    </div>
</section>
{% endif %}

<!-- Gallery Preview Section -->
{% if galeri_terbaru %}
<section class="py-12 md:py-16 bg-gradient-to-br from-green-500 via-green-600 to-green-700">
    <div class="container mx-auto px-4">
        <div class="text-center mb-8 md:mb-12">
            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-3 md:mb-4">Galeri Foto</h2>
            <div class="w-16 md:w-24 h-1 bg-green-200 mx-auto mb-4 md:mb-6 rounded-full"></div>
            <p class="max-w-2xl mx-auto text-green-100 text-sm md:text-base lg:text-lg px-2">Dokumentasi visual berbagai kegiatan dan momen penting HMI</p>
        </div>
        
        <div class="grid grid-cols-2 gap-3 md:gap-4 max-w-4xl mx-auto">
            {% for foto in galeri_terbaru %}
            <button onclick="openGaleriModal({{ forloop.counter0 }})" class="relative overflow-hidden rounded-xl shadow-lg block bg-green-600 w-full text-left">
                <div class="w-full h-40 md:h-56 lg:h-64">
                    {% if foto.gambar %}
                    <img src="{{ foto.gambar.url }}" 
                         alt="{{ foto.judul|default:'Galeri HMI' }}" 
                         class="w-full h-full object-cover"
                         loading="lazy"
                         onerror="this.onerror=null; this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="w-full h-full bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center" style="display: none;">
                        <i class="fas fa-image text-4xl md:text-5xl text-white/50"></i>
                    </div>
                    {% else %}
                    <div class="w-full h-full bg-gradient-to-br from-green-600 to-green-700 flex items-center justify-center">
                        <i class="fas fa-image text-4xl md:text-5xl text-white/50"></i>
                    </div>
                    {% endif %}
                </div>
            </button>
            {% endfor %}
        </div>
        
        <div class="text-center mt-8 md:mt-10">
            <a href="{% url 'public:galeri_list' %}" 
               class="inline-flex items-center bg-white text-green-700 px-6 py-3 rounded-lg font-bold text-sm md:text-base shadow-lg">
                <i class="fas fa-images mr-2"></i>
                Lihat Semua Foto
                <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
    </div>
</section>

<!-- Galeri Detail Modal -->
<div id="galeriModal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex justify-between items-center z-10">
            <h3 class="text-xl font-bold text-gray-800" id="galeriModalTitle">Detail Galeri</h3>
            <button onclick="closeGaleriModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-6" id="galeriModalContent">
            <!-- Content will be loaded dynamically -->
        </div>
    </div>
</div>

<script>
    const galeriData = [
        {% for foto in galeri_terbaru %}
        {
            id: {{ foto.id }},
            judul: '{{ foto.judul|escapejs }}',
            deskripsi: '{{ foto.deskripsi|escapejs|default:"" }}',
            gambar: '{% if foto.gambar %}{{ foto.gambar.url }}{% endif %}',
            created_at: '{{ foto.created_at|date:"d F Y" }}'
        }{% if not forloop.last %},{% endif %}
        {% endfor %}
    ];
    
    function openGaleriModal(index) {
        const galeri = galeriData[index];
        if (!galeri) return;
        
        const modal = document.getElementById('galeriModal');
        const title = document.getElementById('galeriModalTitle');
        const content = document.getElementById('galeriModalContent');
        
        title.textContent = galeri.judul || 'Detail Galeri';
        
        let html = '';
        if (galeri.gambar) {
            html += `<div class="mb-4"><img src="${galeri.gambar}" alt="${galeri.judul}" class="w-full h-auto rounded-lg shadow-lg"></div>`;
        }
        if (galeri.deskripsi) {
            html += `<div class="mb-4"><p class="text-gray-700 leading-relaxed">${galeri.deskripsi}</p></div>`;
        }
        html += `<div class="text-sm text-gray-500"><i class="far fa-calendar mr-2"></i>${galeri.created_at}</div>`;
        
        content.innerHTML = html;
        modal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }
    
    function closeGaleriModal() {
        const modal = document.getElementById('galeriModal');
        modal.classList.add('hidden');
        document.body.style.overflow = '';
    }
    
    // Close modal when clicking outside
    document.getElementById('galeriModal')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeGaleriModal();
        }
    });
    
    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeGaleriModal();
        }
    });
</script>
{% endif %}

<!-- Leadership Preview Section -->
<section class="py-16 bg-gradient-to-br from-green-900 to-green-800">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Kepemimpinan HMI</h2>
            <div class="w-24 h-1 bg-green-400 mx-auto mb-8"></div>
            <p class="max-w-3xl mx-auto text-green-200 text-lg">Kenali para pemimpin {{ website_settings.site_name|default:'HMI' }} yang berdedikasi untuk kemajuan organisasi</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for leader in leadership %}
            <div class="bg-green-800 rounded-lg shadow-md p-4 text-center border border-green-700" >
                {% if leader.avatar %}
                <img src="{{ leader.avatar.url }}" alt="{{ leader.name }}" class="w-16 h-16 rounded-full object-cover mx-auto mb-3">
                {% else %}
                <div class="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center text-white text-lg font-bold mx-auto mb-3">
                    {{ leader.initial }}
            </div>
                {% endif %}
                <h3 class="text-lg md:text-xl font-bold text-white mb-2">{{ leader.position|truncatechars:20 }}</h3>
                <p class="text-green-200 mb-3 text-base">{{ leader.name|truncatechars:15 }}</p>
                {% if leader.description %}
                <p class="text-sm text-green-300">{{ leader.description|truncatechars:40 }}</p>
                {% endif %}
            </div>
            {% empty %}
            <div class="col-span-full text-center text-green-200">
                <p>Belum ada data kepemimpinan yang tersedia.</p>
            </div>
            {% endfor %}
            </div>
        
        <div class="text-center mt-10">
            <a href="{% url 'public:about' %}" class="inline-flex items-center text-green-400 hover:text-green-300 font-medium text-base">
                Lihat Struktur Lengkap
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </a>
        </div>
    </div>
</section>

<!-- Testimonials Section - Minimalis -->
{% if testimonials %}
<section class="py-8 md:py-10 bg-gradient-to-br from-green-800 to-green-900 text-white">
    <div class="container mx-auto px-4">
        <div class="text-center mb-6">
            <h2 class="text-xl md:text-2xl font-bold mb-2">Testimoni Alumni</h2>
            <div class="w-12 h-0.5 bg-green-400 mx-auto mb-3"></div>
            <p class="text-sm text-green-200">Pengalaman alumni {{ website_settings.site_name|default:'HMI' }}</p>
        </div>
        
        <!-- Testimonials Slider - Compact -->
        <div class="testimonials-slider-container relative overflow-hidden">
            <div class="testimonials-slider flex transition-transform duration-1000 ease-in-out" id="testimonialsSlider" style="transform: translateX(0px);">
                {% for testimonial in testimonials %}
                <div class="testimonials-slide flex-shrink-0 w-full sm:w-80 px-3 md:px-4">
                    <button onclick="openTestimonialModal({{ forloop.counter0 }})" class="w-full text-left">
                        <div class="bg-green-700/50 backdrop-blur-sm rounded-lg p-4 md:p-5 border border-green-600/30 hover:bg-green-700/70 transition-all duration-300 cursor-pointer mx-auto max-w-sm">
                            <div class="flex items-center mb-3">
                                {% if testimonial.avatar %}
                                <img src="{{ testimonial.avatar.url }}" alt="{{ testimonial.name }}" class="w-10 h-10 md:w-12 md:h-12 rounded-full object-cover border border-green-500 flex-shrink-0">
                                {% else %}
                                <div class="w-10 h-10 md:w-12 md:h-12 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm md:text-base border border-green-500 flex-shrink-0">
                                    {{ testimonial.initial }}
                                </div>
                                {% endif %}
                                <div class="ml-3 flex-1 min-w-0">
                                    <h4 class="font-bold text-white text-sm md:text-base truncate">{{ testimonial.name }}</h4>
                                    <p class="text-xs md:text-sm text-green-200 truncate">{{ testimonial.position }}</p>
                                </div>
                            </div>
                            <div class="flex text-green-400 mb-2">
                                {% for i in "12345" %}
                                    {% if forloop.counter <= testimonial.rating %}
                                <i class="fas fa-star text-xs md:text-sm"></i>
                                    {% else %}
                                <i class="far fa-star text-xs md:text-sm"></i>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <p class="text-gray-100 text-xs md:text-sm leading-relaxed line-clamp-3">"{{ testimonial.testimonial|truncatechars:100 }}"</p>
                            <p class="text-green-400 text-xs md:text-sm mt-2">Baca selengkapnya →</p>
                        </div>
                    </button>
                </div>
                {% endfor %}
                
                <!-- Duplicate slides for infinite loop -->
                {% for testimonial in testimonials %}
                <div class="testimonials-slide flex-shrink-0 w-full sm:w-80 px-3 md:px-4">
                    <button onclick="openTestimonialModal({{ forloop.counter0 }})" class="w-full text-left">
                        <div class="bg-green-700/50 backdrop-blur-sm rounded-lg p-4 md:p-5 border border-green-600/30 hover:bg-green-700/70 transition-all duration-300 cursor-pointer mx-auto max-w-sm">
                            <div class="flex items-center mb-3">
                                {% if testimonial.avatar %}
                                <img src="{{ testimonial.avatar.url }}" alt="{{ testimonial.name }}" class="w-10 h-10 md:w-12 md:h-12 rounded-full object-cover border border-green-500 flex-shrink-0">
                                {% else %}
                                <div class="w-10 h-10 md:w-12 md:h-12 bg-green-600 rounded-full flex items-center justify-center text-white font-bold text-sm md:text-base border border-green-500 flex-shrink-0">
                                    {{ testimonial.initial }}
                                </div>
                                {% endif %}
                                <div class="ml-3 flex-1 min-w-0">
                                    <h4 class="font-bold text-white text-sm md:text-base truncate">{{ testimonial.name }}</h4>
                                    <p class="text-xs md:text-sm text-green-200 truncate">{{ testimonial.position }}</p>
                                </div>
                            </div>
                            <div class="flex text-green-400 mb-2">
                                {% for i in "12345" %}
                                    {% if forloop.counter <= testimonial.rating %}
                                <i class="fas fa-star text-xs md:text-sm"></i>
                                    {% else %}
                                <i class="far fa-star text-xs md:text-sm"></i>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            <p class="text-gray-100 text-xs md:text-sm leading-relaxed line-clamp-3">"{{ testimonial.testimonial|truncatechars:100 }}"</p>
                            <p class="text-green-400 text-xs md:text-sm mt-2">Baca selengkapnya →</p>
                        </div>
                    </button>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- Testimonial Detail Modal -->
<div id="testimonialModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="sticky top-0 bg-white border-b border-gray-200 p-4 flex justify-between items-center">
            <h3 class="text-xl font-bold text-gray-800">Detail Testimoni</h3>
            <button onclick="closeTestimonialModal()" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div class="p-6" id="testimonialModalContent">
            <!-- Content will be loaded dynamically -->
        </div>
    </div>
</div>

<!-- CTA Section -->
<section class="py-16 bg-gradient-to-br from-green-600 to-green-700 text-white">
    <div class="container mx-auto px-4">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Bergabung dengan HMI</h2>
            <div class="w-24 h-1 bg-green-400 mx-auto mb-8"></div>
            <p class="max-w-3xl mx-auto text-green-200 text-lg">Jadilah bagian dari organisasi mahasiswa Islam terbesar di Indonesia dan kembangkan potensi dirimu bersama kami.</p>
        </div>
        
        <div class="flex flex-col md:flex-row items-center justify-center gap-4">
            <div>
                <a href="{% url 'anggota:register' %}" class="bg-white text-green-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold text-base shadow-lg">
                    <i class="fas fa-user-plus mr-2"></i>Daftar Sekarang
                </a>
            </div>
            <div>
                <a href="{% url 'public:about' %}" class="bg-green-600 hover:bg-green-800 text-white px-6 py-3 rounded-lg font-bold text-base shadow-lg border-2 border-green-500">
                    <i class="fas fa-info-circle mr-2"></i>Pelajari Lebih Lanjut
                </a>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/index.js' %}"></script>
<script>
        const heroImagesData = [
            {% for hero_image in hero_images %}
            {
                title: '{{ hero_image.overlay_text|escapejs|default:"" }}',
                description: '{{ hero_image.description|escapejs|default:"" }}',
                color: '{{ hero_image.overlay_color|default:"#ffffff" }}'
            }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ];
    
    const testimonialsData = [
        {% for testimonial in testimonials %}
        {
            name: '{{ testimonial.name|escapejs }}',
            position: '{{ testimonial.position|escapejs }}',
            company: '{{ testimonial.company|escapejs|default:"" }}',
            graduation_year: '{{ testimonial.graduation_year|default:"" }}',
            rating: {{ testimonial.rating|default:5 }},
            testimonial: '{{ testimonial.testimonial|escapejs }}',
            avatar: '{% if testimonial.avatar %}{{ testimonial.avatar.url }}{% endif %}',
            initial: '{{ testimonial.initial|default:"" }}'
        }{% if not forloop.last %},{% endif %}
        {% endfor %}
    ];
    
    initIndexPage({
        heroImagesData: heroImagesData,
        testimonialsData: testimonialsData,
        homeUrl: '{% url "public:home" %}',
        siteName: '{{ website_settings.site_name|default:"HMI" }}'
    });
</script>
{% endblock %}