@extends('layouts.app')

@section('content')
    <div class="min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 py-10 relative overflow-hidden">

        <!-- ✨ Floating Gradient Circles Background -->
        <div
            class="absolute -top-20 -left-20 w-96 h-96 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 rounded-full opacity-30 animate-pulse-slow">
        </div>
        <div
            class="absolute -bottom-32 -right-32 w-96 h-96 bg-gradient-to-r from-yellow-300 via-orange-300 to-red-400 rounded-full opacity-30 animate-pulse-slow">
        </div>

        <div class="relative max-w-7xl mx-auto px-6 pt-0">

            <!-- Email Verification Success -->
            @if (session('success'))
                <div class="py-3 px-3 bg-green-100 rounded-lg w-50 mx-auto flex items-center mb-2 justify-between">
                    <span class="text-green-800 font-semibold">
                        {{ session('success') ?? 'Nothing Found' }}
                    </span>

                    <span onclick="this.parentElement.remove()"
                        class="ml-3 h-6 w-6 flex items-center justify-center rounded-full bg-green-200 text-green-700  hover:bg-green-300 hover:text-green-900 cursor-pointer select-none text-xs font-bold transition"
                        aria-label="Close">
                        ✕
                    </span>
                </div>
            @endif

            {{-- Header --}}
            <h1 class="text-5xl md:text-6xl font-extrabold text-center text-gray-900 mb-6 animate-fadeDown">
                Welcome, {{ $user->name }}!
            </h1>

            <p class="text-center text-gray-700 mb-12 text-lg">
                Manage your portfolio, skills, projects and more
            </p>

            <!-- 🌈 Button Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

                <x-dashboard-button title="Personal Info" link="{{ route('personal-info.index') }}" icon="fas fa-user"
                    iconcolor="text-teal-500" />
                <x-dashboard-button title="Experience" link="{{ route('experience.index') }}" icon="fas fa-briefcase"
                    iconcolor="text-orange-500" />
                <x-dashboard-button title="Services" link="{{ route('services.index') }}" icon="fas fa-handshake"
                    iconcolor="text-green-500" />
                <x-dashboard-button title="Projects" link="{{ route('projects.index') }}" icon="fas fa-folder-open"
                    iconcolor="text-rose-500" />


                <x-dashboard-button title="Education" link="{{ route('education.index') }}" icon="fas fa-graduation-cap"
                    iconcolor="text-indigo-500" />
                <x-dashboard-button title="Skills" link="{{ route('skills.index') }}" icon="fas fa-lightbulb"
                    iconcolor="text-yellow-500" />

                <x-dashboard-button title="Certifications" link="{{ route('certifications.index') }}"
                    icon="fas fa-certificate" iconcolor="text-purple-500" />
                <x-dashboard-button title="Edit Profile" link="{{ route('profile.edit') }}" icon="fas fa-user-edit"
                    iconcolor="text-sky-500" />
                <x-dashboard-button title="Social Links" link="{{ route('social-links.create') }}" icon="fas fa-link"
                    iconcolor="text-cyan-500" />



                <form method="POST" action="{{ route('logout') }}" class="col-span-3">
                    @csrf
                    <button type="submit"
                        class="w-full bg-white text-gray-900 px-12 py-4 rounded-2xl
                           font-bold shadow-md hover:scale-105 transition-transform duration-300">
                        <i class="fas fa-door-open mr-2 text-red-500"></i> Logout
                    </button>
                </form>
            </div>
        </div>
    </div>

    <style>
        @keyframes fadeDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fadeDown {
            animation: fadeDown 1s ease-out forwards;
        }

        @keyframes pulse-slow {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.3;
            }

            50% {
                transform: scale(1.2);
                opacity: 0.5;
            }
        }

        .animate-pulse-slow {
            animation: pulse-slow 10s ease-in-out infinite;
        }
    </style>
@endsection