@extends('layouts.main')

@section('title', 'Our Products - UFG')

@push('styles')
<style>
    /* Products Page Specific Styles */
    .products-hero {
        background: linear-gradient(135deg, rgba(3, 139, 185, 0.05) 0%, rgba(255, 255, 255, 1) 50%, rgba(17, 107, 181, 0.05) 100%);
    }

    /* Text Size Classes */
    .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }
    .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
    
    @media (min-width: 768px) {
        .md\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    }

    /* Product Filter Styles */
    .filter-section {
        background: #ffffff;
        border-radius: 1rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.5s ease;
    }

    .filter-section.hidden {
        opacity: 0;
        transform: scale(0.95);
        max-height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    .category-filter.active, .standards-filter.active, .application-filter.active {
        background-color: #038BB9 !important;
        color: white !important;
    }

    .category-filter, .standards-filter, .application-filter {
        transition: all 0.3s ease;
    }

    .category-filter:hover, .standards-filter:hover, .application-filter:hover {
        background-color: #038BB9 !important;
        color: white !important;
    }

    .category-filter.active, .standards-filter.active, .application-filter.active {
        background-color: #038BB9 !important;
        color: white !important;
    }

    /* Product Card Styles */
    .product-card {
        background: #ffffff;
        border-radius: 0.75rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 0, 0, 0.05);
        overflow: hidden;
        cursor: pointer;
    }

    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: rgba(3, 139, 185, 0.3);
    }

    .product-card.hidden {
        display: none !important;
    }

    .product-card img {
        transition: transform 0.3s ease;
    }

    .product-card:hover img {
        transform: scale(1.05);
    }

    /* Progress Indicator */
    .progress-active {
        background-color: #038BB9 !important;
        color: #038BB9 !important;
    }

    /* Missing Tailwind Classes */
    .bg-aufg-primary { background-color: #038BB9 !important; }
    .bg-aufg-primary-dark { background-color: #1169B5 !important; }
    .bg-aufg-primary-darker { background-color: #0C4F7C !important; }
    .bg-aufg-primary\/5 { background-color: rgba(3, 139, 185, 0.05) !important; }
    .bg-aufg-primary-dark\/5 { background-color: rgba(17, 107, 181, 0.05) !important; }
    .text-aufg-primary { color: #038BB9 !important; }
    .text-aufg-primary-dark { color: #1169B5 !important; }
    .text-aufg-primary-darker { color: #0C4F7C !important; }
    .text-aufg-text-primary { color: #112a3b !important; }
    .text-aufg-text-secondary { color: #7A7A7A !important; }
    .text-aufg-text-darker { color: #54595F !important; }
    .bg-aufg-bg-light { background-color: #F8F9FA !important; }
    .bg-aufg-gradient { background: linear-gradient(135deg, #038BB9 0%, #1169B5 100%) !important; }
    .font-poppins { font-family: 'Poppins', sans-serif !important; }
    .font-bold { font-weight: 700 !important; }
    .font-semibold { font-weight: 600 !important; }
    .font-medium { font-weight: 500 !important; }
    
    /* Layout Classes */
    .pt-\[140px\] { padding-top: 140px !important; }
    .pb-12 { padding-bottom: 3rem !important; }
    .py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
    .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    .p-4 { padding: 1rem !important; }
    .p-6 { padding: 1.5rem !important; }
    .mb-3 { margin-bottom: 0.75rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .mb-6 { margin-bottom: 1.5rem !important; }
    .mb-8 { margin-bottom: 2rem !important; }
    .mb-12 { margin-bottom: 3rem !important; }
    .mt-4 { margin-top: 1rem !important; }
    .max-w-7xl { max-width: 80rem !important; }
    .max-w-2xl { max-width: 42rem !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .text-center { text-align: center !important; }
    .bg-white { background-color: white !important; }
    .bg-gray-100 { background-color: #f3f4f6 !important; }
    .bg-gray-700 { background-color: #374151 !important; }
    .text-gray-400 { color: #9ca3af !important; }
    .text-gray-700 { color: #374151 !important; }
    .bg-blue-100 { background-color: #dbeafe !important; }
    .text-blue-800 { color: #1e40af !important; }
    .border-gray-100 { border-color: #f3f4f6 !important; }
    .rounded-xl { border-radius: 0.75rem !important; }
    .rounded-lg { border-radius: 0.5rem !important; }
    .rounded-full { border-radius: 9999px !important; }
    .rounded-2xl { border-radius: 1rem !important; }
    .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; }
    .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
    .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
    .border { border-width: 1px !important; }
    .grid { display: grid !important; }
    .flex { display: flex !important; }
    .flex-col { flex-direction: column !important; }
    .flex-wrap { flex-wrap: wrap !important; }
    .items-center { align-items: center !important; }
    .justify-center { justify-content: center !important; }
    .justify-between { justify-content: space-between !important; }
    .space-x-2 > * + * { margin-left: 0.5rem !important; }
    .space-x-3 > * + * { margin-left: 0.75rem !important; }
    .gap-3 { gap: 0.75rem !important; }
    .gap-6 { gap: 1.5rem !important; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .w-8 { width: 2rem !important; }
    .h-8 { width: 2rem !important; }
    .w-5 { width: 1.25rem !important; }
    .h-5 { height: 1.25rem !important; }
    .w-4 { width: 1rem !important; }
    .h-4 { height: 1rem !important; }
    .w-2 { width: 0.5rem !important; }
    .h-2 { height: 0.5rem !important; }
    .h-0\.5 { height: 0.125rem !important; }
    .w-full { width: 100% !important; }
    .h-48 { height: 12rem !important; }
    .object-cover { object-fit: cover !important; }
    .overflow-hidden { overflow: hidden !important; }
    .relative { position: relative !important; }
    .absolute { position: absolute !important; }
    .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
    .cursor-pointer { cursor: pointer !important; }
    .transition-all { transition-property: all !important; }
    .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important; }
    .transition-transform { transition-property: transform !important; }
    .transition-opacity { transition-property: opacity !important; }
    .duration-200 { transition-duration: 200ms !important; }
    .duration-300 { transition-duration: 300ms !important; }
    .duration-500 { transition-duration: 500ms !important; }
    .transform { transform: var(--tw-transform) !important; }
    .hover\:-translate-y-2:hover { transform: translateY(-0.5rem) !important; }
    .opacity-0 { opacity: 0 !important; }
    .hover\:opacity-100:hover { opacity: 1 !important; }
    .scale-95 { transform: scale(0.95) !important; }
    .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
    .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }
    .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important; }
    .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important; }
    .from-black\/20 { --tw-gradient-from: rgba(0, 0, 0, 0.2); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)) !important; }
    .via-transparent { --tw-gradient-to: transparent; --tw-gradient-via: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to, transparent) !important; }
    .to-transparent { --tw-gradient-to: transparent !important; }

    /* Responsive Classes */
    @media (min-width: 640px) {
        .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    }

    @media (min-width: 768px) {
        .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    }

    @media (min-width: 1024px) {
        .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    }
</style>
@endpush

@section('content')
<!-- Compact Page Header -->
<section class="products-hero pt-[140px] pb-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-3xl md:text-4xl font-bold text-aufg-primary-darker font-poppins mb-3">
                Our Products
            </h1>
            <p class="text-aufg-text-secondary text-lg max-w-2xl mx-auto">
                Explore our comprehensive range of high-quality glass products designed for various applications
            </p>
        </div>
    </div>
</section>

<!-- Modern Products Section -->
<section id="products" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Product Filters Section -->
        <div class="mb-12">
            <p class="text-center text-aufg-text-secondary mb-8" style="font-size: 18px;">
                Explore our products verified by <strong class="text-aufg-primary">ARALUX®</strong>
            </p>
            
            <!-- Progressive Filter System -->
            <div class="flex flex-col items-center gap-6 mb-8">
                <!-- Step 1: Category Filters (Always Visible) -->
                <div id="category-filter-section" class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 transition-all duration-500">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-8 h-8 bg-aufg-gradient rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
                        <h4 class="font-semibold text-aufg-primary-darker">Categories</h4>
                    </div>
                    <div class="flex flex-wrap gap-3 justify-center">
                        @foreach($categories as $category)
                        <button class="category-filter px-6 py-3 bg-gray-100 text-aufg-text-darker rounded-lg font-medium transition-all duration-300 hover:bg-aufg-primary hover:text-white" data-category="{{ $category->slug }}">
                            {{ $category->name }}
                        </button>
                        @endforeach
                    </div>
                </div>

                <!-- Step 2: Standards Filter (Hidden Initially) -->
                <div id="standards-filter-section" class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 transition-all duration-500" style="display: none;">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-8 h-8 bg-aufg-gradient rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
                        <h4 class="font-semibold text-aufg-primary-darker">Standards</h4>
                    </div>
                    <div class="flex flex-wrap gap-3 justify-center" id="standards-container">
                        <!-- Standards will be populated dynamically -->
                    </div>
                </div>

                <!-- Step 3: Applications Filter (Hidden Initially) -->
                <div id="applications-filter-section" class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100 transition-all duration-500" style="display: none;">
                    <div class="flex items-center gap-3 mb-4">
                        <div class="w-8 h-8 bg-aufg-gradient rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
                        <h4 class="font-semibold text-aufg-primary-darker">Applications</h4>
                    </div>
                    <div class="flex flex-wrap gap-3 justify-center" id="applications-container">
                        <!-- Applications will be populated dynamically -->
                    </div>
                </div>

                <!-- Filter Progress Indicator -->
                <div id="filter-progress" class="flex items-center gap-2 mt-4">
                    <div class="flex items-center text-sm text-aufg-text-secondary">
                        <span class="mr-2">Filter Progress:</span>
                        <div class="flex items-center gap-2">
                            <div class="w-2 h-2 bg-aufg-primary rounded-full"></div>
                            <span>Categories</span>
                            <div id="progress-arrow-1" class="w-4 h-0.5 bg-gray-300 mx-2 transition-colors duration-300"></div>
                            <div id="progress-dot-2" class="w-2 h-2 bg-gray-300 rounded-full transition-colors duration-300"></div>
                            <span class="text-gray-400" id="progress-text-2">Standards</span>
                            <div id="progress-arrow-2" class="w-4 h-0.5 bg-gray-300 mx-2 transition-colors duration-300"></div>
                            <div id="progress-dot-3" class="w-2 h-2 bg-gray-300 rounded-full transition-colors duration-300"></div>
                            <span class="text-gray-400" id="progress-text-3">Applications</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Products Grid -->
        <div id="products-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($products as $product)
                @php
                    $categorySlug = '';
                    $standardCode = '';
                    $applicationSlug = '';
                    
                    // Determine category slug - simplified logic without subcategories
                    if ($product->application && $product->application->standard && $product->application->standard->category) {
                        $categorySlug = $product->application->standard->category->slug;
                    } elseif ($product->standard && $product->standard->category) {
                        $categorySlug = $product->standard->category->slug;
                    }
                    
                    // Determine standard code
                    if ($product->application && $product->application->standard) {
                        $standardCode = strtolower(preg_replace('/[^a-z]/', '', strtolower($product->application->standard->code)));
                    } elseif ($product->standard) {
                        $standardCode = strtolower(preg_replace('/[^a-z]/', '', strtolower($product->standard->code)));
                    }
                    
                    // Determine application slug
                    if ($product->application) {
                        $applicationSlug = strtolower(str_replace(' ', '-', $product->application->name));
                    }
                @endphp
            <a href="{{ route('products.show', ['category' => $categorySlug ?: 'products', 'product' => $product->slug]) }}" class="product-card block bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:border-aufg-primary/30 cursor-pointer transform hover:-translate-y-2" 
                 data-category="{{ $categorySlug }}" 
                 data-standard="{{ $standardCode }}" 
                 data-application="{{ $applicationSlug }}">
                <div class="relative overflow-hidden">
                    @if($product->image)
                        <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105">
                    @else
                        <div class="w-full h-48 bg-gray-100 flex items-center justify-center">
                            <svg class="w-16 h-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                    @endif
                    <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
                </div>
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-aufg-text-primary mb-2">{{ $product->name }}</h3>
                    <p class="text-sm text-aufg-text-secondary mb-3">{{ Str::limit($product->description, 100) }}</p>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2">
                            @if($product->application && $product->application->subcategory)
                                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">{{ $product->application->subcategory->standard->code }}</span>
                                <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded-full text-xs font-medium">{{ $product->application->name }}</span>
                            @elseif($product->application && $product->application->standard)
                                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">{{ $product->application->standard->code }}</span>
                                <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded-full text-xs font-medium">{{ $product->application->name }}</span>
                            @elseif($product->standard)
                                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">{{ $product->standard->code }}</span>
                            @endif
                        </div>
                        <div class="text-aufg-primary hover:text-aufg-primary-dark transition-colors duration-200">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                    </div>
                </div>
            </a>
            @endforeach
        </div>

    </div>
</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('🔧 Products filtering JavaScript loaded');
    // Database data from Laravel
    const categoriesData = @json($categories);
    const standardsData = @json($standards);
    const applicationsData = @json($applications);
    console.log('📊 Data:', {categories: categoriesData.length, standards: standardsData.length, applications: applicationsData.length});
    console.log('📋 Categories:', categoriesData);
    console.log('📋 Standards:', standardsData);
    console.log('📋 Applications:', applicationsData);
    
    // Progressive Filter System
    let selectedCategory = '';
    let selectedStandard = '';
    let selectedApplication = '';

    // Get filter elements
    const categoryFilters = document.querySelectorAll('.category-filter');
    const standardsContainer = document.getElementById('standards-container');
    const applicationsContainer = document.getElementById('applications-container');
    const productsGrid = document.getElementById('products-grid');

    // Filter sections
    const standardsSection = document.getElementById('standards-filter-section');
    const applicationsSection = document.getElementById('applications-filter-section');
    
    console.log('🔧 DOM Elements found:', {
        categoryFilters: categoryFilters.length,
        standardsContainer: !!standardsContainer,
        applicationsContainer: !!applicationsContainer,
        productsGrid: !!productsGrid,
        standardsSection: !!standardsSection,
        applicationsSection: !!applicationsSection
    });

    // Progress indicators
    const progressArrow1 = document.getElementById('progress-arrow-1');
    const progressDot2 = document.getElementById('progress-dot-2');
    const progressText2 = document.getElementById('progress-text-2');
    const progressArrow2 = document.getElementById('progress-arrow-2');
    const progressDot3 = document.getElementById('progress-dot-3');
    const progressText3 = document.getElementById('progress-text-3');

    // Category filter handlers
    console.log('🎯 Setting up', categoryFilters.length, 'category filters');
    categoryFilters.forEach(filter => {
        filter.addEventListener('click', function() {
            console.log('🔍 Category clicked:', this.dataset.category);
            const categorySlug = this.dataset.category;
            const isAlreadyActive = this.classList.contains('active');
            
            if (isAlreadyActive) {
                // Deselect category
                this.classList.remove('active', 'bg-aufg-gradient', 'text-white');
                this.classList.add('bg-gray-100', 'text-aufg-text-darker');
                selectedCategory = '';
                hideSection(standardsSection, progressDot2, progressText2, progressArrow1);
                hideSection(applicationsSection, progressDot3, progressText3, progressArrow2);
                showInitialMessage();
                return;
            }
            
            // Update selected category
            selectedCategory = categorySlug;
            
            // Update active states
            categoryFilters.forEach(f => {
                f.classList.remove('active', 'bg-aufg-gradient', 'text-white');
                f.classList.add('bg-gray-100', 'text-aufg-text-darker');
            });
            this.classList.remove('bg-gray-100', 'text-aufg-text-darker');
            this.classList.add('active', 'bg-aufg-gradient', 'text-white');
            
            // Find standards for this category
            console.log('🔍 Looking for standards for category:', categorySlug);
            console.log('📋 Available standards:', standardsData);
            
            const categoryStandards = standardsData.filter(standard => {
                const hasCategory = standard.category && standard.category.slug === categorySlug;
                console.log('🎯 Standard check:', standard.code, 'category:', standard.category?.slug, 'matches:', hasCategory);
                return hasCategory;
            });
            
            console.log('✅ Found standards for category:', categoryStandards);
            
            if (categoryStandards.length > 0) {
                console.log('📂 Populating standards section...');
                populateStandards(categoryStandards);
                showSection(standardsSection, progressDot2, progressText2, progressArrow1);
            } else {
                console.log('❌ No standards found for category:', categorySlug);
                hideSection(standardsSection, progressDot2, progressText2, progressArrow1);
            }
            
            // Hide applications section
            hideSection(applicationsSection, progressDot3, progressText3, progressArrow2);
            
            // Reset selections
            selectedStandard = '';
            selectedApplication = '';
            
            // Filter products
            filterProducts();
        });
    });

    function populateStandards(standards) {
        standardsContainer.innerHTML = '';
        standards.forEach(standard => {
            const standardKey = standard.code.toLowerCase().replace(/[^a-z]/g, '');
            const button = document.createElement('button');
            button.className = 'standards-filter px-4 py-2 bg-gray-100 text-aufg-text-darker rounded-lg text-sm font-medium transition-all duration-300 hover:bg-aufg-primary hover:text-white';
            button.dataset.standard = standardKey;
            button.textContent = standard.code;
            
            button.addEventListener('click', function() {
                const isAlreadyActive = this.classList.contains('active');
                
                if (isAlreadyActive) {
                    // Deselect standard
                    this.classList.remove('active', 'bg-aufg-gradient', 'text-white');
                    this.classList.add('bg-gray-100', 'text-aufg-text-darker');
                    selectedStandard = '';
                    hideSection(applicationsSection, progressDot3, progressText3, progressArrow2);
                    selectedApplication = '';
                    filterProducts();
                    return;
                }
                
                // Update selected standard
                selectedStandard = standardKey;
                
                // Update active states
                document.querySelectorAll('.standards-filter').forEach(f => {
                    f.classList.remove('active', 'bg-aufg-gradient', 'text-white');
                    f.classList.add('bg-gray-100', 'text-aufg-text-darker');
                });
                this.classList.remove('bg-gray-100', 'text-aufg-text-darker');
                this.classList.add('active', 'bg-aufg-gradient', 'text-white');
                
                // Find applications for this standard
                console.log('🔍 Looking for applications for standard:', standardKey);
                console.log('📋 Available applications:', applicationsData);
                
                const standardApplications = applicationsData.filter(application => {
                    if (application.standard && application.standard.code) {
                        const appStandardKey = application.standard.code.toLowerCase().replace(/[^a-z]/g, '');
                        const matches = appStandardKey === standardKey;
                        console.log('🎯 Application check:', application.name, 'standard:', appStandardKey, 'matches:', matches);
                        return matches;
                    }
                    console.log('❌ Application has no standard:', application.name);
                    return false;
                });
                
                console.log('✅ Found applications for standard:', standardApplications);
                
                if (standardApplications.length > 0) {
                    console.log('📂 Populating applications section...');
                    populateApplications(standardApplications);
                    showSection(applicationsSection, progressDot3, progressText3, progressArrow2);
                } else {
                    console.log('❌ No applications found for standard:', standardKey);
                    hideSection(applicationsSection, progressDot3, progressText3, progressArrow2);
                }
                
                // Reset application selection
                selectedApplication = '';
                
                // Filter products
                filterProducts();
            });
            
            standardsContainer.appendChild(button);
        });
    }


    function populateApplications(applications) {
        applicationsContainer.innerHTML = '';
        applications.forEach(application => {
            const appKey = application.name.toLowerCase().replace(/ /g, '-');
            const button = document.createElement('button');
            button.className = 'application-filter px-4 py-2 bg-gray-100 text-aufg-text-darker rounded-lg text-sm font-medium transition-all duration-300 hover:bg-aufg-primary hover:text-white';
            button.dataset.application = appKey;
            button.textContent = application.name;
            
            button.addEventListener('click', function() {
                const isAlreadyActive = this.classList.contains('active');
                
                if (isAlreadyActive) {
                    // Deselect application
                    this.classList.remove('active', 'bg-aufg-gradient', 'text-white');
                    this.classList.add('bg-gray-100', 'text-aufg-text-darker');
                    selectedApplication = '';
                    filterProducts();
                    return;
                }
                
                // Update selected application
                selectedApplication = appKey;
                
                // Update active states
                document.querySelectorAll('.application-filter').forEach(f => {
                    f.classList.remove('active', 'bg-aufg-gradient', 'text-white');
                    f.classList.add('bg-gray-100', 'text-aufg-text-darker');
                });
                this.classList.remove('bg-gray-100', 'text-aufg-text-darker');
                this.classList.add('active', 'bg-aufg-gradient', 'text-white');
                
                // Filter products
                filterProducts();
            });
            
            applicationsContainer.appendChild(button);
        });
    }

    function showSection(section, dot, text, arrow) {
        console.log('🎬 Showing section:', section.id);
        
        // Remove any existing inline styles that might interfere
        section.style.display = 'block';
        section.style.opacity = '1';
        section.style.transform = 'scale(1)';
        section.style.maxHeight = 'none';
        section.style.overflow = 'visible';
        
        // Remove any hidden classes
        section.classList.remove('hidden', 'opacity-0', 'scale-95');
        
        console.log('✅ Section shown:', section.id, 'Display:', section.style.display, 'Opacity:', section.style.opacity);
        
        // Update progress indicators
        if (arrow) {
            arrow.classList.remove('bg-gray-300');
            arrow.classList.add('bg-aufg-primary');
        }
        if (dot) {
            dot.classList.remove('bg-gray-300');
            dot.classList.add('bg-aufg-primary');
        }
        if (text) {
            text.classList.remove('text-gray-400');
            text.classList.add('text-aufg-primary');
        }
    }

    function hideSection(section, dot, text, arrow) {
        console.log('🙈 Hiding section:', section.id);
        
        section.style.display = 'none';
        section.style.opacity = '0';
        section.style.transform = 'scale(0.95)';
        section.style.maxHeight = '0';
        section.style.overflow = 'hidden';
        
        // Add hidden classes
        section.classList.add('opacity-0', 'scale-95');
        
        // Reset progress indicators
        if (arrow) {
            arrow.classList.remove('bg-aufg-primary');
            arrow.classList.add('bg-gray-300');
        }
        if (dot) {
            dot.classList.remove('bg-aufg-primary');
            dot.classList.add('bg-gray-300');
        }
        if (text) {
            text.classList.add('text-gray-400');
            text.classList.remove('text-aufg-primary');
        }
        
        console.log('✅ Section hidden:', section.id);
    }

    function filterProducts() {
        console.log('🔍 Filtering products with:', {
            selectedCategory,
            selectedStandard,
            selectedApplication
        });
        
        // Remove any existing messages
        const existingMessages = document.querySelectorAll('#initial-message, #no-products-message, #standards-message, #applications-message, #selection-required-message');
        existingMessages.forEach(msg => msg.remove());
        
        const productCards = document.querySelectorAll('.product-card');
        let visibleCount = 0;
        
        // Check if no category selected
        if (!selectedCategory) {
            // Hide all products if no category selected
            productCards.forEach(card => card.classList.add('hidden'));
            showInitialMessage();
            return;
        }
        
        // RESTRICTIVE LOGIC: Don't show products unless full path is selected
        if (!selectedApplication) {
            // Hide all products and show message to complete selection
            productCards.forEach(card => card.classList.add('hidden'));
            showSelectionRequiredMessage();
            return;
        }
        
        productCards.forEach(card => {
            const cardCategory = card.dataset.category;
            const cardStandard = card.dataset.standard;
            const cardApplication = card.dataset.application;

            console.log('🎯 Checking card:', {
                cardCategory,
                cardStandard,
                cardApplication,
                selectedCategory,
                selectedStandard,
                selectedApplication
            });

            let showCard = true;

            // All filters must match for restrictive filtering
            if (selectedCategory && cardCategory !== selectedCategory) {
                console.log('❌ Category mismatch:', cardCategory, '!==', selectedCategory);
                showCard = false;
            }

            if (selectedStandard && cardStandard !== selectedStandard) {
                console.log('❌ Standard mismatch:', cardStandard, '!==', selectedStandard);
                showCard = false;
            }

            if (selectedApplication && cardApplication !== selectedApplication) {
                console.log('❌ Application mismatch:', cardApplication, '!==', selectedApplication);
                showCard = false;
            }

            // Show/hide card
            if (showCard) {
                console.log('✅ Showing card');
                card.classList.remove('hidden');
                visibleCount++;
            } else {
                console.log('🚫 Hiding card');
                card.classList.add('hidden');
            }
        });
        
        console.log('📊 Filter results:', { visibleCount, totalCards: productCards.length });
        
        // Show no products message if needed
        if (visibleCount === 0 && selectedApplication) {
            showNoProductsMessage();
        }
    }

    function showInitialMessage() {
        const message = document.createElement('div');
        message.id = 'initial-message';
        message.className = 'col-span-full text-center py-16';
        message.innerHTML = `
            <div class="text-aufg-text-secondary">
                <svg class="w-20 h-20 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                </svg>
                <h3 class="text-2xl font-medium mb-2 text-aufg-primary-darker">Select a Product Category</h3>
                <p class="text-base text-aufg-text-secondary mb-4">Please choose a category above to view our products</p>
                <div class="flex justify-center gap-3 mt-6">
                    ${categoriesData.map(cat => `<span class="px-4 py-2 bg-gray-50 rounded-lg text-sm">${cat.name}</span>`).join('')}
                </div>
            </div>
        `;
        productsGrid.appendChild(message);
    }

    function showNoProductsMessage() {
        const message = document.createElement('div');
        message.id = 'no-products-message';
        message.className = 'col-span-full text-center py-12';
        message.innerHTML = `
            <div class="text-aufg-text-secondary">
                <svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                <h3 class="text-xl font-medium mb-2">No products found</h3>
                <p class="text-sm">Try adjusting your filter criteria to see more products.</p>
            </div>
        `;
        productsGrid.appendChild(message);
    }

    function showSelectionRequiredMessage() {
        const message = document.createElement('div');
        message.id = 'selection-required-message';
        message.className = 'col-span-full text-center py-16';
        message.innerHTML = `
            <div class="text-aufg-text-secondary">
                <svg class="w-20 h-20 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <h3 class="text-2xl font-medium mb-2 text-aufg-primary-darker">Complete Your Selection</h3>
                <p class="text-base text-aufg-text-secondary mb-4">Please follow the progressive filtering steps to view products</p>
                <div class="flex justify-center items-center gap-4 mt-6 text-sm">
                    <span class="px-3 py-1 ${selectedCategory ? 'bg-aufg-primary text-white' : 'bg-gray-100 text-gray-500'} rounded-lg">
                        ${selectedCategory ? '✓' : '1.'} Category
                    </span>
                    <span class="text-gray-400">→</span>
                    <span class="px-3 py-1 ${selectedStandard ? 'bg-aufg-primary text-white' : 'bg-gray-100 text-gray-500'} rounded-lg">
                        ${selectedStandard ? '✓' : '2.'} Standard
                    </span>
                    <span class="text-gray-400">→</span>
                    <span class="px-3 py-1 ${selectedApplication ? 'bg-aufg-primary text-white' : 'bg-gray-100 text-gray-500'} rounded-lg">
                        ${selectedApplication ? '✓' : '3.'} Application
                    </span>
                </div>
            </div>
        `;
        productsGrid.appendChild(message);
    }
    
    // Initialize - ensure standards and applications sections are hidden
    hideSection(standardsSection, progressDot2, progressText2, progressArrow1);
    hideSection(applicationsSection, progressDot3, progressText3, progressArrow2);
    
    // Initialize with initial message
    filterProducts();
});
</script>
@endpush