import { Head, Link } from '@inertiajs/react';
import Layout from '@/Components/Layout';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    ArrowLeft,
    CheckCircle2,
    Sparkles,
    ArrowRight,
    Zap,
    Clock,
    Target,
    Users,
    Rocket,
    Award,
    TrendingUp,
    Shield,
    BarChart3,
    Settings,
    Package,
    Workflow,
    FileCode,
    BookOpen,
    UserCheck,
    Palette,
    Server,
    ClipboardList,
    GraduationCap,
    LifeBuoy,
    Cloud,
    Database,
    Smartphone,
    Layers,
    Code2,
    Cpu,
    Wrench,
    type LucideIcon
} from 'lucide-react';

interface ServiceFeature {
    id: number;
    service_id: number;
    icon: string;
    title: string;
    text: string;
}

interface Service {
    id: number;
    slug: string;
    icon: string;
    title: string;
    short: string;
    body: string;
    featured: boolean;
    features: ServiceFeature[];
}

interface Props {
    service: Service;
}

// Map a tech category name to a relevant icon + gradient color
function pickTechIcon(name: string): { icon: LucideIcon; color: string } {
    const n = name.toLowerCase();
    if (n.includes('frontend') || n.includes('design tool')) return { icon: Palette, color: 'from-pink-500 to-rose-500' };
    if (n.includes('backend')) return { icon: Server, color: 'from-emerald-500 to-teal-500' };
    if (n.includes('cloud') || n.includes('infrastructure')) return { icon: Cloud, color: 'from-blue-500 to-cyan-500' };
    if (n.includes('database')) return { icon: Database, color: 'from-amber-500 to-orange-500' };
    if (n.includes('devops') || n.includes('agile')) return { icon: Workflow, color: 'from-purple-500 to-pink-500' };
    if (n.includes('cms') || n.includes('platform')) return { icon: Layers, color: 'from-indigo-500 to-purple-500' };
    if (n.includes('performance') || n.includes('analytics')) return { icon: BarChart3, color: 'from-cyan-500 to-blue-500' };
    if (n.includes('payment')) return { icon: Award, color: 'from-emerald-500 to-green-500' };
    if (n.includes('inventory')) return { icon: Package, color: 'from-orange-500 to-amber-500' };
    if (n.includes('cross-platform') || n.includes('native')) return { icon: Smartphone, color: 'from-violet-500 to-purple-500' };
    if (n.includes('backend services') || n.includes('deploy')) return { icon: Cpu, color: 'from-blue-600 to-indigo-600' };
    if (n.includes('prototyping') || n.includes('graphics')) return { icon: Palette, color: 'from-rose-500 to-pink-500' };
    if (n.includes('collaboration') || n.includes('communication')) return { icon: Users, color: 'from-emerald-500 to-teal-500' };
    if (n.includes('project management')) return { icon: ClipboardList, color: 'from-blue-500 to-cyan-500' };
    if (n.includes('version control')) return { icon: Code2, color: 'from-slate-500 to-gray-600' };
    return { icon: Wrench, color: 'from-primary to-blue-600' };
}

export default function ServicesShow({ service }: Props) {
    // Get technologies based on service slug
    const getTechnologies = () => {
        const techMap: Record<string, Array<{ name: string; desc: string }>> = {
            'website-design': [
                { name: 'Frontend Frameworks', desc: 'React, Vue.js, Next.js, Tailwind CSS' },
                { name: 'Design Tools', desc: 'Figma, Adobe XD, Sketch' },
                { name: 'CMS Platforms', desc: 'WordPress, Webflow, Contentful' },
                { name: 'Performance', desc: 'Lighthouse, PageSpeed, CDN' },
            ],
            'web-application': [
                { name: 'Backend Frameworks', desc: 'Laravel, Django, Node.js, Express' },
                { name: 'Cloud Infrastructure', desc: 'AWS, Azure, Google Cloud' },
                { name: 'Database Systems', desc: 'MySQL, PostgreSQL, MongoDB' },
                { name: 'DevOps Tools', desc: 'Docker, Kubernetes, CI/CD' },
            ],
            'ecommerce-website-development': [
                { name: 'E-Commerce Platforms', desc: 'Shopify, WooCommerce, Magento' },
                { name: 'Payment Gateways', desc: 'Stripe, PayPal, SSLCommerz' },
                { name: 'Inventory Systems', desc: 'TradeGecko, Odoo, Custom ERP' },
                { name: 'Analytics & SEO', desc: 'Google Analytics, SEMrush, Hotjar' },
            ],
            'mobile-apps-development': [
                { name: 'Cross-Platform', desc: 'React Native, Flutter, Ionic' },
                { name: 'Native Development', desc: 'Swift (iOS), Kotlin (Android)' },
                { name: 'Backend Services', desc: 'Firebase, AWS Amplify, Node.js' },
                { name: 'App Deployment', desc: 'App Store, Google Play, TestFlight' },
            ],
            'ui-ux-design': [
                { name: 'Design Tools', desc: 'Figma, Adobe XD, Sketch, InVision' },
                { name: 'Prototyping', desc: 'Framer, Principle, ProtoPie' },
                { name: 'Graphics Suite', desc: 'Illustrator, Photoshop, After Effects' },
                { name: 'Collaboration', desc: 'Miro, FigJam, Abstract' },
            ],
            'team-augmentation': [
                { name: 'Project Management', desc: 'Jira, Trello, Asana, Monday.com' },
                { name: 'Communication', desc: 'Slack, Microsoft Teams, Zoom' },
                { name: 'Version Control', desc: 'Git, GitHub, GitLab, Bitbucket' },
                { name: 'Agile Tools', desc: 'Scrum boards, Sprint planning, Retrospectives' },
            ],
        };

        // Return service-specific tech or default
        return techMap[service.slug] || [
            { name: 'Modern Frameworks', desc: 'React, Vue, Laravel, Node.js' },
            { name: 'Cloud Infrastructure', desc: 'AWS, Azure, Google Cloud' },
            { name: 'Database Systems', desc: 'MySQL, PostgreSQL, MongoDB' },
            { name: 'DevOps Tools', desc: 'Docker, Kubernetes, CI/CD' },
        ];
    };

    return (
        <Layout>
            <Head title={service.title} />

            {/* Hero Section - Light Compact */}
            <section className="relative bg-gradient-to-br from-slate-50 via-white to-blue-50/40 py-16 overflow-hidden border-b border-slate-100">
                {/* Subtle Mesh Gradient Background */}
                <div className="absolute inset-0 overflow-hidden">
                    <div className="absolute -top-40 -left-40 w-[500px] h-[500px] bg-primary/15 rounded-full filter blur-3xl" />
                    <div className="absolute top-10 -right-40 w-[500px] h-[500px] bg-purple-500/15 rounded-full filter blur-3xl" />
                </div>

                {/* Grid Pattern - very subtle */}
                <div className="absolute inset-0 bg-[linear-gradient(to_right,#cbd5e10a_1px,transparent_1px),linear-gradient(to_bottom,#cbd5e10a_1px,transparent_1px)] bg-[size:48px_48px]" />

                <div className="container mx-auto px-4 relative z-10">
                    {/* Breadcrumb */}
                    <Link
                        href="/services"
                        className="inline-flex items-center gap-2 text-slate-500 hover:text-slate-900 transition-colors mb-8 group"
                    >
                        <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
                        <span className="text-sm font-medium">Back to Services</span>
                    </Link>

                    <div className="max-w-4xl">
                        {service.featured && (
                            <Badge className="mb-4 bg-gradient-to-r from-amber-500 to-orange-500 text-white border-0 px-4 py-1.5">
                                <Sparkles className="w-3 h-3 mr-1.5" />
                                Featured Service
                            </Badge>
                        )}

                        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 leading-tight mb-4">
                            {service.title}
                        </h1>

                        <p className="text-lg md:text-xl text-slate-600 leading-relaxed mb-6 max-w-3xl">
                            {service.short}
                        </p>

                        <div className="flex flex-wrap gap-3">
                            <Button
                                size="lg"
                                className="bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-500 text-white font-semibold px-6 group"
                                asChild
                            >
                                <Link href={`/order?context=service&service=${service.slug}`}>
                                    Get Started
                                    <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                                </Link>
                            </Button>
                            <Button
                                size="lg"
                                variant="outline"
                                className="bg-white border-slate-200 text-slate-700 hover:bg-slate-50 hover:text-slate-900 font-semibold px-6"
                                asChild
                            >
                                <a href="#workflow">View Process</a>
                            </Button>
                        </div>
                    </div>
                </div>
            </section>

            {/* Service Description - Enhanced */}
            <section className="py-20 bg-white">
                <div className="container mx-auto px-4">
                    <div className="max-w-4xl mx-auto">
                        <div className="mb-12 text-center">
                            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
                                Overview
                            </h2>
                            <div className="w-20 h-1 bg-gradient-to-r from-primary to-blue-600 mx-auto rounded-full" />
                        </div>

                        <div className="bg-gradient-to-br from-slate-50 to-blue-50 rounded-3xl p-8 md:p-12 shadow-lg">
                            <div 
                                className="prose prose-lg max-w-none prose-headings:text-slate-900 prose-headings:font-bold prose-p:text-slate-700 prose-p:leading-relaxed prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-slate-900 prose-ul:text-slate-700 prose-ol:text-slate-700 prose-li:marker:text-primary"
                                dangerouslySetInnerHTML={{ __html: service.body }}
                            />
                        </div>
                    </div>
                </div>
            </section>

            {/* How We Provide This Service */}
            <section className="py-20 bg-white border-t border-slate-100">
                <div className="container mx-auto px-4">
                    <div className="max-w-6xl mx-auto">
                        <div className="text-center mb-16">
                            <Badge className="mb-4 bg-emerald-500/10 text-emerald-700 border-emerald-500/20">
                                <Target className="w-3 h-3 mr-1" />
                                Our Approach
                            </Badge>
                            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
                                How We Provide This Service
                            </h2>
                            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
                                Our proven methodology ensures exceptional results every time
                            </p>
                        </div>

                        <div className="grid md:grid-cols-3 gap-8">
                            <Card className="border-0 shadow-lg hover:shadow-xl transition-all">
                                <CardContent className="p-8">
                                    <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center mb-6">
                                        <Users className="w-7 h-7 text-white" />
                                    </div>
                                    <h3 className="text-xl font-bold text-slate-900 mb-3">Dedicated Team</h3>
                                    <p className="text-slate-600 leading-relaxed">
                                        Expert professionals assigned to your project with years of industry experience and proven track record.
                                    </p>
                                </CardContent>
                            </Card>

                            <Card className="border-0 shadow-lg hover:shadow-xl transition-all">
                                <CardContent className="p-8">
                                    <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center mb-6">
                                        <BarChart3 className="w-7 h-7 text-white" />
                                    </div>
                                    <h3 className="text-xl font-bold text-slate-900 mb-3">Data-Driven Strategy</h3>
                                    <p className="text-slate-600 leading-relaxed">
                                        We analyze your requirements and market trends to create customized solutions that deliver measurable results.
                                    </p>
                                </CardContent>
                            </Card>

                            <Card className="border-0 shadow-lg hover:shadow-xl transition-all">
                                <CardContent className="p-8">
                                    <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center mb-6">
                                        <Shield className="w-7 h-7 text-white" />
                                    </div>
                                    <h3 className="text-xl font-bold text-slate-900 mb-3">Quality Assurance</h3>
                                    <p className="text-slate-600 leading-relaxed">
                                        Rigorous testing and quality checks at every stage to ensure flawless delivery and performance.
                                    </p>
                                </CardContent>
                            </Card>
                        </div>
                    </div>
                </div>
            </section>

            {/* Our Workflow Process */}
            <section id="workflow" className="py-20 bg-gradient-to-br from-slate-50 to-blue-50">
                <div className="container mx-auto px-4">
                    <div className="max-w-6xl mx-auto">
                        <div className="text-center mb-16">
                            <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">
                                <Workflow className="w-3 h-3 mr-1" />
                                Step by Step
                            </Badge>
                            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
                                Our Service Workflow
                            </h2>
                            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
                                A transparent, structured process from consultation to delivery
                            </p>
                        </div>

                        <div className="relative">
                            {/* Timeline line */}
                            <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary via-purple-500 to-cyan-500 hidden md:block" />

                            <div className="space-y-8">
                                {/* Step 1 */}
                                <div className="relative flex gap-8 items-start">
                                    <div className="hidden md:flex w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-blue-600 items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">
                                        1
                                    </div>
                                    <Card className="flex-1 border-0 shadow-lg">
                                        <CardContent className="p-6">
                                            <h3 className="text-2xl font-bold text-slate-900 mb-3">Discovery & Consultation</h3>
                                            <p className="text-slate-600 leading-relaxed mb-4">
                                                We begin with an in-depth consultation to understand your business goals, target audience, challenges, and specific requirements. This helps us create a tailored strategy.
                                            </p>
                                            <div className="flex flex-wrap gap-2">
                                                <Badge variant="secondary" className="bg-blue-100 text-blue-700">Requirements Analysis</Badge>
                                                <Badge variant="secondary" className="bg-blue-100 text-blue-700">Goal Setting</Badge>
                                                <Badge variant="secondary" className="bg-blue-100 text-blue-700">Feasibility Study</Badge>
                                            </div>
                                        </CardContent>
                                    </Card>
                                </div>

                                {/* Step 2 */}
                                <div className="relative flex gap-8 items-start">
                                    <div className="hidden md:flex w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600 items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">
                                        2
                                    </div>
                                    <Card className="flex-1 border-0 shadow-lg">
                                        <CardContent className="p-6">
                                            <h3 className="text-2xl font-bold text-slate-900 mb-3">Planning & Strategy</h3>
                                            <p className="text-slate-600 leading-relaxed mb-4">
                                                Our team creates a detailed project plan including timeline, milestones, resource allocation, and technical architecture. We present this for your approval.
                                            </p>
                                            <div className="flex flex-wrap gap-2">
                                                <Badge variant="secondary" className="bg-purple-100 text-purple-700">Project Blueprint</Badge>
                                                <Badge variant="secondary" className="bg-purple-100 text-purple-700">Timeline Creation</Badge>
                                                <Badge variant="secondary" className="bg-purple-100 text-purple-700">Resource Planning</Badge>
                                            </div>
                                        </CardContent>
                                    </Card>
                                </div>

                                {/* Step 3 */}
                                <div className="relative flex gap-8 items-start">
                                    <div className="hidden md:flex w-16 h-16 rounded-2xl bg-gradient-to-br from-emerald-500 to-emerald-600 items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">
                                        3
                                    </div>
                                    <Card className="flex-1 border-0 shadow-lg">
                                        <CardContent className="p-6">
                                            <h3 className="text-2xl font-bold text-slate-900 mb-3">Design & Development</h3>
                                            <p className="text-slate-600 leading-relaxed mb-4">
                                                This is where the magic happens. Our designers create mockups and our developers bring them to life using cutting-edge technologies and best practices.
                                            </p>
                                            <div className="flex flex-wrap gap-2">
                                                <Badge variant="secondary" className="bg-emerald-100 text-emerald-700">UI/UX Design</Badge>
                                                <Badge variant="secondary" className="bg-emerald-100 text-emerald-700">Development</Badge>
                                                <Badge variant="secondary" className="bg-emerald-100 text-emerald-700">Integration</Badge>
                                            </div>
                                        </CardContent>
                                    </Card>
                                </div>

                                {/* Step 4 */}
                                <div className="relative flex gap-8 items-start">
                                    <div className="hidden md:flex w-16 h-16 rounded-2xl bg-gradient-to-br from-orange-500 to-orange-600 items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">
                                        4
                                    </div>
                                    <Card className="flex-1 border-0 shadow-lg">
                                        <CardContent className="p-6">
                                            <h3 className="text-2xl font-bold text-slate-900 mb-3">Testing & Quality Assurance</h3>
                                            <p className="text-slate-600 leading-relaxed mb-4">
                                                Comprehensive testing across multiple devices, browsers, and scenarios to ensure everything works flawlessly. We fix bugs and optimize performance.
                                            </p>
                                            <div className="flex flex-wrap gap-2">
                                                <Badge variant="secondary" className="bg-orange-100 text-orange-700">Functionality Testing</Badge>
                                                <Badge variant="secondary" className="bg-orange-100 text-orange-700">Performance Testing</Badge>
                                                <Badge variant="secondary" className="bg-orange-100 text-orange-700">Security Audit</Badge>
                                            </div>
                                        </CardContent>
                                    </Card>
                                </div>

                                {/* Step 5 */}
                                <div className="relative flex gap-8 items-start">
                                    <div className="hidden md:flex w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500 to-cyan-600 items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">
                                        5
                                    </div>
                                    <Card className="flex-1 border-0 shadow-lg">
                                        <CardContent className="p-6">
                                            <h3 className="text-2xl font-bold text-slate-900 mb-3">Deployment & Launch</h3>
                                            <p className="text-slate-600 leading-relaxed mb-4">
                                                We deploy your solution to production environment with zero downtime. Post-launch monitoring ensures smooth operation from day one.
                                            </p>
                                            <div className="flex flex-wrap gap-2">
                                                <Badge variant="secondary" className="bg-cyan-100 text-cyan-700">Go Live</Badge>
                                                <Badge variant="secondary" className="bg-cyan-100 text-cyan-700">Monitoring Setup</Badge>
                                                <Badge variant="secondary" className="bg-cyan-100 text-cyan-700">Training</Badge>
                                            </div>
                                        </CardContent>
                                    </Card>
                                </div>

                                {/* Step 6 */}
                                <div className="relative flex gap-8 items-start">
                                    <div className="hidden md:flex w-16 h-16 rounded-2xl bg-gradient-to-br from-rose-500 to-rose-600 items-center justify-center text-white font-bold text-xl shadow-lg flex-shrink-0">
                                        6
                                    </div>
                                    <Card className="flex-1 border-0 shadow-lg">
                                        <CardContent className="p-6">
                                            <h3 className="text-2xl font-bold text-slate-900 mb-3">Support & Maintenance</h3>
                                            <p className="text-slate-600 leading-relaxed mb-4">
                                                Our relationship doesn't end at launch. We provide ongoing support, updates, and enhancements to keep your solution running at peak performance.
                                            </p>
                                            <div className="flex flex-wrap gap-2">
                                                <Badge variant="secondary" className="bg-rose-100 text-rose-700">24/7 Support</Badge>
                                                <Badge variant="secondary" className="bg-rose-100 text-rose-700">Regular Updates</Badge>
                                                <Badge variant="secondary" className="bg-rose-100 text-rose-700">Performance Optimization</Badge>
                                            </div>
                                        </CardContent>
                                    </Card>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Service Deliverables */}
            <section className="py-20 bg-white">
                <div className="container mx-auto px-4">
                    <div className="max-w-6xl mx-auto">
                        <div className="text-center mb-16">
                            <Badge className="mb-4 bg-purple-500/10 text-purple-700 border-purple-500/20">
                                <Package className="w-3 h-3 mr-1" />
                                What's Included
                            </Badge>
                            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
                                Service Deliverables
                            </h2>
                            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
                                Everything you receive as part of this service
                            </p>
                        </div>

                        <div className="grid md:grid-cols-2 gap-6">
                            {[
                                { icon: FileCode, color: 'from-blue-500 to-cyan-500', title: 'Complete Source Code', desc: 'Clean, well-documented code with proper version control' },
                                { icon: BookOpen, color: 'from-purple-500 to-pink-500', title: 'Technical Documentation', desc: 'Comprehensive guides for developers and administrators' },
                                { icon: UserCheck, color: 'from-emerald-500 to-teal-500', title: 'User Manual', desc: 'Easy-to-follow instructions for end users' },
                                { icon: Palette, color: 'from-rose-500 to-red-500', title: 'Design Assets', desc: 'All graphics, icons, and design files in editable formats' },
                                { icon: Server, color: 'from-amber-500 to-orange-500', title: 'Deployment Package', desc: 'Production-ready files with deployment instructions' },
                                { icon: ClipboardList, color: 'from-indigo-500 to-purple-500', title: 'Testing Reports', desc: 'Detailed QA reports and test case documentation' },
                                { icon: GraduationCap, color: 'from-cyan-500 to-blue-500', title: 'Training Sessions', desc: 'Live training for your team on how to use and manage' },
                                { icon: LifeBuoy, color: 'from-green-500 to-emerald-500', title: 'Support Package', desc: '30 days of free post-launch support and bug fixes' },
                            ].map((item, index) => {
                                const Icon = item.icon;
                                return (
                                    <Card key={index} className="group border-2 border-slate-100 hover:border-primary/30 transition-all hover:shadow-lg">
                                        <CardContent className="p-6 flex items-start gap-4">
                                            <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${item.color} flex items-center justify-center flex-shrink-0 shadow-md group-hover:scale-110 transition-transform`}>
                                                <Icon className="w-6 h-6 text-white" />
                                            </div>
                                            <div>
                                                <h3 className="font-bold text-slate-900 mb-2">{item.title}</h3>
                                                <p className="text-slate-600 text-sm">{item.desc}</p>
                                            </div>
                                        </CardContent>
                                    </Card>
                                );
                            })}
                        </div>
                    </div>
                </div>
            </section>

            {/* Technologies & Tools */}
            <section className="py-20 bg-slate-50">
                <div className="container mx-auto px-4">
                    <div className="max-w-6xl mx-auto">
                        <div className="text-center mb-16">
                            <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">
                                <Settings className="w-3 h-3 mr-1" />
                                Tech Stack
                            </Badge>
                            <h2 className="text-4xl md:text-5xl font-bold mb-4 text-slate-900">
                                Technologies We Use
                            </h2>
                            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
                                Industry-leading tools and frameworks for optimal performance
                            </p>
                        </div>

                        <div className="grid md:grid-cols-4 gap-6">
                            {getTechnologies().map((tech, index) => {
                                const { icon: Icon, color } = pickTechIcon(tech.name);
                                return (
                                    <Card key={index} className="bg-white border-slate-100 hover:shadow-xl transition-all group">
                                        <CardContent className="p-6 text-center">
                                            <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${color} flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform`}>
                                                <Icon className="w-8 h-8 text-white" />
                                            </div>
                                            <h3 className="font-bold mb-2 text-slate-900">{tech.name}</h3>
                                            <p className="text-slate-600 text-sm">{tech.desc}</p>
                                        </CardContent>
                                    </Card>
                                );
                            })}
                        </div>
                    </div>
                </div>
            </section>

            {/* Project Timeline */}
            <section className="py-20 bg-white">
                <div className="container mx-auto px-4">
                    <div className="max-w-4xl mx-auto">
                        <div className="text-center mb-16">
                            <Badge className="mb-4 bg-orange-500/10 text-orange-700 border-orange-500/20">
                                <Clock className="w-3 h-3 mr-1" />
                                Timeline
                            </Badge>
                            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
                                Estimated Project Duration
                            </h2>
                            <p className="text-slate-600 text-lg">
                                Typical timeline for this service (may vary based on project scope)
                            </p>
                        </div>

                        <Card className="border-0 shadow-2xl bg-gradient-to-br from-blue-50 to-purple-50">
                            <CardContent className="p-10">
                                <div className="grid md:grid-cols-3 gap-8 text-center">
                                    <div>
                                        <div className="text-5xl font-bold text-primary mb-2">2-4</div>
                                        <div className="text-slate-600">Weeks</div>
                                        <div className="text-sm text-slate-500 mt-2">Small Projects</div>
                                    </div>
                                    <div>
                                        <div className="text-5xl font-bold text-purple-600 mb-2">1-3</div>
                                        <div className="text-slate-600">Months</div>
                                        <div className="text-sm text-slate-500 mt-2">Medium Projects</div>
                                    </div>
                                    <div>
                                        <div className="text-5xl font-bold text-emerald-600 mb-2">3-6</div>
                                        <div className="text-slate-600">Months</div>
                                        <div className="text-sm text-slate-500 mt-2">Large Projects</div>
                                    </div>
                                </div>
                                <div className="mt-8 pt-8 border-t border-slate-200 text-center">
                                    <p className="text-slate-600">
                                        <strong>Note:</strong> Timeline varies based on project complexity, requirements, and scope. 
                                        We'll provide accurate estimates during consultation.
                                    </p>
                                </div>
                            </CardContent>
                        </Card>
                    </div>
                </div>
            </section>

            {/* Why Choose Us */}
            <section className="py-20 bg-gradient-to-br from-slate-50 to-blue-50">
                <div className="container mx-auto px-4">
                    <div className="max-w-6xl mx-auto">
                        <div className="text-center mb-16">
                            <Badge className="mb-4 bg-amber-500/10 text-amber-700 border-amber-500/20">
                                <Award className="w-3 h-3 mr-1" />
                                Our Advantage
                            </Badge>
                            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
                                Why Choose Us For This Service
                            </h2>
                            <p className="text-slate-600 text-lg max-w-2xl mx-auto">
                                What sets us apart from the competition
                            </p>
                        </div>

                        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                            {[
                                { icon: TrendingUp, color: 'from-blue-500 to-cyan-500', title: '10+ Years Experience', desc: 'Proven track record with 200+ successful projects' },
                                { icon: Users, color: 'from-purple-500 to-pink-500', title: 'Expert Team', desc: 'Certified professionals with deep industry knowledge' },
                                { icon: Rocket, color: 'from-amber-500 to-orange-500', title: 'Fast Delivery', desc: 'Agile methodology ensures quick turnaround' },
                                { icon: Shield, color: 'from-emerald-500 to-teal-500', title: '100% Satisfaction', desc: 'Money-back guarantee if not completely satisfied' },
                            ].map((item, index) => {
                                const Icon = item.icon;
                                return (
                                    <Card key={index} className="border-0 shadow-lg hover:shadow-2xl transition-all hover:-translate-y-2 group">
                                        <CardContent className="p-8 text-center">
                                            <div className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${item.color} flex items-center justify-center mx-auto mb-6 shadow-md group-hover:scale-110 transition-transform`}>
                                                <Icon className="w-8 h-8 text-white" />
                                            </div>
                                            <h3 className="font-bold text-slate-900 mb-3 text-lg">{item.title}</h3>
                                            <p className="text-slate-600 text-sm leading-relaxed">{item.desc}</p>
                                        </CardContent>
                                    </Card>
                                );
                            })}
                        </div>
                    </div>
                </div>
            </section>

            {/* Features Section */}
            {service.features && service.features.length > 0 && (
                <section id="features" className="py-20 bg-white">
                    <div className="container mx-auto px-4">
                        <div className="max-w-6xl mx-auto">
                            <div className="text-center mb-16">
                                <Badge className="mb-4 bg-primary/10 text-primary border-primary/20">
                                    <Sparkles className="w-3 h-3 mr-1" />
                                    What You Get
                                </Badge>
                                <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
                                    Key Features & Benefits
                                </h2>
                                <p className="text-slate-600 text-lg max-w-2xl mx-auto">
                                    Comprehensive solutions designed to drive your success
                                </p>
                            </div>

                            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                                {service.features.map((feature, index) => (
                                    <Card 
                                        key={feature.id}
                                        className="group relative overflow-hidden hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border-0 bg-white"
                                        style={{
                                            animationDelay: `${index * 0.1}s`,
                                        }}
                                    >
                                        {/* Gradient top border */}
                                        <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-purple-500 to-cyan-500" />
                                        
                                        <CardContent className="p-6 pt-8">
                                            {/* Feature Icon */}
                                            <div className="mb-5">
                                                <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/10 to-blue-500/10 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-300 shadow-lg">
                                                    <i className={`${feature.icon} text-3xl text-primary`}></i>
                                                </div>
                                            </div>

                                            {/* Feature Content */}
                                            <h3 className="font-bold text-slate-900 mb-3 text-xl group-hover:text-primary transition-colors">
                                                {feature.title}
                                            </h3>
                                            <p className="text-slate-600 leading-relaxed">
                                                {feature.text}
                                            </p>

                                            {/* Checkmark */}
                                            <div className="mt-4 flex items-center gap-2 text-primary text-sm font-semibold">
                                                <CheckCircle2 className="w-4 h-4" />
                                                <span>Included</span>
                                            </div>

                                            {/* Hover glow effect */}
                                            <div className="absolute inset-0 opacity-0 group-hover:opacity-[0.05] transition-opacity duration-500 bg-gradient-to-br from-primary to-blue-500 pointer-events-none" />
                                        </CardContent>
                                    </Card>
                                ))}
                            </div>
                        </div>
                    </div>
                </section>
            )}

            {/* CTA Section - Modern Gradient Design */}
            <section className="relative py-24 bg-slate-950 overflow-hidden">
                {/* Animated Mesh Gradient Background */}
                <div className="absolute inset-0 overflow-hidden">
                    <div className="absolute top-0 left-0 w-[600px] h-[600px] bg-primary/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse" />
                    <div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-purple-500/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
                </div>

                {/* Grid Pattern */}
                <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:48px_48px] opacity-20" />

                <div className="container mx-auto px-4 relative z-10">
                    <div className="max-w-4xl mx-auto">
                        {/* Stats Row */}
                        <div className="grid grid-cols-3 gap-8 mb-16">
                            <div className="text-center">
                                <div className="text-4xl md:text-5xl font-bold text-white mb-2">200+</div>
                                <div className="text-white/70 text-sm">Projects Delivered</div>
                            </div>
                            <div className="text-center">
                                <div className="text-4xl md:text-5xl font-bold text-white mb-2">98%</div>
                                <div className="text-white/70 text-sm">Satisfaction Rate</div>
                            </div>
                            <div className="text-center">
                                <div className="text-4xl md:text-5xl font-bold text-white mb-2">24/7</div>
                                <div className="text-white/70 text-sm">Support Available</div>
                            </div>
                        </div>

                        {/* CTA Content */}
                        <div className="text-center bg-white/5 backdrop-blur-sm border border-white/10 rounded-3xl p-12">
                            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white text-sm mb-6">
                                <span className="relative flex h-2 w-2">
                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                                </span>
                                <span>Available for new projects</span>
                            </div>

                            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
                                Ready to Transform Your Business?
                            </h2>
                            <p className="text-xl text-white/80 mb-10 max-w-2xl mx-auto leading-relaxed">
                                Let's discuss how our <span className="text-white font-semibold">{service.title}</span> can help you achieve your goals and drive growth.
                            </p>

                            <div className="flex flex-col sm:flex-row gap-4 justify-center">
                                <Button 
                                    size="lg" 
                                    className="bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-500 text-white font-semibold px-8 h-14 text-base group shadow-lg shadow-primary/50"
                                    asChild
                                >
                                    <Link href={`/order?context=service&service=${service.slug}`}>
                                        Start Your Project
                                        <ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
                                    </Link>
                                </Button>
                                <Button 
                                    size="lg" 
                                    variant="outline" 
                                    className="bg-white/5 backdrop-blur-sm border-2 border-white/20 text-white hover:bg-white/10 hover:text-white font-semibold px-8 h-14 text-base"
                                    asChild
                                >
                                    <Link href="/services">
                                        <ArrowLeft className="w-5 h-5 mr-2" />
                                        Browse All Services
                                    </Link>
                                </Button>
                            </div>

                            {/* Trust indicators */}
                            <div className="mt-10 pt-8 border-t border-white/10 flex flex-wrap items-center justify-center gap-8 text-white/60 text-sm">
                                <div className="flex items-center gap-2">
                                    <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                                    <span>Free Consultation</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                                    <span>No Obligation Quote</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <CheckCircle2 className="w-4 h-4 text-emerald-400" />
                                    <span>Quick Response Time</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </Layout>
    );
}