@extends('layouts.public')

@section('title', 'WebSparkIT | Best Web Design Company Sri Lanka')
@section('meta_description', 'Looking for the best web design company in Sri Lanka? We provide top-tier web design and web development Sri Lanka to grow your business.')
@section('meta_keywords', 'web design sri lanka, web development sri lanka, best web design company sri lanka, website design sri lanka')

@push('styles')
<style>
    @keyframes float {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(2deg); }
    }
    @keyframes float-delayed {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-15px) rotate(-2deg); }
    }
    @keyframes twinkle {
        0%, 100% { opacity: 0.2; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.2); }
    }
    @keyframes slide-up {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes slide-left {
        from { opacity: 0; transform: translateX(40px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slide-right {
        from { opacity: 0; transform: translateX(-40px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 20px rgba(255, 109, 40, 0.3); }
        50% { box-shadow: 0 0 40px rgba(255, 109, 40, 0.6); }
    }
    @keyframes orbit {
        from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
        to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
    }
    @keyframes orbit-reverse {
        from { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
        to { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    }
    @keyframes gradient-shift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    @keyframes shimmer {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }

    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-delayed { animation: float-delayed 7s ease-in-out infinite; }
    .animate-twinkle { animation: twinkle 3s ease-in-out infinite; }
    .animate-twinkle-delayed { animation: twinkle 4s ease-in-out 1.5s infinite; }
    .animate-twinkle-slow { animation: twinkle 5s ease-in-out 3s infinite; }
    .animate-slide-up { animation: slide-up 0.8s ease-out forwards; }
    .animate-slide-left { animation: slide-left 0.8s ease-out forwards; }
    .animate-slide-right { animation: slide-right 0.8s ease-out forwards; }
    .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
    .animate-orbit { animation: orbit 12s linear infinite; }
    .animate-orbit-reverse { animation: orbit-reverse 8s linear infinite; }
    .animate-shimmer { background-size: 200% auto; animation: shimmer 3s linear infinite; }

    .animate-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.7s ease-out;
    }
    .animate-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .glass-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        transition: all 0.4s ease;
    }
    .glass-card:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 109, 40, 0.3);
        transform: translateY(-5px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .gradient-text {
        background: linear-gradient(135deg, #FF6D28, #FF8A50, #FF6D28);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shimmer 3s linear infinite;
    }

    .hero-gradient {
        background: radial-gradient(ellipse at 30% 50%, rgba(255, 109, 40, 0.08) 0%, transparent 60%),
                    radial-gradient(ellipse at 70% 50%, rgba(11, 36, 71, 0.5) 0%, transparent 60%);
    }

    .star {
        position: absolute;
        border-radius: 50%;
        background: white;
    }

    .service-icon {
        background: linear-gradient(135deg, rgba(255, 109, 40, 0.15), rgba(255, 109, 40, 0.05));
        transition: all 0.3s ease;
    }
    .glass-card:hover .service-icon {
        background: linear-gradient(135deg, #FF6D28, #e5530b);
        transform: scale(1.1);
    }
    .glass-card:hover .service-icon svg {
        color: white !important;
    }
</style>
@endpush

@section('content')

{{-- ============================================================ --}}
{{-- HERO SECTION - Spaceship style dark animated hero               --}}
{{-- ============================================================ --}}
<section class="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-b from-navy-dark via-navy to-navy-dark">
    {{-- Animated Stars Background --}}
    <div class="absolute inset-0 overflow-hidden">
        <div class="star w-1 h-1 top-[10%] left-[15%] animate-twinkle" style="background: #FF6D28;"></div>
        <div class="star w-1.5 h-1.5 top-[20%] left-[45%] animate-twinkle-delayed"></div>
        <div class="star w-1 h-1 top-[30%] left-[75%] animate-twinkle-slow"></div>
        <div class="star w-2 h-2 top-[15%] left-[85%] animate-twinkle" style="background: #FF6D28;"></div>
        <div class="star w-1 h-1 top-[40%] left-[25%] animate-twinkle-delayed"></div>
        <div class="star w-1.5 h-1.5 top-[55%] left-[60%] animate-twinkle-slow"></div>
        <div class="star w-1 h-1 top-[70%] left-[35%] animate-twinkle"></div>
        <div class="star w-1 h-1 top-[80%] left-[80%] animate-twinkle-delayed"></div>
        <div class="star w-2 h-2 top-[85%] left-[10%] animate-twinkle-slow" style="background: #FF6D28;"></div>
        <div class="star w-1 h-1 top-[90%] left-[55%] animate-twinkle"></div>
        <div class="star w-1.5 h-1.5 top-[45%] left-[90%] animate-twinkle-delayed"></div>
        <div class="star w-1 h-1 top-[60%] left-[5%] animate-twinkle-slow"></div>
        <div class="star w-1 h-1 top-[75%] left-[50%] animate-twinkle" style="background: #FF6D28;"></div>
        <div class="star w-1.5 h-1.5 top-[5%] left-[55%] animate-twinkle-delayed"></div>
    </div>

    {{-- Orbiting Orbs --}}
    <div class="absolute top-1/3 right-[10%] w-64 h-64">
        <div class="absolute inset-0 animate-orbit">
            <div class="w-4 h-4 rounded-full bg-orange/30 blur-sm"></div>
        </div>
        <div class="absolute inset-0 animate-orbit-reverse">
            <div class="w-3 h-3 rounded-full bg-orange/20 blur-sm"></div>
        </div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            {{-- Left Content --}}
            <div class="space-y-8">
                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-orange/30 bg-orange/5 text-orange text-sm font-medium animate-slide-up">
                    <span class="w-2 h-2 rounded-full bg-orange animate-pulse-glow"></span>
                    #1 Web Design Company in Sri Lanka
                </div>

                <h1 class="text-5xl sm:text-6xl lg:text-7xl font-extrabold leading-tight text-white animate-slide-up" style="animation-delay: 0.1s;">
                    Launch Your
                    <br>
                    <span class="gradient-text">Digital Presence</span>
                    <br>
                    To New Heights
                </h1>

                <p class="text-lg sm:text-xl text-gray-400 max-w-xl leading-relaxed animate-slide-up" style="animation-delay: 0.2s;">
                    We craft stunning websites, powerful e-commerce solutions, and data-driven SEO strategies that propel your business forward in the digital universe.
                </p>

                <div class="flex flex-wrap gap-4 animate-slide-up" style="animation-delay: 0.3s;">
                    <a href="/contact" class="group relative inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-orange to-orange-dark text-white rounded-xl font-bold text-lg transition-all duration-300 hover:shadow-2xl hover:shadow-orange/30 hover:scale-105">
                        Launch Your Project
                        <svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                        </svg>
                    </a>
                    <a href="/services" class="inline-flex items-center gap-2 px-8 py-4 border border-white/20 text-white rounded-xl font-bold text-lg transition-all duration-300 hover:bg-white/5 hover:border-white/40 glass-card">
                        Explore Services
                    </a>
                </div>

                {{-- Stats --}}
                <div class="grid grid-cols-3 gap-8 pt-8 border-t border-white/10 animate-slide-up" style="animation-delay: 0.4s;">
                    <div>
                        <p class="text-3xl font-bold text-white">50+</p>
                        <p class="text-sm text-gray-500">Projects Delivered</p>
                    </div>
                    <div>
                        <p class="text-3xl font-bold text-white">30+</p>
                        <p class="text-sm text-gray-500">Happy Clients</p>
                    </div>
                    <div>
                        <p class="text-3xl font-bold text-orange">5+</p>
                        <p class="text-sm text-gray-500">Years Experience</p>
                    </div>
                </div>
            </div>

            {{-- Right Content - Animated Illustration --}}
            <div class="hidden lg:flex items-center justify-center animate-slide-left" style="animation-delay: 0.3s;">
                <div class="relative w-full max-w-md aspect-square">
                    {{-- Central Rocket/Icon --}}
                    <div class="absolute inset-0 flex items-center justify-center animate-float">
                        <div class="w-40 h-40 rounded-3xl bg-gradient-to-br from-orange to-orange-dark flex items-center justify-center shadow-2xl shadow-orange/20 animate-pulse-glow">
                            <svg class="w-20 h-20 text-white" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/>
                            </svg>
                        </div>
                    </div>
                    {{-- Orbiting circles --}}
                    <div class="absolute inset-0 animate-orbit" style="animation-duration: 15s;">
                        <div class="w-16 h-16 rounded-xl bg-navy-light/50 border border-white/10 flex items-center justify-center glass-card" style="transform: translate(80px, -80px);">
                            <svg class="w-8 h-8 text-orange" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"/></svg>
                        </div>
                    </div>
                    <div class="absolute inset-0 animate-orbit-reverse" style="animation-duration: 20s;">
                        <div class="w-14 h-14 rounded-xl bg-navy-light/30 border border-white/10 flex items-center justify-center glass-card" style="transform: translate(-90px, 60px);">
                            <svg class="w-7 h-7 text-blue-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Scroll indicator --}}
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-float">
        <div class="flex flex-col items-center gap-2 text-white/30">
            <span class="text-xs uppercase tracking-widest">Scroll</span>
            <svg class="w-4 h-4 animate-float" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
            </svg>
        </div>
    </div>
</section>

{{-- ============================================================ --}}
{{-- SERVICES SECTION - Glass morphism cards with hover animations --}}
{{-- ============================================================ --}}
<section class="relative py-32 bg-gradient-to-b from-navy-dark via-navy to-navy-dark overflow-hidden">
    <div class="absolute inset-0">
        <div class="star w-1 h-1 top-[15%] right-[20%] animate-twinkle-slow"></div>
        <div class="star w-1.5 h-1.5 top-[60%] left-[10%] animate-twinkle-delayed"></div>
        <div class="star w-1 h-1 top-[80%] right-[40%] animate-twinkle"></div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16 animate-on-scroll">
            <span class="text-orange font-semibold text-sm uppercase tracking-widest">What We Do</span>
            <h2 class="text-4xl sm:text-5xl font-bold text-white mt-4">
                Everything You Need to <span class="gradient-text">Succeed Online</span>
            </h2>
            <p class="text-gray-400 text-lg mt-4 max-w-2xl mx-auto">
                From stunning designs to powerful development, we provide end-to-end digital solutions.
            </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            @php
                $services = [
                    ['icon' => 'M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z', 'title' => 'Custom Website Design', 'desc' => 'Tailor-made websites crafted to your brand identity, delivering stunning user experiences that captivate your audience.'],
                    ['icon' => 'M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125', 'title' => 'Web Development', 'desc' => 'Robust backend systems and seamless frontends built by expert developers using the latest technologies.'],
                    ['icon' => 'M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605', 'title' => 'E-Commerce Solutions', 'desc' => 'Powerful online stores with seamless checkout, inventory management, and mobile-optimized shopping experiences.'],
                    ['icon' => 'M10.5 21l5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 016-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 01-3.827-5.802', 'title' => 'SEO & Digital Marketing', 'desc' => 'Data-driven strategies to boost your visibility, drive traffic, and convert visitors into loyal customers.'],
                    ['icon' => 'M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418', 'title' => 'Domain & Hosting', 'desc' => 'Reliable domain registration, hosting solutions, and SSL certificates to keep your site secure and fast.'],
                    ['icon' => 'M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z', 'title' => 'Maintenance & Support', 'desc' => 'Ongoing support, updates, and maintenance to keep your website running smoothly and securely.']
                ];
            @endphp

            @foreach($services as $i => $service)
                <div class="glass-card rounded-2xl p-8 animate-on-scroll" style="transition-delay: {{ $i * 0.1 }}s">
                    <div class="service-icon w-14 h-14 rounded-xl flex items-center justify-center mb-6">
                        <svg class="w-7 h-7 text-orange transition-colors" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="{{ $service['icon'] }}"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">{{ $service['title'] }}</h3>
                    <p class="text-gray-400 leading-relaxed">{{ $service['desc'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ============================================================ --}}
{{-- CTA SECTION                                                  --}}
{{-- ============================================================ --}}
<section class="relative py-32 overflow-hidden bg-navy-dark">
    <div class="absolute inset-0 hero-gradient"></div>
    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="animate-on-scroll">
            <h2 class="text-4xl sm:text-5xl font-bold text-white mb-6">
                Ready to <span class="gradient-text">Launch</span> Your Project?
            </h2>
            <p class="text-lg text-gray-400 mb-10 max-w-2xl mx-auto">
                Let's discuss your vision and create something extraordinary together. Your digital transformation starts here.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="/contact" class="group inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-orange to-orange-dark text-white rounded-xl font-bold text-lg transition-all duration-300 hover:shadow-2xl hover:shadow-orange/30 hover:scale-105">
                    Start Your Journey
                    <svg class="w-5 h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                    </svg>
                </a>
                <a href="/pricing" class="inline-flex items-center gap-2 px-8 py-4 border border-white/20 text-white rounded-xl font-bold text-lg transition-all duration-300 hover:bg-white/5 hover:border-white/40 glass-card">
                    View Pricing
                </a>
            </div>
        </div>
    </div>
</section>

{{-- ============================================================ --}}
{{-- SCROLL ANIMATIONS SCRIPT                                     --}}
{{-- ============================================================ --}}
<script>
(function() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, { threshold: 0.1 });

    document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
})();
</script>

@endsection