<!-- HERO SECTION -->
<section class="bg-gradient-to-br from-[#E2FFF6] via-base-100 to-[#fff5e66e] min-h-screen flex items-center justify-center pt-28 pb-20 px-6 overflow-hidden">
    <div class="container mx-auto max-w-8xl">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <!-- Left Content -->
            <div class="space-y-4 text-center lg:text-left left-content">
                <h1 class="text-4xl md:text-5xl lg:text-6xl leading-normal md:leading-snug lg:leading-[80px] font-semibold text-base-300">
                    {!! nl2br(e($title ?? __('Connecting Ideas with the Right Talent'))) !!}
                </h1>

                <p class="text-lg text-base-300 max-w-lg lg:max-w-none mx-auto lg:mx-0">
                    {!! nl2br(e($subtitle ?? __('We make it\'s easier for talents and businesses to connect and we make it absolutely less charges. Hire Talents or Get Hired from our platform and work independently'))) !!}
                </p>

                <!-- Buttons -->
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start pb-4">
                    <a href="{{ $find_work_button_link ?? '#' }}"
                       class="px-8 py-4 bg-primary font-medium text-base-100 rounded-xl shadow-lg hover:bg-primary/90 transition-colors duration-300">
                        {{ $find_work_button_text ?? __('Find work') }}
                    </a>
                    <a href="{{ $find_project_button_link ?? '#' }}"
                       class="px-8 py-4 font-medium border-primary border text-primary rounded-xl shadow-lg hover:bg-primary hover:text-base-100 transition-all duration-300">
                        {{ $find_project_button_text ?? __('Find talent') }}
                    </a>
                </div>

                <!-- Search Input with Results Container -->
                <div class="relative max-w-lg mx-auto lg:mx-0 mt-4">
                    <div class="relative">
                        <input type="text"
                               id="tag-search-input"
                               placeholder="{{ $search_placeholder ?? __('Search by role, service, skill or keywords') }}"
                               class="w-full px-6 py-4 pr-40 text-lg rounded-xl border-gray-300 border border-base-300 focus:border-primary transition-all duration-300 shadow-md outline-none bg-transparent">
                        <button title="search"
                                id="tag-search-btn"
                                class="absolute right-2 top-1/2 -translate-y-1/2 w-12 h-12 bg-secondary text-primary-foreground rounded-xl hover:bg-primary/90 transition-colors duration-300">
                            <i class="fas fa-search text-base"></i>
                        </button>

                        {{-- Search Results Dropdown --}}
                        <div id="tag-search-results"
                             class="hidden absolute left-0 right-0 mt-2 bg-white rounded-xl shadow-lg max-h-96 overflow-y-auto z-[100] border border-gray-200">
                            <!-- Filter buttons will be added here by JavaScript -->
                        </div>
                    </div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const searchInput = document.getElementById('tag-search-input');
                        const searchBtn = document.getElementById('tag-search-btn');
                        const resultsDiv = document.getElementById('tag-search-results');
                        const searchContainer = searchInput.parentElement;

                        let activeFilter = 'project'; // Default to 'project' instead of 'all'
                        let lastSearchResults = []; // Store all results for filtering
                        let currentFilteredResults = []; // Store currently filtered results for Enter key

                        function updateCurrentFilteredResults(data) {
                            // Apply filter if not 'all'
                            let filteredData = data;
                            if (activeFilter !== 'all') {
                                filteredData = data.filter(item => item.type === activeFilter);
                            }

                            // Store filtered results for Enter key navigation
                            currentFilteredResults = filteredData;
                            return filteredData;
                        }

                        function searchTags() {
                            const query = searchInput.value.trim();

                            if (query.length < 2) {
                                resultsDiv.classList.add('hidden');
                                currentFilteredResults = [];
                                return;
                            }

                            // Ensure results dropdown is positioned correctly
                            const inputRect = searchInput.getBoundingClientRect();
                            const containerRect = searchContainer.getBoundingClientRect();

                            // Calculate available space below input
                            const spaceBelow = window.innerHeight - inputRect.bottom - 20;

                            if (spaceBelow < 200) { // If not enough space below, show above
                                resultsDiv.style.top = 'auto';
                                resultsDiv.style.bottom = '100%';
                                resultsDiv.style.marginTop = '0';
                                resultsDiv.style.marginBottom = '8px';
                            } else {
                                resultsDiv.style.top = '100%';
                                resultsDiv.style.bottom = 'auto';
                                resultsDiv.style.marginTop = '8px';
                                resultsDiv.style.marginBottom = '0';
                            }

                            // Fetch from the new route
                            fetch(`/header-search?q=${encodeURIComponent(query)}`)
                                .then(response => response.json())
                                .then(data => {
                                    // Store all results
                                    lastSearchResults = data;

                                    if (data.length === 0) {
                                        resultsDiv.innerHTML = '<div class="p-4 text-center text-gray-500">No results found</div>';
                                        resultsDiv.classList.remove('hidden');
                                        currentFilteredResults = [];
                                        return;
                                    }

                                    // Apply filter and update current results
                                    let filteredData = updateCurrentFilteredResults(data);

                                    if (filteredData.length === 0) {
                                        // Keep filter buttons even when no results
                                        let html = `
    <div class="sticky top-0 bg-white border-b border-gray-100 p-3 z-10">
        <div class="flex items-center justify-between mb-2">
            <span class="text-sm font-medium text-gray-700">Filter by:</span>
            ${activeFilter !== 'project' ? '<button onclick="clearFilter()" class="text-xs text-primary hover:underline">Clear</button>' : ''}
        </div>
        <div class="flex gap-2">
            <button onclick="setFilter('project')" class="filter-btn ${activeFilter === 'project' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700'} px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1">
                <i class="fas fa-project-diagram text-xs"></i>
                Projects
            </button>
            <button onclick="setFilter('job')" class="filter-btn ${activeFilter === 'job' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700'} px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1">
                <i class="fas fa-briefcase text-xs"></i>
                Jobs
            </button>
            <button onclick="setFilter('talent')" class="filter-btn ${activeFilter === 'talent' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700'} px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1">
                <i class="fas fa-user text-xs"></i>
                Talents
            </button>
        </div>
    </div>
    <div class="p-6 text-center">
        <div class="text-gray-500 mb-4">No ${activeFilter} results found for "${query}"</div>
        <div class="text-sm text-gray-600 mb-4">Try a different filter or search term</div>
        <button onclick="clearFilter()" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
            Clear filter
        </button>
    </div>`;

                                        resultsDiv.innerHTML = html;
                                        resultsDiv.classList.remove('hidden');
                                        return;
                                    }

                                    // Build filter buttons
                                    let html = `
            <div class="sticky top-0 bg-white border-b border-gray-100 p-3 z-10">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-700">Filter by:</span>
                                    ${activeFilter !== 'project' ? '<button onclick="clearFilter()" class="text-xs text-primary hover:underline">Clear</button>' : ''}
                </div>
                <div class="flex gap-2">
                    <button onclick="setFilter('project')" class="filter-btn ${activeFilter === 'project' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700'} px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1">
                        <i class="fas fa-project-diagram text-xs"></i>
                        Projects
                    </button>
                    <button onclick="setFilter('job')" class="filter-btn ${activeFilter === 'job' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700'} px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1">
                        <i class="fas fa-briefcase text-xs"></i>
                        Jobs
                    </button>
                    <button onclick="setFilter('talent')" class="filter-btn ${activeFilter === 'talent' ? 'bg-primary text-white' : 'bg-gray-100 text-gray-700'} px-3 py-1.5 rounded-lg text-xs font-medium transition-colors flex items-center gap-1">
                        <i class="fas fa-user text-xs"></i>
                        Talents
                    </button>
                </div>
            </div>
            <div class="p-2 max-h-72 overflow-y-auto">`;

                                    filteredData.forEach(item => {
                                        html += `<a href="${item.url}" class="flex items-center gap-3 px-4 py-3 hover:bg-gray-100 rounded-lg mb-1 transition-colors search-result-link">`;
                                        html += `<i class="${item.icon} text-primary"></i>`;
                                        html += `<div class="flex-1">`;
                                        html += `<span class="font-medium text-gray-800">${item.title}</span>`;
                                        html += `<p class="text-xs text-gray-500 capitalize">${item.type}</p>`;
                                        html += `</div>`;
                                        html += `<i class="fas fa-arrow-right text-gray-400"></i>`;
                                        html += `</a>`;
                                    });

                                    html += '</div>';
                                    resultsDiv.innerHTML = html;
                                    resultsDiv.classList.remove('hidden');

                                    // Close dropdown when clicking a result
                                    const links = resultsDiv.querySelectorAll('.search-result-link');
                                    links.forEach(link => {
                                        link.addEventListener('click', () => {
                                            resultsDiv.classList.add('hidden');
                                        });
                                    });
                                })
                                .catch(error => {
                                    console.error('Search error:', error);
                                    resultsDiv.innerHTML = '<div class="p-4 text-center text-gray-500">Search failed</div>';
                                    resultsDiv.classList.remove('hidden');
                                    currentFilteredResults = [];
                                });
                        }

                        // Function to navigate to first result
                        function navigateToFirstResult() {
                            if (currentFilteredResults.length > 0) {
                                // Get the first result URL
                                const firstResultUrl = currentFilteredResults[0].url;
                                // Navigate to the first result
                                window.location.href = firstResultUrl;
                            } else if (lastSearchResults.length > 0) {
                                // If filtered results are empty but there are overall results,
                                // navigate to the first result from all results
                                window.location.href = lastSearchResults[0].url;
                            } else {
                                // If no results at all, do nothing or show a message
                                console.log('No results to navigate to');
                            }
                        }

                        // Handle Enter key press
                        searchInput.addEventListener('keydown', function(e) {
                            if (e.key === 'Enter') {
                                e.preventDefault(); // Prevent form submission

                                // Hide dropdown first
                                resultsDiv.classList.add('hidden');

                                // Navigate to first result
                                navigateToFirstResult();
                            }
                        });

                        searchInput.addEventListener('input', searchTags);
                        searchBtn.addEventListener('click', function(e) {
                            e.preventDefault();

                            // If dropdown is visible, navigate to first result
                            if (!resultsDiv.classList.contains('hidden') && currentFilteredResults.length > 0) {
                                navigateToFirstResult();
                            } else {
                                // Otherwise, perform search
                                searchTags();
                            }
                        });

                        // Handle window resize to reposition dropdown
                        window.addEventListener('resize', () => {
                            if (!resultsDiv.classList.contains('hidden')) {
                                searchTags();
                            }
                        });

                        // Close dropdown when clicking outside
                        document.addEventListener('click', function(e) {
                            if (!searchContainer.contains(e.target)) {
                                resultsDiv.classList.add('hidden');
                            }
                        });

                        // Track if we should hide dropdown on scroll
                        let hideOnScroll = true;

                        // Don't hide dropdown when scrolling the results themselves
                        resultsDiv.addEventListener('wheel', function(e) {
                            hideOnScroll = false;
                            setTimeout(() => { hideOnScroll = true; }, 100);
                        });

                        // Only hide dropdown on body scroll, not when scrolling within results
                        window.addEventListener('scroll', function() {
                            if (window.innerWidth < 1024 && hideOnScroll) {
                                resultsDiv.classList.add('hidden');
                            }
                        });

                        // Also hide dropdown when touching/clicking outside
                        document.addEventListener('touchstart', function(e) {
                            if (!searchContainer.contains(e.target)) {
                                resultsDiv.classList.add('hidden');
                            }
                        });

                        // Filter functions
                        window.setFilter = function(type) {
                            activeFilter = type;
                            searchTags(); // Re-run search with filter

                            // After filtering, focus back on search input for Enter key
                            setTimeout(() => {
                                searchInput.focus();
                            }, 100);
                        };

                        window.clearFilter = function() {
                            activeFilter = 'project'; // Reset to 'project' instead of 'all'
                            searchTags(); // Re-run search with default filter
                            searchInput.focus();
                        };
                    });
                </script>

                <style>
                    @media (max-width: 768px) {
                        #tag-search-results {
                            position: fixed !important;
                            left: 16px !important;
                            right: 16px !important;
                            width: auto !important;
                            max-height: 300px !important;
                            top: auto !important;
                            bottom: auto !important;
                            margin-top: 8px !important;
                        }

                        /* For very small screens */
                        @media (max-width: 480px) {
                            #tag-search-results {
                                max-height: 250px !important;
                            }
                        }
                    }

                    @media (min-width: 769px) {
                        #tag-search-results {
                            min-width: 100% !important;
                            width: 100% !important;
                        }
                    }
                </style>

                <!-- Tags -->
                <div class="flex flex-wrap gap-2 md:gap-4 justify-center lg:justify-start pt-4">
                    @if(isset($skill_tags['tag_name_']) && is_array($skill_tags['tag_name_']))
                        @foreach ($skill_tags['tag_name_'] as $key => $tag_name)
                            <a href="{{ $skill_tags['tag_link_'][$key] ?? '#' }}"
                               class="px-4 py-2 border border-base-300/50 text-base-400 rounded-lg text-sm font-medium hover:bg-primary/10 transition-all duration-300 cursor-pointer">
                                {{ $tag_name }} <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        @endforeach
                    @else
                        <span class="px-4 py-2 border border-base-300/50 text-base-400 rounded-lg text-sm font-medium hover:bg-primary/10 transition-all duration-300 cursor-pointer">
                            {{ __('Design & Creative') }} <i class="fas fa-arrow-right ml-2"></i>
                        </span>
                        <span class="px-4 py-2 border border-base-300/50 text-base-400 rounded-lg text-sm font-medium hover:bg-primary/10 transition-all duration-300 cursor-pointer">
                            {{ __('Website Development') }} <i class="fas fa-arrow-right ml-2"></i>
                        </span>
                        <span class="px-4 py-2 border border-base-300/50 text-base-400 rounded-lg text-sm font-medium hover:bg-primary/10 transition-all duration-300 cursor-pointer">
                            {{ __('SEO') }} <i class="fas fa-arrow-right ml-2"></i>
                        </span>
                        <span class="px-4 py-2 border border-base-300/50 text-base-400 rounded-lg text-sm font-medium hover:bg-primary/10 transition-all duration-300 cursor-pointer">
                            {{ __('Digital Marketing') }} <i class="fas fa-arrow-right ml-2"></i>
                        </span>
                        <span class="px-4 py-2 border border-base-300/50 text-base-400 rounded-lg text-sm font-medium hover:bg-primary/10 transition-all duration-300 cursor-pointer">
                            {{ __('App Developer') }} <i class="fas fa-arrow-right ml-2"></i>
                        </span>
                    @endif
                </div>
            </div>

            <!-- Right Image Section -->
            <div class="relative px-6 md:px-8 right-image">
                <div class="relative flex items-center">
                    {{-- Background Shape Image --}}
                    @if($shape_image_one ?? false)
                        <div class="absolute inset-0 w-full">
                            {!! render_image_markup_by_attachment_id($shape_image_one) !!}
                        </div>
                    @else
                        <img class="absolute inset-0 w-full"
                             src="{{ asset('assets/images/banner/back_image.png') }}"
                             alt="{{ __('Banner background image') }}">
                    @endif

                    @if($slider_image ?? false)
                        <div class="w-full h-full object-cover">
                            {!! render_image_markup_by_attachment_id($slider_image) !!}
                        </div>
                    @else
                        <img src="{{ asset('assets/images/banner/top_image.png') }}"
                             alt="{{ __('A person working on a laptop, representing talent.') }}"
                             class="w-full h-full object-cover">
                    @endif

                    @if($shape_image_two ?? false)
                        <div class="absolute top-4 right-4 w-12 h-12 animate-bounce">
                            {!! render_image_markup_by_attachment_id($shape_image_two) !!}
                        </div>
                    @endif

                    {{-- Info Cards --}}
                    <div class="absolute -left-8 p-2 md:p-4 bg-white rounded-xl shadow-lg flex items-center gap-2 info-card">
                        @if($info_card_one_icon ?? false)
                            {!! render_image_markup_by_attachment_id($info_card_one_icon) !!}
                        @else
                            <img src="{{ asset('assets/images/banner/complete.svg') }}" alt="{{ __('Icon') }}">
                        @endif
                        <span class="font-medium text-gray-700">
                            {{ $info_card_one_text ?? __('Complete Project') }}
                        </span>
                    </div>

                    <div class="absolute bottom-10 md:bottom-1/4 -right-8 p-2 md:p-4 bg-white rounded-xl shadow-lg flex items-center gap-2 info-card">
                        @if($info_card_two_icon ?? false)
                            {!! render_image_markup_by_attachment_id($info_card_two_icon) !!}
                        @else
                            <img src="{{ asset('assets/images/banner/hired.svg') }}" alt="{{ __('Icon') }}">
                        @endif
                        <span class="font-medium text-gray-700">
                            {{ $info_card_two_text ?? __('Hired 41+ Talents') }}
                        </span>
                    </div>

                    @if(($show_top_freelancer ?? '') === 'on' && ($top_freelancer?->freelancer_orders_count ?? 0) >= 1)
                        {{-- Top Freelancer Profile Card --}}
                        <div class="absolute bottom-4 left-4 md:left-8">
                            <div class="bg-white p-3 md:p-4 rounded-xl shadow-lg wow fadeIn" data-wow-delay=".4s">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-full overflow-hidden flex-shrink-0">
                                        <img src="{{ asset('assets/uploads/profile/'.$top_freelancer->image) }}"
                                             alt="{{ __('profile') }}"
                                             class="w-full h-full object-cover">
                                    </div>
                                    <div>
                                        <h6 class="text-sm font-semibold text-gray-800">{{ $top_freelancer?->fullname }}</h6>
                                        <p class="text-xs text-gray-600">{{ $top_freelancer_of_the_month ?? __('Top Freelancer of month') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="absolute top-4 left-4 md:left-8">
                            <div class="bg-white p-2 md:p-3 rounded-xl shadow-lg flex items-center gap-2 wow zoomIn" data-wow-delay=".3s">
                                <div class="w-6 h-6">
                                    <img src="{{ asset('assets/static/img/banner/rating.svg') }}" alt="{{ __('rating') }}">
                                </div>
                                <p class="text-xs md:text-sm font-medium text-gray-700">
                                    {{ freelancer_rating($top_freelancer->id, 'header') ?? 4.9 }} {{ __('Ratings') }}
                                </p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>