{{-- resources/views/pages/home.blade.php --}}
@extends('layouts.app')

@section('title', 'Home - ' . config('app.name'))

@section('content')
    <div class="pt-[80px]"> {{-- Offset for fixed header --}}

        {{-- Hero Section --}}
        <section class="relative w-full min-h-[850px] flex items-center justify-center overflow-hidden bg-[#2F3D7E]">
            {{-- Background Image with Overlay --}}
            <div class="absolute inset-0 z-0">
                <img src="{{ asset('images/home_bg.png') }}" alt="Background" class="w-full h-full object-cover  ">
                <div class="absolute inset-0 bg-gradient-to-b"></div>
                {{-- Abstract shapes --}}
                <div class="absolute top-20 left-10 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
                <div class="absolute bottom-20 right-10 w-96 h-96 bg-[#4D5EAE]/20 rounded-full blur-3xl"></div>
            </div>

            <div class="relative z-10 w-full max-w-[1000px] text-center px-6 flex flex-col items-center gap-10">
                <div class="space-y-6 md:mt-0 mt-5">
                    <span
                        class="inline-block py-1 px-3 rounded-full bg-white/10 text-white/90 text-sm font-medium border border-white/10 backdrop-blur-sm">
                        🚀 The #1 Anonymous Salary Platform
                    </span>
                    <h1 class="text-5xl md:text-7xl font-bold text-white leading-[1.05] tracking-tight">
                        Know Your Worth.<br />
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-white">Compare Your
                            Pay.</span>
                    </h1>
                    <p class="text-lg md:text-xl text-white/80 max-w-[600px] mx-auto leading-relaxed">
                        Join thousands of professionals making pay transparency the norm. Share your salary anonymously and
                        see what others are earning.
                    </p>
                </div>

                <div class="flex flex-col sm:flex-row gap-4 mt-2 w-full justify-center">
                    <a href="{{ route('dashboard.job-experiences.create') }}"
                        class="h-14 px-8 min-w-[200px] bg-[#4D5EAE] hover:bg-[#5D6EBE] border border-white/10 shadow-lg shadow-blue-900/20 text-lg text-white rounded-xl flex items-center justify-center font-medium transition-all">
                        Share My Pay
                    </a>
                    <a href="{{ route('see-salary') }}"
                        class="h-14 px-8 min-w-[200px] bg-white/10 text-white border border-white/20 hover:bg-white/20 backdrop-blur-md text-lg rounded-xl flex items-center justify-center font-medium transition-all">
                        See Salaries
                    </a>
                </div>

                {{-- Enhanced Search Bar with Alpine.js Autocomplete --}}
                <form action="{{ route('see-salary') }}" method="GET"
                    class="w-full max-w-[860px] bg-white p-2 rounded-[24px] flex flex-col md:flex-row items-center gap-2 mt-8 shadow-2xl shadow-blue-900/30 border border-white/10 backdrop-blur-sm">

                    {{-- 1. WHAT (Job Title) --}}
                    <div class="flex-1 flex items-center px-6 gap-4 w-full h-14 border-b md:border-b-0 md:border-r border-gray-100"
                 >

                        <div class="bg-blue-50 p-2 rounded-lg text-[#2F3D7E]">
                            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                        <div class="flex flex-col items-start flex-1 relative">
                            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">What</span>
                            <input name="job_title" id="job_title" type="text" x-model="query" @focus="open = true" @input="open = true"
                                placeholder="Job title"
                                class="w-full bg-transparent outline-none text-gray-900 placeholder:text-gray-400 font-medium border-0 focus:ring-0 p-0"
                                autocomplete="off">
                        <ul id="job-suggestions"
                            class="absolute left-0 right-0 z-50 border border-gray-200 mt-16 rounded-lg max-h-60 overflow-y-auto hidden bg-white shadow-xl">
                        </ul>
                        </div>
                    </div>

                    {{-- 2. WHERE (Country) --}}
                    <div class="flex-1 flex items-center px-6 gap-4 w-full h-14"
                        x-data="{
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        search: '',
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        open: false,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        countries: {{ json_encode($countries) }},
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        get filteredCountries() {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            return this.search === '' ? this.countries : this.countries.filter(c => c.toLowerCase().includes(this.search.toLowerCase()))
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            }"
                        @click.away="open = false">

                        <div class="bg-blue-50 p-2 rounded-lg text-[#2F3D7E]">
                            <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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <div class="flex flex-col items-start flex-1 relative">
                            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider">Where</span>
                            <input name="location" id="location" type="text" x-model="search" @focus="open = true" @input="open = true"
                                placeholder="Country" required
                                class="w-full bg-transparent outline-none text-gray-900 placeholder:text-gray-400 font-medium border-0 focus:ring-0 p-0"
                                autocomplete="off">
                            {{-- Dropdown --}}
                            <ul x-show="open"
                                class="absolute left-0 right-0 top-full border border-gray-100 mt-2 rounded-lg max-h-60 overflow-auto bg-white text-black shadow-xl z-50 py-1"
                                style="display: none;" x-transition.opacity>
                                <template x-for="country in filteredCountries" :key="country">
                                    <li @click="search = country; open = false"
                                        class="px-4 py-2 text-sm hover:bg-blue-50 hover:text-[#2F3D7E] cursor-pointer"
                                        x-text="country">
                                    </li>
                                </template>
                                <li x-show="filteredCountries.length === 0" class="px-4 py-2 text-xs text-gray-400 italic">
                                    No countries found</li>
                            </ul>
                        </div>
                    </div>

                    <button type="submit"
                        class="w-full md:w-auto rounded-[18px] px-10 h-14 text-lg shadow-lg shadow-blue-900/20 bg-[#2F3D7E] hover:bg-[#1E2858] text-white font-medium transition-all">
                        Search
                    </button>
                </form>

                <div
                    class="hidden md:flex items-center gap-6 text-white/60 text-sm md:mt-2 mt-6 font-medium flex-wrap md:justify-center justify-start">
                    <div class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        <span>100% Anonymous</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        <span>Verified Data</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        <span>Free Access</span>
                    </div>
                </div>

            </div>

        </section>

        {{-- Recent Salaries Section - Floating Cards --}}
        <section class="relative -mt-24 px-6 mb-24">
            <div class="max-w-[1300px] mx-auto">
                <div class="flex justify-between items-end md:mb-6 mb-10 px-4 md:pt-4 pt-8">
                    <h2 class="text-white font-bold text-xl ">Recently Added Salaries</h2>
                    <a href="{{ route('see-salary') }}"
                        class="text-white/80 hover:text-white text-sm flex items-center gap-1 font-medium transition cursor-pointer">
                        View all
                        <svg class="w-4 h-4" 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" />
                        </svg>
                    </a>
                </div>
                <div class="w-full overflow-x-auto  rounded-[24px] bg-white shadow-2xl">
                    <table class="w-full border-separate border-spacing-y-2">


                        <tbody>
                            <tr
                                class="bg-white hover:bg-gray-50 transition text-xs font-bold text-gray-400 uppercase tracking-wider border-b border-gray-100
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ">
                                <td class="px-4 py-4">Role</td>
                                <td class="px-4 py-4">Annual Pay</td>
                                <td class="px-4 py-4">Equity</td>
                                <td class="px-4 py-4">Location</td>
                                <td class="px-4 py-4 text-right">Status</td>
                            </tr>
                            @foreach ($jobs as $index => $job)
                                <tr class="bg-white hover:bg-gray-50 transition rounded-[16px] border border-gray-100">
                                    <!-- ROLE -->
                                    <td class="px-4 py-4">
                                        <div class="flex items-center gap-4 min-w-[260px]">
                                            <div class="relative shrink-0">
                                                <div class="w-12 h-12 rounded-2xl overflow-hidden bg-gray-100 shadow-inner">
                                                    <img src="https://api.dicebear.com/9.x/pixel-art-neutral/svg?seed={{ $job->user->name ?? 'User' }}"
                                                        alt="{{ $job->user->name ?? 'User' }}" class="w-full h-full object-cover">
                                                </div>

                                                    <div class="absolute -bottom-2 -right-4 bg-white rounded-full p-0.5 shadow-sm">
                                                        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <g filter="url(#filter0_dd_474_25700)">
                                                                <path
                                                                    d="M3 12C3 6.47715 7.47715 2 13 2C18.5228 2 23 6.47715 23 12C23 17.5228 18.5228 22 13 22C7.47715 22 3 17.5228 3 12Z"
                                                                    fill="white" shape-rendering="crispEdges" />
                                                                <g clip-path="url(#clip0_474_25700)">
                                                                    <path
                                                                        d="M19.5341 10.6667C19.8385 12.1609 19.6215 13.7143 18.9193 15.0679C18.2171 16.4214 17.072 17.4934 15.6751 18.1049C14.2782 18.7164 12.7138 18.8305 11.2429 18.4282C9.77205 18.026 8.48353 17.1316 7.59225 15.8943C6.70097 14.657 6.26081 13.1515 6.34518 11.6289C6.42954 10.1063 7.03332 8.65872 8.05583 7.52744C9.07835 6.39616 10.4578 5.64961 11.9641 5.4123C13.4704 5.17498 15.0126 5.46123 16.3334 6.22333"
                                                                        fill="#EFF6FF" />
                                                                    <path
                                                                        d="M19.5341 10.6667C19.8385 12.1609 19.6215 13.7143 18.9193 15.0679C18.2171 16.4214 17.072 17.4934 15.6751 18.1049C14.2782 18.7164 12.7138 18.8305 11.2429 18.4282C9.77205 18.026 8.48353 17.1316 7.59225 15.8943C6.70097 14.657 6.26081 13.1515 6.34518 11.6289C6.42954 10.1063 7.03332 8.65872 8.05583 7.52744C9.07835 6.39616 10.4578 5.64961 11.9641 5.4123C13.4704 5.17498 15.0126 5.46123 16.3334 6.22333"
                                                                        stroke="#2B7FFF" stroke-width="1.33333" stroke-linecap="round"
                                                                        stroke-linejoin="round" />
                                                                    <path d="M11 11.3333L13 13.3333L19.6667 6.66666" fill="#EFF6FF" />
                                                                    <path d="M11 11.3333L13 13.3333L19.6667 6.66666" stroke="#2B7FFF"
                                                                        stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                                                                </g>
                                                            </g>
                                                            <defs>
                                                                <filter id="filter0_dd_474_25700" x="0" y="0" width="26" height="26"
                                                                    filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                                                    <feColorMatrix in="SourceAlpha" type="matrix"
                                                                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                                                                    <feMorphology radius="1" operator="erode" in="SourceAlpha"
                                                                        result="effect1_dropShadow_474_25700" />
                                                                    <feOffset dy="1" />
                                                                    <feGaussianBlur stdDeviation="1" />
                                                                    <feComposite in2="hardAlpha" operator="out" />
                                                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
                                                                    <feBlend mode="normal" in2="BackgroundImageFix"
                                                                        result="effect1_dropShadow_474_25700" />
                                                                    <feColorMatrix in="SourceAlpha" type="matrix"
                                                                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                                                                    <feOffset dy="1" />
                                                                    <feGaussianBlur stdDeviation="1.5" />
                                                                    <feComposite in2="hardAlpha" operator="out" />
                                                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" />
                                                                    <feBlend mode="normal" in2="effect1_dropShadow_474_25700"
                                                                        result="effect2_dropShadow_474_25700" />
                                                                    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_474_25700"
                                                                        result="shape" />
                                                                </filter>
                                                                <clipPath id="clip0_474_25700">
                                                                    <rect width="16" height="16" fill="white" transform="translate(5 4)" />
                                                                </clipPath>
                                                            </defs>
                                                        </svg>

                                                    </div>
                                            </div>

                                            <div>
                                                <p class="font-bold text-gray-900 text-base">
                                                    {{ $job->job_title }}
                                                </p>
                                                <div class="flex justify-items-center gap-1 justify-self-center">

                                                    <span class=" bg-gray-100 px-2 py-0.5 rounded text-xs text-gray-600 font-medium">
                                                        {{ $job->level }}
                                                    </span>
                                                    <span class=" py-0.5 rounded text-xs text-gray-600 font-medium">

                                                        <svg width="6" height="16" viewBox="0 0 6 16" fill="none"
                                                            xmlns="http://www.w3.org/2000/svg">
                                                            <path
                                                                d="M3.375 11.3977C3.03125 11.3977 2.71733 11.3139 2.43324 11.1463C2.14915 10.9759 1.92188 10.7486 1.75142 10.4645C1.58381 10.1804 1.5 9.86648 1.5 9.52273C1.5 9.17614 1.58381 8.86222 1.75142 8.58097C1.92188 8.29687 2.14915 8.07102 2.43324 7.90341C2.71733 7.73295 3.03125 7.64773 3.375 7.64773C3.72159 7.64773 4.03551 7.73295 4.31676 7.90341C4.60085 8.07102 4.8267 8.29687 4.99432 8.58097C5.16477 8.86222 5.25 9.17614 5.25 9.52273C5.25 9.86648 5.16477 10.1804 4.99432 10.4645C4.8267 10.7486 4.60085 10.9759 4.31676 11.1463C4.03551 11.3139 3.72159 11.3977 3.375 11.3977Z"
                                                                fill="#6A7282" />
                                                        </svg>
                                                    </span>

                                                    <span class=" px-2 py-0.5 rounded text-xs text-gray-600 font-medium">
                                                        {{ $job->years_of_experience }}yr Exp.
                                                    </span>
                                                </div>

                                            </div>
                                        </div>
                                    </td>

                                    <!-- SALARY -->
                                    <td class="px-4 py-4 whitespace-nowrap">
                                        <p class="md:hidden text-xs text-gray-400 mb-1">Salary</p>
                                        <p class="font-bold text-[#2F3D7E]">
                                            {{ $job->currency }} {{ number_format($job->annual_base_salary, 0) }}
                                        </p>
                                    </td>

                                    <!-- EQUITY -->
                                    <td class="px-4 py-4 whitespace-nowrap">
                                        <p class="md:hidden text-xs text-gray-400 mb-1">Equity</p>
                                        @if($job->equity)
                                            <span
                                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700">
                                                {{ $job->equity }}
                                            </span>
                                        @else
                                            <span class="text-sm text-gray-400">-</span>
                                        @endif
                                    </td>

                                    <!-- LOCATION -->
                                    <td class="px-4 py-4 whitespace-nowrap">
                                        <p class="md:hidden text-xs text-gray-400 mb-1">Location</p>
                                        <span class="text-gray-900 font-medium">
                                            {{ $job->country ?? 'Remote' }}
                                        </span>
                                    </td>

                                    <!-- STATUS -->
                                    <td class="px-4 py-4 text-right whitespace-nowrap">
                                        <p class="md:hidden text-xs text-gray-400 mb-1">Status</p>
                                        <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded font-semibold">
                                            New
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        </table>
                        </div>


            </div>
            </section>

        {{-- Is Your Pay Fair Section --}}
        <section class="py-20 relative overflow-hidden " style="background-color: #EEF1F7;">
            <div class="max-w-[1300px] mx-auto py-6">
                <div class=" gap-12 items-center">
                    <div class="md:col-span-5 relative z-10 flex flex-col justify-center"
                        style="background-image:url('{{ asset('images/square_pattern.png') }}'); background-position: center;
                                                                                                                                                                                                                                        background-size: cover;">

                        <div class="lg:w-[50%] w-[80%] mx-auto">

                            <div
                                class="text-[#2F3D7E] w-1/3 font-bold  mx-auto text-center block py-1 my-2 px-3 rounded-full bg-[#2F3D7E1A]  text-sm font- border border-white/10 backdrop-blur-sm">
                                Market
                                Analytics</div>

                            <h2 class="text-[32px] text-center md:text-[44px] font-bold text-[#101828] mb-6 leading-tight">
                                Is Your Pay Fair?
                            </h2>
                            <p class="text-lg text-center text-[#101828] mb-8 leading-relaxed">
                                Compare your compensation with real-time data from thousands of verified professionals.
                            </p>

                        </div>
                        <div class=" md:flex block  gap-8 lg:flex-row p-4 lg:p-0">

                            <div
                                class="md:w-1/2 mb-10 md:mb-0 w-full bg-gradient-to-br from-[#2F3D7E] to-[#4D5EAE] text-white border border-white shadow-lg p-8 rounded-[24px] hover:-translate-y-1 transition-transform duration-500">
                                <h3 class="font-bold mb-6 text-lg flex flex-1 items-center gap-2">
                                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M0 14C0 6.26801 6.26801 0 14 0H34C41.732 0 48 6.26801 48 14V34C48 41.732 41.732 48 34 48H14C6.26801 48 0 41.732 0 34V14Z"
                                            fill="white" fill-opacity="0.2" />
                                        <path d="M15 15V31C15 31.5304 15.2107 32.0391 15.5858 32.4142C15.9609 32.7893 16.4696 33 17 33H33" stroke="white"
                                            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M30 29V21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M25 29V17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M20 29V26" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <span>Salary Comparison</span>

                                </h3>
                                <div class="font-bold text-xl mt-3">
                                    Digital Marketer
                                </div>
                                <div class="mb-18">California, San Diego</div>
                                <div class=" mt-8 mb-8 text-sm font-medium text-white ">
                                    <div class=" opacity-70">Your Current Pay</div>
                                    <div class="text-3xl  font-bold text-white mb-2">$85,000</div>
                                    <div class="w-full h-5 bg-[#FFFFFF33] rounded-full overflow-hidden">
                                        <div class="h-full w-[60%] bg-gradient-to-br from-[#FF8904] to-[#FF6900] rounded-full">
                                        </div>
                                    </div>

                                </div>
                                <div class="mb-8">
                                    <div class="text-sm  font-medium text-white flex justify-between ">
                                        <span class=" opacity-70">Market Average</span>
                                        <span class="flex gap-1 text-[#05DF72]">
                                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g clip-path="url(#clip0_606_10828)">
                                                    <path d="M14.6667 4.66669L9.00004 10.3334L5.66671 7.00002L1.33337 11.3334" stroke="#05DF72" stroke-width="1.33333"
                                                        stroke-linecap="round" stroke-linejoin="round" />
                                                    <path d="M10.6666 4.66669H14.6666V8.66669" stroke="#05DF72" stroke-width="1.33333" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </g>
                                                <defs>
                                                    <clipPath id="clip0_606_10828">
                                                        <rect width="16" height="16" fill="white" />
                                                    </clipPath>
                                                </defs>
                                                </svg>
                                                +8%
                                                </span>
                                                </div>
                                                <div class="text-3xl flex-1 font-bold text-white mb-2">$92,000</div>
                                                <div class="w-full h-5 bg-[#FFFFFF33] rounded-full overflow-hidden ">
                                                    <div
                                                        class="h-full w-[85%] bg-[#51A2FF] bg-gradient-to-br from-[#51A2FF] to-[#2B7FFF] rounded-full shadow-[0_0_10px_rgba(59,174,249,0.5)]">
                                                    </div>
                                                </div>
                                                </div>


                                <a href="/dashboard"
                                    class="w-full  h-16 bg-[#fff] hover:bg-[#ccc] text-[#2F3D7E] font-bold rounded-lg flex items-center justify-center  shadow-md transition-all">
                                    Compare My Salary Now
                                </a>

                            </div>
                            <div
                                class="md:w-1/2  w-full bg-[#fff]  text-black border border-[#E5E7EB] shadow-sm p-8 rounded-[24px] hover:-translate-y-1 transition-transform duration-500">
                                <h3 class="font-bold mb-6 text-lg flex flex-1 items-center gap-2">

                                    <span>Real-time Insights </span>

                                </h3>
                                <div
                                    class=" bg-gradient-to-br from-[#FEF2F2] to-[#FFF7ED]   text-black border border-[##FFE2E2] shadow-sm p-8 rounded-[24px] hover:-translate-y-1 transition-transform duration-500">

                                    <div class="">
                                        <div class=" mt-2 font-medium text-[#4A5565]">
                                            Salary Gap
                                        </div>
                                        <div class="text-4xl font-bold text-[#951f25]">
                                            $3k
                                        </div>
                                        <div class="text-sm mt-2 font-medium text-[#6A7282]">
                                            You could be earning more based on your role and experience
                                        </div>
                                    </div>
                                    </div>
                                    <div
                                        class="mt-6 bg-gradient-to-br from-[#F0FDF4] to-[#ECFDF5]  text-black border border-[#B9F8CF] shadow-sm p-8 rounded-[24px] hover:-translate-y-1 transition-transform duration-500">

                                    <div class="">
                                        <div class="">
                                            <div class="flex justify-between mb-2 items-end">
                                                <span class="text-sm font-medium text-[#4A5565]">Data Accuracy </span>
                                                <span class="text-xl font-bold text-[#00A63E]">98%</span>
                                            </div>
                                            <div class="w-full h-5 bg-[#B9F8CF] rounded-full overflow-hidden">
                                                <div class="h-full w-[98%] bg-[#00A63E] rounded-full shadow-[0_0_10px_rgba(59,174,249,0.5)]">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="text-sm mt-2 font-medium text-[#6A7282]">
                                            Validated from 50,000+ verified professionals
                                        </div>
                                        </div>
                                        </div>
                                        </div>
                                        </div>

                    </div>

                </div>
                </div>
                </section>

        <section class="py-0 px-6 mb-20">
            <div class="max-w-[1300px] mx-auto py-20">

                <div style="
                                                                                 background-image:
                                                          url('{{ asset('images/blue_dots.png') }}');
                                                        background-size: cover;"
                    class="w-full rounded-[32px] p-12  relative overflow-hidden text-center shadow-2xl shadow-blue-900/20">

                    <div class="relative z-10 max-w-[700px] mx-auto">
                        <h2 class="text-[32px] md:text-[48px] font-bold text-white mb-6 leading-tight">
                            Ready to Discover <br> Your True Worth?
                        </h2>
                        <p class="text-white/70 text-xl mb-10 leading-relaxed">
                            Join the fastest growing compensation community. Verified data, completely anonymous, and free
                            forever.
                        </p>
                        <div class="flex flex-col sm:flex-row justify-center gap-4">
                            <a href="{{ route('communities.index') }}"
                                class="bg-white text-[#2F3D7E] hover:bg-gray-50 px-10 h-14 rounded-xl flex items-center justify-center text-lg font-bold shadow-xl border-none transition-all">
                                Share My Salary
                            </a>
                            <a href="{{ route('see-salary') }}"
                                class="text-white hover:bg-white/10 px-10 h-14 rounded-xl flex items-center justify-center text-lg border border-white/20 transition-all">
                                Browse Salaries
                            </a>
                        </div>
                        <div
                            class="hidden md:flex  items-center gap-6 text-green-400 text-sm md:mt-8 mt-6 font-medium flex-wrap md:justify-center justify-start">
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clip-rule="evenodd" />
                                </svg>
                                <span>100% Anonymous</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clip-rule="evenodd" />
                                </svg>
                                <span>Verified Data</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <svg class="w-4 h-4 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clip-rule="evenodd" />
                                </svg>
                                <span>Free Access</span>
                            </div>
                        </div>

                    </div>

                    <div
                        class="absolute top-0 left-0 w-[500px] h-[500px] bg-white/5 rounded-full -translate-x-1/3 -translate-y-1/3 blur-3xl pointer-events-none">
                    </div>
                    <div
                        class="absolute bottom-0 right-0 w-[600px] h-[600px] bg-[#4D5EAE]/20 rounded-full translate-x-1/3 translate-y-1/3 blur-3xl pointer-events-none">
                    </div>
                </div>
                </div>
                </section>
                </div>
@endsect