<template>
    <div>
        <Head title="Services" />
        <!-- Start Hero -->
        <section class="relative flex items-center overflow-hidden bg-slate-950 py-24 lg:py-32">
            <!-- Animated Background -->
            <div class="absolute inset-0">
                <div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(56,189,248,0.22),transparent_30%),radial-gradient(circle_at_80%_0%,rgba(99,102,241,0.32),transparent_35%),radial-gradient(circle_at_50%_100%,rgba(14,165,233,0.16),transparent_38%)]"></div>
                <div class="absolute inset-0 bg-gradient-to-b from-slate-900/70 via-slate-900/30 to-slate-950"></div>

                <!-- Animated Grid -->
                <div class="absolute inset-0 opacity-30">
                    <div class="absolute inset-0 bg-grid-pattern bg-center bg-repeat" style="background-image: url('/images/patterns/grid.svg'); mask-image: radial-gradient(ellipse at center, white, transparent 70%);"></div>
                </div>

                <!-- Floating Orbs -->
                <div class="absolute top-1/4 left-1/4 w-72 h-72 bg-primary-500/20 rounded-full blur-3xl animate-pulse"></div>
                <div class="absolute top-1/3 right-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
                <div class="absolute bottom-1/4 left-1/3 w-64 h-64 bg-purple-500/15 rounded-full blur-3xl animate-pulse delay-500"></div>

                <!-- Geometric Shapes -->
                <div class="absolute top-20 left-20 w-4 h-4 bg-white/30 rotate-45 animate-spin"></div>
                <div class="absolute top-40 right-32 w-6 h-6 bg-primary-300/40 rounded-full animate-ping"></div>
                <div class="absolute bottom-32 left-16 w-3 h-3 bg-blue-300/50 rotate-12 animate-bounce"></div>
            </div>

            <div class="container relative z-10 py-16">
                <div class="text-center max-w-4xl mx-auto">
                    <!-- Trust Badge -->
                    <div class="inline-flex items-center gap-2 px-4 py-2 mb-8 text-sm font-medium text-white bg-white/10 rounded-full border border-white/20 shadow-lg" style="backdrop-filter: blur(12px);">
                        <Star class="w-4 h-4 text-yellow-300" />
                        <span>{{ hero.badge }}</span>
                    </div>

                    <!-- Main Heading -->
                    <h1 class="mb-6 text-5xl font-bold leading-[1.05] text-white sm:text-6xl lg:text-7xl">
                        {{ hero.title || $t('Services') }}
                    </h1>

                    <!-- Subtitle -->
                    <p class="mb-10 text-xl leading-relaxed text-white/80 sm:text-2xl max-w-3xl mx-auto">
                        {{ hero.subtitle }}
                    </p>

                    <!-- CTA Buttons -->
                    <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
                        <a :href="hero.primary_button_link" class="group relative inline-flex items-center justify-center gap-3 px-8 py-4 text-lg font-semibold text-slate-900 bg-white border border-white rounded-2xl transition-all duration-300 hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-30">
                            <span>{{ hero.primary_button_text }}</span>
                            <ArrowDown class="w-5 h-5 transition-transform group-hover:translate-y-1" />
                        </a>
                        <a :href="hero.secondary_button_link" class="group relative inline-flex items-center justify-center gap-3 px-8 py-4 text-lg font-semibold text-white bg-white/15 border border-white/20 hover:bg-white hover:text-slate-900 rounded-2xl transition-all duration-300 hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-primary-300" style="backdrop-filter: blur(12px);">
                            <span>{{ hero.secondary_button_text }}</span>
                            <ArrowRight class="w-5 h-5 transition-transform group-hover:translate-x-1" />
                        </a>
                    </div>

                    <!-- Trust Indicators -->
                    <div class="flex flex-wrap items-center justify-center gap-8 text-white/70">
                        <div class="flex items-center gap-2">
                            <CheckCircle class="w-4 h-4 text-green-400" />
                            <span class="text-sm font-medium">{{ hero.trust_one }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <CheckCircle class="w-4 h-4 text-green-400" />
                            <span class="text-sm font-medium">{{ hero.trust_two }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <CheckCircle class="w-4 h-4 text-green-400" />
                            <span class="text-sm font-medium">{{ hero.trust_three }}</span>
                        </div>
                    </div>
                    <div class="mt-8 flex flex-wrap justify-center gap-3">
                        <span class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-white/10 text-white border border-white/10">Implementation Services</span>
                        <span class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-white/10 text-white border border-white/10">Workflow Optimization</span>
                        <span class="inline-flex items-center px-3 py-1 text-xs font-semibold rounded-full bg-white/10 text-white border border-white/10">Support Operations Advisory</span>
                    </div>
                </div>
            </div>

            <!-- Scroll Indicator -->
            <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
                <div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
                    <div class="w-1 h-3 bg-white/50 rounded-full mt-2 animate-pulse"></div>
                </div>
            </div>
        </section>
        <!-- End Hero -->

        <!-- ====== Services Section Start -->
        <section id="services" class="relative py-24 lg:py-32 bg-gradient-to-b from-slate-50 via-white to-slate-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
            <!-- Background Elements -->
            <div class="absolute inset-0 overflow-hidden">
                <div class="absolute top-0 left-0 w-full h-full opacity-5" style="background-image: url('/images/patterns/grid.svg'); background-position: center; background-repeat: repeat;"></div>
                <div class="absolute top-1/4 right-0 w-96 h-96 bg-primary-500/10 rounded-full blur-3xl"></div>
                <div class="absolute bottom-1/4 left-0 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
            </div>

            <div class="container relative z-10">
                <!-- Section Header -->
                <div class="text-center mb-20">
                    <div class="inline-flex items-center gap-2 px-4 py-2 mb-6 text-sm font-semibold text-primary bg-primary/10 rounded-full border border-primary/20">
                        <Star class="w-4 h-4 text-primary" />
                        {{ servicesSection.badge }}
                    </div>
                    <h2 class="mb-6 text-4xl font-bold text-slate-900 dark:text-white sm:text-5xl lg:text-6xl">
                        {{ servicesSection.title }}
                    </h2>
                    <p class="text-xl leading-relaxed text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
                        {{ servicesSection.subtitle }}
                    </p>
                </div>

                <!-- Services Grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <Link v-for="(service, si) in services" :key="service.id"
                         :href="route('services.details', service.slug)"
                         class="group relative bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border border-slate-100 dark:border-slate-700 overflow-hidden">

                        <!-- Background Gradient -->
                        <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

                        <!-- Icon Container -->
                        <div class="relative mb-6">
                            <div class="inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-110 group-hover:rotate-3">
                                <component :is="getServiceIcon(service.icon)" class="w-8 h-8 text-white" />
                            </div>
                            <!-- Decorative Elements -->
                            <div class="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 animate-pulse"></div>
                            <div class="absolute -bottom-1 -left-1 w-3 h-3 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-500 animate-ping"></div>
                        </div>

                        <!-- Content -->
                        <div class="relative z-10">
                            <p class="text-xs font-semibold uppercase tracking-wider text-primary-600 dark:text-primary-400 mb-2">Service {{ si + 1 }}</p>
                            <h4 class="mb-4 text-xl font-bold text-slate-900 dark:text-white group-hover:text-primary-600 transition-colors duration-300">
                                {{ service.title }}
                            </h4>
                            <p class="text-slate-600 dark:text-slate-300 leading-relaxed mb-6">
                                {{ getServiceExcerpt(service.details, 110) }}
                            </p>

                            <!-- Learn More Link -->
                            <div class="flex items-center text-primary-600 font-semibold group-hover:text-primary-700 transition-colors duration-300">
                                <span class="text-sm">{{ servicesSection.learn_more_text }}</span>
                                <ArrowRight class="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
                            </div>
                        </div>

                        <!-- Hover Border Effect -->
                        <div class="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-primary/20 transition-all duration-300"></div>
                    </Link>
                </div>

                <!-- CTA Section -->
                <div class="text-center mt-20">
                    <div class="bg-gradient-to-r from-slate-900 via-primary-900 to-slate-900 rounded-3xl p-12 text-white border border-white/10 shadow-2xl">
                        <h3 class="text-3xl font-bold mb-4">{{ cta.title }}</h3>
                        <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
                            {{ cta.subtitle }}
                        </p>
                        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <a :href="cta.primary_button_link" class="inline-flex items-center gap-3 px-8 py-4 bg-white text-primary-600 font-semibold rounded-2xl hover:bg-white/90 transition-all duration-300 hover:scale-105 hover:shadow-xl">
                                <span>{{ cta.primary_button_text }}</span>
                                <ArrowRight class="w-5 h-5" />
                            </a>
                            <a :href="cta.secondary_button_link" class="inline-flex items-center gap-3 px-8 py-4 bg-white/20 text-white font-semibold rounded-2xl hover:bg-white/30 transition-all duration-300 hover:scale-105" style="backdrop-filter: blur(12px);">
                                <span>{{ cta.secondary_button_text }}</span>
                                <Info class="w-5 h-5" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ====== Services Section End -->

    </div>
</template>
<script>
import Layout from '@/Shared/Landing/Layout.vue'
import { parsePageHtml } from '@/utils/parsePageHtml'
import { Head, Link } from '@inertiajs/vue3'
import {
    Star,
    CheckCircle,
    ArrowRight,
    ArrowDown,
    Info,
    Settings,
    Shield,
    Zap,
    Users,
    BarChart3,
    Clock,
    Headphones,
    Globe,
    Lock,
    Smartphone,
    Mail,
    Phone,
    HelpCircle,
    MessageSquare,
    Calendar,
    Bell,
    Search,
    Filter,
    Download,
    Share,
    Edit,
    Plus,
    Minus,
    X,
    Check,
    AlertCircle,
    ExternalLink,
    FileText,
    MessageCircle,
    Ticket,
    User
} from 'lucide-vue-next'
import {
    ComputerDesktopIcon,
    MapIcon,
    CameraIcon,
    SparklesIcon,
    ShieldCheckIcon,
    SwatchIcon,
    WrenchScrewdriverIcon,
    UserGroupIcon
} from '@heroicons/vue/24/outline'

export default {
    layout: Layout,
    components: {
        Head,
        Link,
        Star,
        CheckCircle,
        ArrowRight,
        ArrowDown,
        Info,
        Settings,
        Shield,
        Zap,
        Users,
        BarChart3,
        Clock,
        Headphones,
        Globe,
        Lock,
        Smartphone,
        Mail,
        Phone,
        HelpCircle,
        MessageSquare,
        Calendar,
        Bell,
        Search,
        Filter,
        Download,
        Share,
        Edit,
        Plus,
        Minus,
        X,
        Check,
        AlertCircle,
        ExternalLink,
        FileText,
        MessageCircle,
        Ticket,
        User,
        ComputerDesktopIcon,
        MapIcon,
        CameraIcon,
        SparklesIcon,
        ShieldCheckIcon,
        SwatchIcon,
        WrenchScrewdriverIcon,
        UserGroupIcon
    },
    props: {
        data: Object,
        services: Array,
    },
    data() {
        return {
            page: parsePageHtml(this.data?.html),
        }
    },
    computed: {
        hero() {
            return {
                badge: this.page?.hero?.badge || 'Professional Services',
                title: this.page?.hero?.title || 'Services',
                subtitle: this.page?.hero?.subtitle || 'Discover our comprehensive range of professional services designed to help your business thrive and succeed in today\'s competitive landscape.',
                primary_button_text: this.page?.hero?.primary_button_text || 'Explore Services',
                primary_button_link: this.page?.hero?.primary_button_link || '#services',
                secondary_button_text: this.page?.hero?.secondary_button_text || 'Get Started',
                secondary_button_link: this.page?.hero?.secondary_button_link || '/contact',
                trust_one: this.page?.hero?.trust_one || 'Expert Team',
                trust_two: this.page?.hero?.trust_two || '24/7 Support',
                trust_three: this.page?.hero?.trust_three || 'Proven Results',
            }
        },
        servicesSection() {
            return {
                badge: this.page?.services_section?.badge || 'Our Services',
                title: this.page?.services_section?.title || 'What We Offer',
                subtitle: this.page?.services_section?.subtitle || 'We provide comprehensive solutions tailored to meet your business needs and drive success.',
                learn_more_text: this.page?.services_section?.learn_more_text || 'Learn More',
            }
        },
        cta() {
            return {
                title: this.page?.cta?.title || 'Ready to Get Started?',
                subtitle: this.page?.cta?.subtitle || 'Let\'s discuss how our services can help your business grow and succeed.',
                primary_button_text: this.page?.cta?.primary_button_text || 'Contact Us',
                primary_button_link: this.page?.cta?.primary_button_link || '/contact',
                secondary_button_text: this.page?.cta?.secondary_button_text || 'Learn More',
                secondary_button_link: this.page?.cta?.secondary_button_link || '/',
            }
        },
    },
    methods: {
        getServiceExcerpt(details, maxLength = 110) {
            const plainText = (details || '').replace(/<[^>]*>/g, '').trim()
            if (plainText.length <= maxLength) {
                return plainText
            }
            return `${plainText.substring(0, maxLength).trim()}...`
        },
        getServiceIcon(iconName) {
            const key = (iconName || '').toString().trim().toLowerCase()
            const iconMap = {
                airplay: ComputerDesktopIcon,
                compass: MapIcon,
                camera: CameraIcon,
                aperture: SparklesIcon,
                security: ShieldCheckIcon,
                palette: SwatchIcon,
                settings: WrenchScrewdriverIcon,
                users: UserGroupIcon,
            }

            return iconMap[key] || WrenchScrewdriverIcon
        },
    },
}
</script>
