@extends('layouts.app')

@section('title', 'VERTEX')

@push('link')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
@endpush

@push('js')
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
                    },
                    colors: {
                        primary: '#120021',
                        secondary: '#240046',
                        textlight: '#E2E8F0',
                        textsecondary: '#94A3B8',
                        accent: '#FFB703',
                        bgdark: '#0f001c',
                    },
                    backgroundImage: {
                        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
                    },
                    boxShadow: {
                        'glow': '0 0 20px rgba(255, 183, 3, 0.15)',
                        'glass': '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
                    }
                }
            }
        }

        AOS.init({
            once: true,
            offset: 50,
            duration: 800,
            easing: 'ease-out-cubic',
        });

        const backdrop = document.getElementById('sidebar-backdrop');
        const panel = document.getElementById('sidebar-panel');
        let isSidebarOpen = false;

        function toggleSidebar() {
            isSidebarOpen = !isSidebarOpen;

            if (isSidebarOpen) {
                backdrop.classList.remove('opacity-0', 'pointer-events-none');
                panel.classList.remove('translate-x-full');
                document.body.style.overflow = 'hidden';
            } else {
                backdrop.classList.add('opacity-0', 'pointer-events-none');
                panel.classList.add('translate-x-full');
                document.body.style.overflow = 'auto';
            }
        }

        const packagesData = {
            'webdevelopment': {
                title: "Web Development Packages",
                description: "Choose the perfect plan to build your robust, scalable, and modern web application.",
                packages: [{
                        name: "Starter Website",
                        price: "LKR 50,000+",
                        features: [
                            "Custom Design (5 Pages)",
                            "Responsive/Mobile Friendly",
                            "Basic SEO Setup",
                            "Contact Form Integration",
                            "1 Year Free Hosting & Domain"
                        ],
                        isPopular: false,
                        icon: 'fas fa-rocket'
                    },
                    {
                        name: "Business Pro",
                        price: "LKR 150,000+",
                        features: [
                            "Custom UI/UX Design (10+ Pages)",
                            "CMS (WordPress/React Setup)",
                            "Advanced SEO & Speed Optimization",
                            "Blog & Portfolio Setup",
                            "2 Hours Training & Support"
                        ],
                        isPopular: true,
                        icon: 'fas fa-laptop-code'
                    },
                    {
                        name: "Enterprise E-commerce",
                        price: "LKR 400,000+",
                        features: [
                            "Full Stack Development (MERN/Vue)",
                            "E-commerce & Payment Gateway",
                            "Inventory & User Management",
                            "Advanced Security & AWS Setup",
                            "Dedicated 24/7 Support"
                        ],
                        isPopular: false,
                        icon: 'fas fa-store'
                    }
                ]
            },
            'uiux': {
                title: "UI/UX Design Packages",
                description: "Get stunning, user-centered interfaces designed for high conversion and engagement.",
                packages: [{
                        name: "Concept Design",
                        price: "LKR 80,000+",
                        features: [
                            "Wireframing & Flow Map",
                            "Visual Moodboard",
                            "3 Key Screen Designs",
                            "Basic Style Guide"
                        ],
                        isPopular: false,
                        icon: 'fas fa-palette'
                    },
                    {
                        name: "Full Product Design",
                        price: "LKR 250,000+",
                        features: [
                            "Concept Design Features",
                            "Full Interactive Prototype (Figma)",
                            "Design System Creation",
                            "Usability Testing Sessions",
                            "Hand-off to Development Team"
                        ],
                        isPopular: true,
                        icon: 'fas fa-object-ungroup'
                    }
                ]
            },
            'mobileapps': {
                title: "Mobile App Packages",
                description: "Transform your business with a seamless, high-performance native or cross-platform application.",
                packages: [{
                        name: "MVP (Minimum Viable Product)",
                        price: "LKR 500,000+",
                        features: [
                            "Core Feature Development",
                            "Simple Backend Service",
                            "iOS or Android Deployment",
                            "Basic Testing"
                        ],
                        isPopular: false,
                        icon: 'fas fa-mobile-screen'
                    },
                    {
                        name: "Full Feature App",
                        price: "LKR 1,500,000+",
                        features: [
                            "MVP Features",
                            "Advanced UI/UX",
                            "Native & Cross-Platform",
                            "3rd Party API Integration",
                            "App Store Optimization"
                        ],
                        isPopular: true,
                        icon: 'fas fa-mobile-alt'
                    }
                ]
            },
            'seo': {
                title: "SEO & Growth Packages",
                description: "Data-driven marketing strategies to ensure your digital product reaches its full potential.",
                packages: [{
                        name: "SEO Foundation",
                        price: "LKR 30,000/mo",
                        features: [
                            "Monthly SEO Audit",
                            "Keyword Research (10 Terms)",
                            "On-Page Optimization",
                            "Monthly Report"
                        ],
                        isPopular: false,
                        icon: 'fas fa-chart-line'
                    },
                    {
                        name: "Growth Accelerator",
                        price: "LKR 90,000/mo",
                        features: [
                            "Full SEO Foundation",
                            "Content Strategy Development",
                            "Monthly Link Building (5 Links)",
                            "Conversion Rate Optimization (CRO)",
                            "Bi-weekly Strategy Calls"
                        ],
                        isPopular: true,
                        icon: 'fas fa-bullhorn'
                    }
                ]
            },
            'cybersecurity': {
                title: "Cybersecurity Packages",
                description: "Dedicated plans for ultimate digital protection.",
                packages: []
            },
            'cloud': {
                title: "Cloud Solutions Packages",
                description: "Flexible cloud infrastructure setup and management plans.",
                packages: []
            }
        };

        const servicesSection = document.getElementById('services');
        const packagesSection = document.getElementById('packages');
        const packagesTitle = document.getElementById('packages-title');
        const packagesDescription = document.getElementById('packages-description');
        const packagesGrid = document.getElementById('packages-grid');

        function generatePackageCard(pkg, isHighlighted) {
            const highlightClasses = isHighlighted ?
                'bg-white/5 border-2 border-accent shadow-glow relative transform scale-[1.02] mt-6 lg:mt-0' :
                'glass border border-white/5 hover:bg-white/5 transition-all duration-300';

            const featureList = pkg.features.map(feature => `
                <li class="flex items-start gap-3 text-textsecondary text-sm">
                    <i class="fas fa-check text-accent mt-1 flex-shrink-0"></i>
                    <span>${feature}</span>
                </li>
            `).join('');

            return `
                <div class="p-8 rounded-3xl ${highlightClasses} flex flex-col justify-between">
                    ${isHighlighted ? '<span class="absolute top-0 right-0 px-4 py-1.5 bg-accent text-primary text-xs font-bold rounded-tr-3xl rounded-bl-xl uppercase">Most Popular</span>' : ''}
                    <div>
                        <div class="w-14 h-14 bg-gradient-to-br from-accent/20 to-primary/50 rounded-2xl border border-accent/30 flex items-center justify-center mb-6 text-2xl text-accent shadow-lg">
                            <i class="${pkg.icon}"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-textlight mb-2">${pkg.name}</h3>
                        <p class="text-textsecondary text-base mb-6">${pkg.price}</p>

                        <ul class="space-y-4 mb-8">
                            ${featureList}
                        </ul>
                    </div>

                    <a href="#contact"
                        class="block w-full text-center py-3 rounded-full font-bold transition-all duration-300 ${isHighlighted ? 'bg-accent text-primary hover:bg-white shadow-glow' : 'bg-white/10 text-textlight hover:bg-accent hover:text-primary'}">
                        Get Started
                    </a>
                </div>
            `;
        }

        function showPackages(serviceKey) {
            const data = packagesData[serviceKey];

            packagesTitle.textContent = data.title;
            packagesDescription.textContent = data.description;
            packagesGrid.innerHTML = '';

            if (data.packages && data.packages.length > 0) {
                const packageCards = data.packages.map((pkg) => generatePackageCard(pkg, pkg.isPopular)).join('');
                packagesGrid.innerHTML = packageCards;
            } else {
                packagesGrid.innerHTML = `
                    <div class="lg:col-span-3 text-center p-16 glass rounded-3xl">
                        <h4 class="text-2xl font-bold text-textlight mb-3">No Specific Packages Available Yet</h4>
                        <p class="text-textsecondary">Please <a href="#contact" class="text-accent hover:underline">contact us</a> for a custom quote on our ${data.title.replace(' Packages', '')} services.</p>
                    </div>
                `;
            }

            servicesSection.style.opacity = 0;

            setTimeout(() => {
                servicesSection.style.display = 'none';

                packagesSection.style.display = 'block';
                packagesSection.style.opacity = 1;

                packagesSection.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });

                AOS.refresh();
            }, 500);
        }

        function showServices() {
            packagesSection.style.opacity = 0;

            setTimeout(() => {
                packagesSection.style.display = 'none';

                servicesSection.style.display = 'block';
                servicesSection.style.opacity = 1;

                servicesSection.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });

                AOS.refresh();
            }, 500);
        }

        document.addEventListener('DOMContentLoaded', () => {
            servicesSection.style.opacity = 1;
            servicesSection.style.display = 'block';
            packagesSection.style.display = 'none';
            packagesSection.style.opacity = 0;
        });
    </script>
@endpush

@push('style')
    <style>
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #120021;
        }

        ::-webkit-scrollbar-thumb {
            background: #3c096c;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #FFB703;
        }

        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        .glass {
            background: rgba(36, 0, 70, 0.25);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .glass-nav {
            background: rgba(18, 0, 33, 0.7);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .sidebar-backdrop {
            transition: opacity 0.3s ease-in-out;
        }

        .sidebar-panel {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes float {
            0% {
                transform: translate(0px, 0px) scale(1);
            }

            33% {
                transform: translate(30px, -50px) scale(1.1);
            }

            66% {
                transform: translate(-20px, 20px) scale(0.9);
            }

            100% {
                transform: translate(0px, 0px) scale(1);
            }
        }

        .animate-blob {
            animation: float 10s infinite;
        }

        .packages-section {
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .section-content {
            transition: opacity 0.5s ease;
        }
    </style>
@endpush

@section('content')

    <body class="bg-primary text-textlight font-sans selection:bg-accent selection:text-primary">

        <div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-50 pointer-events-none">
            <div
                class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-secondary rounded-full mix-blend-screen filter blur-[100px] opacity-40 animate-blob">
            </div>
            <div class="absolute bottom-[-10%] left-[-10%] w-[600px] h-[600px] bg-[#3c096c] rounded-full mix-blend-screen filter blur-[120px] opacity-30 animate-blob"
                style="animation-delay: 2s"></div>
        </div>

        <nav class="fixed w-full top-0 z-50 glass-nav h-20 transition-all duration-300">
            <div class="max-w-7xl mx-auto px-6 h-full flex justify-between items-center">
                <a href="#" class="text-2xl font-extrabold tracking-tight text-textlight flex items-center gap-2">
                    <span class="w-8 h-8 rounded-full flex items-center justify-center overflow-hidden bg-white/10">
                        <img src="{{ asset('assets/Fav.png') }}" alt="Vertex Logo"
                            class="w-full h-full object-contain drop-shadow-[0_0_6px_white]">
                    </span>
                    VERTEX
                </a>

                <div class="hidden md:flex items-center gap-8">
                    <a href="#home"
                        class="text-sm font-medium text-textlight/80 hover:text-accent transition-colors">Home</a>
                    <a href="#about"
                        class="text-sm font-medium text-textlight/80 hover:text-accent transition-colors">About</a>
                    <a href="#services"
                        class="text-sm font-medium text-textlight/80 hover:text-accent transition-colors">Services</a>
                    <a href="#portfolio"
                        class="text-sm font-medium text-textlight/80 hover:text-accent transition-colors">Work</a>
                    <a href="#contact"
                        class="px-6 py-2.5 rounded-full text-sm font-bold bg-white/5 border border-white/10 hover:bg-accent hover:text-primary hover:border-accent transition-all duration-300">
                        Let's Talk
                    </a>
                </div>

                <button class="md:hidden text-textlight text-xl p-2 focus:outline-none hover:text-accent transition-colors"
                    onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </nav>

        {{-- Global msg Component --}}
        @include('components.msg')

        <div id="sidebar-container" class="fixed inset-0 z-[60] pointer-events-none">
            <div id="sidebar-backdrop"
                class="absolute inset-0 bg-black/60 backdrop-blur-sm opacity-0 sidebar-backdrop pointer-events-none"
                onclick="toggleSidebar()">
            </div>

            <div id="sidebar-panel"
                class="absolute top-0 right-0 h-full w-[80%] max-w-[320px] bg-[#120021] border-l border-white/10 shadow-2xl transform translate-x-full sidebar-panel pointer-events-auto flex flex-col">

                <div class="flex items-center justify-between p-6 border-b border-white/5">
                    <span class="text-xl font-bold text-textlight">Menu</span>
                    <button onclick="toggleSidebar()"
                        class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-textlight hover:text-accent hover:bg-white/10 transition-colors">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <div class="flex flex-col p-6 space-y-6 overflow-y-auto h-full">
                    <a href="#home" onclick="toggleSidebar()"
                        class="text-lg font-medium text-textlight hover:text-accent transition-colors flex items-center gap-3">
                        <i class="fas fa-home w-5 text-textsecondary"></i> Home
                    </a>
                    <a href="#about" onclick="toggleSidebar()"
                        class="text-lg font-medium text-textlight hover:text-accent transition-colors flex items-center gap-3">
                        <i class="fas fa-user w-5 text-textsecondary"></i> About
                    </a>
                    <a href="#services" onclick="toggleSidebar()"
                        class="text-lg font-medium text-textlight hover:text-accent transition-colors flex items-center gap-3">
                        <i class="fas fa-layer-group w-5 text-textsecondary"></i> Services
                    </a>
                    <a href="#portfolio" onclick="toggleSidebar()"
                        class="text-lg font-medium text-textlight hover:text-accent transition-colors flex items-center gap-3">
                        <i class="fas fa-briefcase w-5 text-textsecondary"></i> Work
                    </a>

                    <div class="pt-6 border-t border-white/5 mt-auto">
                        <a href="#contact" onclick="toggleSidebar()"
                            class="block w-full text-center py-3 bg-accent text-primary font-bold rounded-xl hover:bg-white transition-colors">
                            Contact Us
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <section id="home" class="relative pt-32 pb-20 md:pt-48 md:pb-32 max-w-7xl mx-auto px-6">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div data-aos="fade-up" data-aos-duration="1000">
                    <div
                        class="inline-flex items-center gap-2 px-4 py-2 mb-8 rounded-full bg-white/5 border border-white/10 text-accent text-xs font-bold tracking-widest uppercase hover:bg-white/10 transition-colors cursor-default">
                        <span class="w-2 h-2 rounded-full bg-accent animate-pulse"></span>
                        Future Ready Solutions
                    </div>
                    <h1 class="text-5xl md:text-7xl font-bold text-textlight leading-[1.1] mb-6 tracking-tight">
                        Software that <br>
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-accent to-orange-300">defines
                            tomorrow.</span>
                    </h1>
                    <p class="text-textsecondary text-lg mb-10 leading-relaxed max-w-lg">
                        We engineer clean, scalable, and user-centric digital experiences designed to elevate your business
                        presence in the modern era.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#contact"
                            class="bg-accent text-primary px-8 py-4 rounded-full font-bold hover:bg-white transition-all duration-300 text-center shadow-[0_0_20px_rgba(255,183,3,0.3)] hover:shadow-[0_0_30px_rgba(255,183,3,0.5)] transform hover:-translate-y-1">
                            Start Your Project
                        </a>
                        <a href="#portfolio"
                            class="group flex items-center justify-center gap-3 px-8 py-4 rounded-full font-medium text-textlight bg-white/5 border border-white/10 hover:bg-white/10 transition-all duration-300">
                            View Our Work <i
                                class="fas fa-arrow-right text-xs transform group-hover:translate-x-1 transition-transform text-accent"></i>
                        </a>
                    </div>

                    <div class="mt-12 flex items-center gap-6 text-textsecondary text-sm">
                        <div class="flex -space-x-3">
                            <div class="w-10 h-10 rounded-full bg-gray-700 border-2 border-primary"></div>
                            <div class="w-10 h-10 rounded-full bg-gray-600 border-2 border-primary"></div>
                            <div
                                class="w-10 h-10 rounded-full bg-gray-500 border-2 border-primary flex items-center justify-center text-xs text-white font-bold">
                                +50</div>
                        </div>
                        <p>Trusted by industry leaders</p>
                    </div>
                </div>

                <div class="relative" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="100">
                    <div
                        class="absolute inset-0 bg-gradient-to-tr from-accent to-purple-500 rounded-[2rem] blur-2xl opacity-20 transform rotate-6 scale-95">
                    </div>
                    <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1000&auto=format&fit=crop"
                        alt="Futuristic Setup"
                        class="relative rounded-[2rem] shadow-2xl w-full object-cover h-[500px] border border-white/10">

                    <div class="absolute -bottom-6 -left-6 md:bottom-10 md:-left-10 glass p-6 rounded-2xl max-w-xs animate-bounce"
                        style="animation-duration: 3s;">
                        <div class="flex items-center gap-4 mb-3">
                            <div
                                class="w-10 h-10 rounded-full bg-green-500/20 text-green-400 flex items-center justify-center">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div>
                                <h4 class="text-white font-bold text-sm">Growth Rate</h4>
                                <p class="text-textsecondary text-xs">+124% this month</p>
                            </div>
                        </div>
                        <div class="w-full bg-white/10 h-1.5 rounded-full overflow-hidden">
                            <div class="bg-accent h-full w-[70%] rounded-full"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="services" class="py-24 bg-bgdark relative section-content">
            <div class="max-w-7xl mx-auto px-6">
                <div class="text-center mb-20 max-w-2xl mx-auto" data-aos="fade-up">
                    <h2 class="text-3xl md:text-5xl font-bold text-textlight mb-6">Built for <span
                            class="text-accent">Scale</span></h2>
                    <p class="text-textsecondary text-lg">Comprehensive digital solutions designed to take your business
                        from concept to market dominance.</p>
                </div>
                <a href="{{ route('packages') }}">
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach ($services as $service)
                            <div class="group glass p-8 rounded-3xl hover:bg-white/5 transition-all duration-300 hover:-translate-y-2 border border-white/5 hover:border-accent/30 cursor-pointer"
                                data-aos="fade-up">
                                <div
                                    class="w-14 h-14 bg-gradient-to-br from-secondary to-primary rounded-2xl border border-white/10 flex items-center justify-center mb-6 text-2xl text-accent group-hover:scale-110 transition-transform duration-300 shadow-lg">
                                    {!! $service->services_icon !!}
                                </div>
                                <h3
                                    class="text-xl font-bold text-textlight mb-3 group-hover:text-accent transition-colors">
                                    {{ $service->services_name }}
                                </h3>
                                <p class="text-textsecondary text-sm leading-relaxed">
                                    {{ $service->services_des }}
                                </p>
                            </div>
                        @endforeach
                    </div>
                </a>
            </div>
        </section>

        <section id="packages" class="py-24 bg-bgdark relative packages-section">
            <div class="max-w-7xl mx-auto px-6">
                <button onclick="showServices()"
                    class="inline-flex items-center gap-2 px-4 py-2 mb-10 rounded-full bg-white/5 border border-white/10 text-textlight/80 hover:bg-white/10 transition-colors transform hover:-translate-x-1">
                    <i class="fas fa-arrow-left text-accent"></i>
                    <span class="text-sm font-medium">Back to All Services</span>
                </button>

                <div class="mb-16">
                    <h2 id="packages-title" class="text-4xl md:text-5xl font-bold text-textlight mb-3"></h2>
                    <p id="packages-description" class="text-textsecondary text-lg max-w-2xl"></p>
                </div>

                <div id="packages-grid" class="grid lg:grid-cols-3 gap-8 items-stretch">
                </div>
            </div>
        </section>

        <section class="py-20 bg-primary border-y border-white/5">
            <div class="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div data-aos="fade-up">
                    <h3 class="text-4xl md:text-5xl font-bold text-white mb-2">500+</h3>
                    <p class="text-accent text-sm font-medium uppercase tracking-wider">Projects Done</p>
                </div>
                <div data-aos="fade-up" data-aos-delay="100">
                    <h3 class="text-4xl md:text-5xl font-bold text-white mb-2">98%</h3>
                    <p class="text-accent text-sm font-medium uppercase tracking-wider">Happy Clients</p>
                </div>
                <div data-aos="fade-up" data-aos-delay="200">
                    <h3 class="text-4xl md:text-5xl font-bold text-white mb-2">12+</h3>
                    <p class="text-accent text-sm font-medium uppercase tracking-wider">Years Exp.</p>
                </div>
                <div data-aos="fade-up" data-aos-delay="300">
                    <h3 class="text-4xl md:text-5xl font-bold text-white mb-2">24/7</h3>
                    <p class="text-accent text-sm font-medium uppercase tracking-wider">Support</p>
                </div>
            </div>
        </section>

        <section id="portfolio" class="py-28 bg-bgdark">
            <div class="max-w-7xl mx-auto px-6">
                <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6" data-aos="fade-up">
                    <div>
                        <span class="text-accent font-bold tracking-wider text-sm uppercase">Selected Works</span>
                        <h2 class="text-3xl md:text-5xl font-bold text-textlight mt-2">Our Recent <br> Masterpieces</h2>
                    </div>
                    <a href="#"
                        class="group flex items-center gap-2 text-textlight hover:text-accent transition-colors">
                        View all projects <i
                            class="fas fa-arrow-right transform group-hover:translate-x-1 transition-transform"></i>
                    </a>
                </div>

                <div class="grid md:grid-cols-2 gap-8">
                    @foreach ($projects as $project)
                        <div class="group relative rounded-3xl overflow-hidden cursor-pointer h-[400px] mt-0 md:mt-12"
                            data-aos="fade-up" data-aos-delay="100">
                            <img src="{{ $project->image_url }}" alt="Project 2"
                                class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-primary/90 via-primary/40 to-transparent opacity-100 transition-opacity duration-300">
                            </div>
                            <div
                                class="absolute bottom-0 left-0 p-8 w-full translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                                <div class="flex justify-between items-end">
                                    <div>

                                        <h3 class="text-2xl font-bold text-white mb-2">{{ $project->project_title }}</h3>
                                        <p
                                            class="text-textsecondary text-sm max-w-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
                                            {{ $project->project_des }}
                                        </p>
                                    </div>
                                    <span
                                        class="w-12 h-12 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white group-hover:bg-accent group-hover:text-primary transition-all duration-300">
                                        <a href="{{ $project->web_url }}" target="_blank" class="inline-block">
                                            <i class="fas fa-arrow-up transform rotate-45"></i>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <section id="contact" class="py-28 relative overflow-hidden">
            <div
                class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-secondary/20 rounded-full blur-[120px] -z-10">
            </div>

            <div class="max-w-4xl mx-auto px-6">
                <div class="glass rounded-[3rem] p-8 md:p-16 border border-white/10 text-center" data-aos="zoom-in">
                    <h2 class="text-3xl md:text-5xl font-bold text-textlight mb-6">Ready to Scale?</h2>
                    <p class="text-textsecondary text-lg mb-10 max-w-xl mx-auto">Let's turn your idea into a digital
                        reality. Reach out to us for a free consultation.</p>

                    <form class="space-y-4 max-w-lg mx-auto text-left" action="{{ route('order.create') }}"
                        method="POST">
                        @csrf
                        <div class="grid md:grid-cols-2 gap-4">
                            <input type="text" placeholder="Name" name="name"
                                class="w-full bg-primary/50 border border-white/10 rounded-xl px-5 py-4 text-white placeholder-textsecondary/50 focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all">
                            <input type="email" placeholder="Email" name="email"
                                class="w-full bg-primary/50 border border-white/10 rounded-xl px-5 py-4 text-white placeholder-textsecondary/50 focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all">
                        </div>
                        <textarea rows="4" placeholder="Your Message" name="massage"
                            class="w-full bg-primary/50 border border-white/10 rounded-xl px-5 py-4 text-white placeholder-textsecondary/50 focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-all resize-none"></textarea>

                        <button type="submit"
                            class="w-full bg-accent text-primary font-bold py-4 rounded-xl hover:bg-white hover:shadow-lg hover:shadow-accent/25 transition-all duration-300 transform active:scale-[0.98]">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </section>

        {{-- Global footer Component --}}
        @include('components.footer')

        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    </body>
@endsection