import Layout from '@/Components/Layout';
import { Button } from '@/components/ui/button';
import { 
    Bot, 
    Mail, 
    Phone, 
    HeadphonesIcon, 
    Users, 
    DollarSign, 
    Server, 
    TrendingUp,
    Sparkles,
    ArrowRight,
    CheckCircle2,
    Zap,
    Target,
    BarChart3,
    Rocket,
    Code2,
    Lightbulb,
    RefreshCw,
    Gauge,
    Monitor,
    Smartphone,
    ShieldCheck
} from 'lucide-react';
import { SiGoogle, SiSnapchat, SiInstagram, SiFacebook } from 'react-icons/si';

interface AIAutomationProps {
    settings: any;
}

const aiServices = [
    {
        id: 1,
        title: 'Social Media Automation',
        description: 'Instagram, Snapchat, and Facebook auto-post, auto-reply, and intelligent ads management with AI-powered content optimization.',
        icon: SiInstagram,
        color: 'from-pink-500 to-purple-500',
        features: ['Auto-posting', 'AI Replies', 'Smart Ads', 'Analytics']
    },
    {
        id: 2,
        title: 'Google Ads Control',
        description: 'Automated Google Ads campaign management with AI-driven bidding, keyword optimization, and performance tracking.',
        icon: SiGoogle,
        color: 'from-blue-500 to-cyan-500',
        features: ['Smart Bidding', 'Keyword AI', 'ROI Tracking', 'A/B Testing']
    },
    {
        id: 3,
        title: 'Multi-Account Email Filtering',
        description: 'Intelligent email management across multiple accounts with AI-powered filtering, categorization, and priority sorting.',
        icon: Mail,
        color: 'from-indigo-500 to-blue-500',
        features: ['Smart Filter', 'Auto-Sort', 'Priority AI', 'Multi-Account']
    },
    {
        id: 4,
        title: 'Auto Call After Order',
        description: 'Automated customer follow-up calls using AI voice technology to confirm orders and gather feedback.',
        icon: Phone,
        color: 'from-green-500 to-emerald-500',
        features: ['Voice AI', 'Order Confirm', 'Feedback', 'Scheduling']
    },
    {
        id: 5,
        title: 'Customer Support Automation',
        description: 'AI-powered chatbots and support systems providing 24/7 instant responses and intelligent ticket routing.',
        icon: HeadphonesIcon,
        color: 'from-purple-500 to-pink-500',
        features: ['24/7 Chatbot', 'Smart Routing', 'Knowledge Base', 'Multi-Channel']
    },
    {
        id: 6,
        title: 'HRM & Billing Portal',
        description: 'Complete HR management and billing automation with employee tracking, attendance, and invoice generation.',
        icon: Users,
        color: 'from-orange-500 to-red-500',
        features: ['HR Portal', 'Attendance', 'Auto-Billing', 'Reports']
    },
    {
        id: 7,
        title: 'Salary Management with Bank',
        description: 'Automated salary processing directly integrated with bank accounts for seamless payroll management.',
        icon: DollarSign,
        color: 'from-teal-500 to-green-500',
        features: ['Auto-Payroll', 'Bank Integration', 'Tax Calculation', 'Pay Slips']
    },
    {
        id: 8,
        title: 'Server Monitoring & Bug Reporting',
        description: 'Real-time server monitoring with AI-powered anomaly detection and automated bug reporting system.',
        icon: Server,
        color: 'from-slate-500 to-gray-600',
        features: ['24/7 Monitor', 'AI Detection', 'Auto-Alert', 'Bug Tracking']
    },
    {
        id: 9,
        title: 'Business Analysis & Growth Planning',
        description: 'AI-driven business intelligence providing insights, trends analysis, and strategic growth recommendations.',
        icon: TrendingUp,
        color: 'from-blue-600 to-indigo-600',
        features: ['AI Analytics', 'Growth Insights', 'Predictions', 'Strategy']
    },
    {
        id: 10,
        title: 'Complete AI Integration',
        description: 'Full-stack AI integration into your existing systems with custom models, workflows, and automation pipelines.',
        icon: Bot,
        color: 'from-violet-500 to-purple-600',
        features: ['Custom AI', 'Integration', 'Workflows', 'Scaling']
    }
];

export default function AIAutomation({ settings }: AIAutomationProps) {
    return (
        <Layout settings={settings}>
            {/* Hero Section - Light Modern Style */}
            <section className="relative overflow-hidden bg-gradient-to-br from-slate-50 via-white to-blue-50/40 min-h-[700px] md:min-h-[750px] lg:min-h-[800px] flex items-center">
                {/* Subtle Mesh Gradient Background */}
                <div className="absolute inset-0 overflow-hidden">
                    <div className="absolute -top-40 -left-40 w-[600px] h-[600px] bg-primary/15 rounded-full filter blur-3xl animate-pulse" />
                    <div className="absolute top-20 -right-40 w-[600px] h-[600px] bg-purple-500/15 rounded-full filter blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
                    <div className="absolute -bottom-40 left-1/4 w-[600px] h-[600px] bg-cyan-500/15 rounded-full filter blur-3xl animate-pulse" style={{ animationDelay: '4s' }} />
                </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 py-20 relative z-10">
                    <div className="grid lg:grid-cols-2 gap-12 items-center">
                        {/* Left: Text Content */}
                        <div className="space-y-8">
                            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-slate-200 shadow-sm text-slate-700 text-sm">
                                <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>Next-Gen AI Solutions</span>
                            </div>

                            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-slate-900 leading-[1.05] tracking-tight">
                                Transform Your Business with{' '}
                                <span className="bg-gradient-to-r from-primary via-blue-500 to-purple-500 bg-clip-text text-transparent">
                                    AI Automation
                                </span>
                            </h1>

                            <p className="text-lg md:text-xl text-slate-600 leading-relaxed max-w-xl">
                                Harness the power of artificial intelligence to automate workflows, enhance customer experiences, and drive exponential growth across all business operations.
                            </p>

                            <div className="flex flex-col sm:flex-row gap-4">
                                <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"
                                >
                                    <a href="/order?context=service&service=ai-automation" className="flex items-center gap-2 text-white">
                                        Get Started Now
                                        <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                                    </a>
                                </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-8 h-14 text-base"
                                >
                                    <a href="#ai-services" className="text-slate-700">Explore AI Solutions</a>
                                </Button>
                            </div>

                            <div className="flex flex-wrap items-center gap-6 pt-4 text-slate-500 text-sm">
                                <div className="flex items-center gap-2">
                                    <Sparkles className="w-4 h-4 text-amber-500" />
                                    <span>10+ AI Solutions</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <Sparkles className="w-4 h-4 text-amber-500" />
                                    <span>100% Automation</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <Sparkles className="w-4 h-4 text-amber-500" />
                                    <span>3x Efficiency Boost</span>
                                </div>
                            </div>
                        </div>

                        {/* Right: Realistic AI Neural Network Animation */}
                        <div className="relative hidden lg:block max-w-[480px] ml-auto w-full">
                            <div className="absolute inset-0 bg-gradient-to-r from-primary to-purple-500 rounded-3xl blur-3xl opacity-30" />
                            <div className="relative rounded-3xl overflow-hidden border border-white/10 shadow-2xl bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 aspect-square">
                                
                                {/* Animated Background Grid */}
                                <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808015_1px,transparent_1px),linear-gradient(to_bottom,#80808015_1px,transparent_1px)] bg-[size:32px_32px]" />
                                
                                {/* Scanning Line Effect */}
                                <div className="absolute inset-0 overflow-hidden pointer-events-none">
                                    <div className="absolute inset-x-0 h-px bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-scan-vertical" />
                                </div>

                                {/* Main Neural Network SVG */}
                                <svg className="absolute inset-0 w-full h-full" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet">
                                    <defs>
                                        {/* Gradients */}
                                        <radialGradient id="brainGlow" cx="50%" cy="50%">
                                            <stop offset="0%" stopColor="#a855f7" stopOpacity="0.8" />
                                            <stop offset="50%" stopColor="#6366f1" stopOpacity="0.4" />
                                            <stop offset="100%" stopColor="#0ea5e9" stopOpacity="0" />
                                        </radialGradient>
                                        <linearGradient id="nodeGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
                                            <stop offset="0%" stopColor="#06b6d4" />
                                            <stop offset="100%" stopColor="#3b82f6" />
                                        </linearGradient>
                                        <linearGradient id="nodeGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
                                            <stop offset="0%" stopColor="#a855f7" />
                                            <stop offset="100%" stopColor="#ec4899" />
                                        </linearGradient>
                                        <linearGradient id="nodeGrad3" x1="0%" y1="0%" x2="100%" y2="100%">
                                            <stop offset="0%" stopColor="#10b981" />
                                            <stop offset="100%" stopColor="#06b6d4" />
                                        </linearGradient>
                                        <linearGradient id="connectionGrad" x1="0%" y1="0%" x2="100%" y2="0%">
                                            <stop offset="0%" stopColor="#06b6d4" stopOpacity="0" />
                                            <stop offset="50%" stopColor="#a855f7" stopOpacity="0.8" />
                                            <stop offset="100%" stopColor="#06b6d4" stopOpacity="0" />
                                        </linearGradient>
                                        <filter id="glow">
                                            <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
                                            <feMerge>
                                                <feMergeNode in="coloredBlur"/>
                                                <feMergeNode in="SourceGraphic"/>
                                            </feMerge>
                                        </filter>
                                    </defs>

                                    {/* Outer pulsing rings */}
                                    <circle cx="250" cy="250" r="180" fill="none" stroke="url(#nodeGrad2)" strokeWidth="1" opacity="0.3">
                                        <animate attributeName="r" values="160;200;160" dur="4s" repeatCount="indefinite" />
                                        <animate attributeName="opacity" values="0.5;0.1;0.5" dur="4s" repeatCount="indefinite" />
                                    </circle>
                                    <circle cx="250" cy="250" r="140" fill="none" stroke="url(#nodeGrad1)" strokeWidth="1" opacity="0.4">
                                        <animate attributeName="r" values="130;160;130" dur="3s" repeatCount="indefinite" />
                                        <animate attributeName="opacity" values="0.6;0.2;0.6" dur="3s" repeatCount="indefinite" />
                                    </circle>
                                    <circle cx="250" cy="250" r="100" fill="url(#brainGlow)" opacity="0.6">
                                        <animate attributeName="opacity" values="0.4;0.8;0.4" dur="2s" repeatCount="indefinite" />
                                    </circle>

                                    {/* Neural Network Connections - Layer 1 to Center */}
                                    <g opacity="0.6">
                                        <line x1="80" y1="120" x2="250" y2="250" stroke="url(#connectionGrad)" strokeWidth="1.5">
                                            <animate attributeName="opacity" values="0.2;1;0.2" dur="2s" repeatCount="indefinite" />
                                        </line>
                                        <line x1="80" y1="200" x2="250" y2="250" stroke="url(#connectionGrad)" strokeWidth="1.5">
                                            <animate attributeName="opacity" values="0.2;1;0.2" dur="2.3s" repeatCount="indefinite" />
                                        </line>
                                        <line x1="80" y1="300" x2="250" y2="250" stroke="url(#connectionGrad)" strokeWidth="1.5">
                                            <animate attributeName="opacity" values="0.2;1;0.2" dur="1.8s" repeatCount="indefinite" />
                                        </line>
                                        <line x1="80" y1="380" x2="250" y2="250" stroke="url(#connectionGrad)" strokeWidth="1.5">
                                            <animate attributeName="opacity" values="0.2;1;0.2" dur="2.5s" repeatCount="indefinite" />
                                        </line>
                                    </g>

                                    {/* Neural Network Connections - Center to Layer 2 */}
                                    <g opacity="0.6">
                                        <line x1="250" y1="250" x2="420" y2="120" stroke="url(#connectionGrad)" strokeWidth="1.5">
                                            <animate attributeName="opacity" values="0.2;1;0.2" dur="2.1s" repeatCount="indefinite" />
                                        </line>
                                        <line x1="250" y1="250" x2="420" y2="200" stroke="url(#connectionGrad)" strokeWidth="1.5">
                                            <animate attributeName="opacity" values="0.2;1;0.2" dur="2.4s" repeatCount="indefinite" />
                                        </line>
                                        <line x1="250" y1="250" x2="420" y2="300" stroke="url(#connectionGrad)" strokeWidth="1.5">
                                            <animate attributeName="opacity" values="0.2;1;0.2" dur="1.9s" repeatCount="indefinite" />
                                        </line>
                                        <line x1="250" y1="250" x2="420" y2="380" stroke="url(#connectionGrad)" strokeWidth="1.5">
                                            <animate attributeName="opacity" values="0.2;1;0.2" dur="2.2s" repeatCount="indefinite" />
                                        </line>
                                    </g>

                                    {/* Data Flow Particles - Left to Center */}
                                    <circle r="3" fill="#06b6d4" filter="url(#glow)">
                                        <animateMotion dur="2s" repeatCount="indefinite" path="M 80 120 L 250 250" />
                                        <animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" />
                                    </circle>
                                    <circle r="3" fill="#a855f7" filter="url(#glow)">
                                        <animateMotion dur="2.3s" repeatCount="indefinite" path="M 80 200 L 250 250" />
                                        <animate attributeName="opacity" values="0;1;1;0" dur="2.3s" repeatCount="indefinite" />
                                    </circle>
                                    <circle r="3" fill="#10b981" filter="url(#glow)">
                                        <animateMotion dur="1.8s" repeatCount="indefinite" path="M 80 300 L 250 250" />
                                        <animate attributeName="opacity" values="0;1;1;0" dur="1.8s" repeatCount="indefinite" />
                                    </circle>
                                    <circle r="3" fill="#f59e0b" filter="url(#glow)">
                                        <animateMotion dur="2.5s" repeatCount="indefinite" path="M 80 380 L 250 250" />
                                        <animate attributeName="opacity" values="0;1;1;0" dur="2.5s" repeatCount="indefinite" />
                                    </circle>

                                    {/* Data Flow Particles - Center to Right */}
                                    <circle r="3" fill="#06b6d4" filter="url(#glow)">
                                        <animateMotion dur="2.1s" repeatCount="indefinite" path="M 250 250 L 420 120" />
                                        <animate attributeName="opacity" values="0;1;1;0" dur="2.1s" repeatCount="indefinite" />
                                    </circle>
                                    <circle r="3" fill="#ec4899" filter="url(#glow)">
                                        <animateMotion dur="2.4s" repeatCount="indefinite" path="M 250 250 L 420 200" />
                                        <animate attributeName="opacity" values="0;1;1;0" dur="2.4s" repeatCount="indefinite" />
                                    </circle>
                                    <circle r="3" fill="#3b82f6" filter="url(#glow)">
                                        <animateMotion dur="1.9s" repeatCount="indefinite" path="M 250 250 L 420 300" />
                                        <animate attributeName="opacity" values="0;1;1;0" dur="1.9s" repeatCount="indefinite" />
                                    </circle>
                                    <circle r="3" fill="#10b981" filter="url(#glow)">
                                        <animateMotion dur="2.2s" repeatCount="indefinite" path="M 250 250 L 420 380" />
                                        <animate attributeName="opacity" values="0;1;1;0" dur="2.2s" repeatCount="indefinite" />
                                    </circle>

                                    {/* Input Layer Nodes (Left) */}
                                    <g filter="url(#glow)">
                                        <circle cx="80" cy="120" r="10" fill="url(#nodeGrad1)">
                                            <animate attributeName="r" values="10;13;10" dur="2s" repeatCount="indefinite" />
                                        </circle>
                                        <circle cx="80" cy="200" r="10" fill="url(#nodeGrad1)">
                                            <animate attributeName="r" values="10;13;10" dur="2.3s" repeatCount="indefinite" />
                                        </circle>
                                        <circle cx="80" cy="300" r="10" fill="url(#nodeGrad1)">
                                            <animate attributeName="r" values="10;13;10" dur="1.8s" repeatCount="indefinite" />
                                        </circle>
                                        <circle cx="80" cy="380" r="10" fill="url(#nodeGrad1)">
                                            <animate attributeName="r" values="10;13;10" dur="2.5s" repeatCount="indefinite" />
                                        </circle>
                                    </g>

                                    {/* Output Layer Nodes (Right) */}
                                    <g filter="url(#glow)">
                                        <circle cx="420" cy="120" r="10" fill="url(#nodeGrad3)">
                                            <animate attributeName="r" values="10;13;10" dur="2.1s" repeatCount="indefinite" />
                                        </circle>
                                        <circle cx="420" cy="200" r="10" fill="url(#nodeGrad3)">
                                            <animate attributeName="r" values="10;13;10" dur="2.4s" repeatCount="indefinite" />
                                        </circle>
                                        <circle cx="420" cy="300" r="10" fill="url(#nodeGrad3)">
                                            <animate attributeName="r" values="10;13;10" dur="1.9s" repeatCount="indefinite" />
                                        </circle>
                                        <circle cx="420" cy="380" r="10" fill="url(#nodeGrad3)">
                                            <animate attributeName="r" values="10;13;10" dur="2.2s" repeatCount="indefinite" />
                                        </circle>
                                    </g>

                                    {/* Central AI Core */}
                                    <g filter="url(#glow)">
                                        {/* Outer hexagon */}
                                        <polygon 
                                            points="250,200 295,225 295,275 250,300 205,275 205,225" 
                                            fill="none" 
                                            stroke="url(#nodeGrad2)" 
                                            strokeWidth="2"
                                        >
                                            <animateTransform attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="20s" repeatCount="indefinite" />
                                        </polygon>
                                        {/* Inner hexagon (counter-rotating) */}
                                        <polygon 
                                            points="250,215 280,232 280,268 250,285 220,268 220,232" 
                                            fill="none" 
                                            stroke="url(#nodeGrad1)" 
                                            strokeWidth="1.5"
                                        >
                                            <animateTransform attributeName="transform" type="rotate" from="360 250 250" to="0 250 250" dur="15s" repeatCount="indefinite" />
                                        </polygon>
                                        {/* Core circle */}
                                        <circle cx="250" cy="250" r="25" fill="url(#nodeGrad2)">
                                            <animate attributeName="r" values="22;28;22" dur="2s" repeatCount="indefinite" />
                                        </circle>
                                        {/* AI text/symbol in center */}
                                        <text x="250" y="258" textAnchor="middle" fill="white" fontSize="16" fontWeight="bold" fontFamily="monospace">AI</text>
                                    </g>

                                    {/* Floating Data Points around core */}
                                    <g opacity="0.7">
                                        <circle cx="250" cy="150" r="2" fill="#06b6d4">
                                            <animateTransform attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="10s" repeatCount="indefinite" />
                                        </circle>
                                        <circle cx="350" cy="250" r="2" fill="#a855f7">
                                            <animateTransform attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="10s" repeatCount="indefinite" />
                                        </circle>
                                        <circle cx="250" cy="350" r="2" fill="#10b981">
                                            <animateTransform attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="10s" repeatCount="indefinite" />
                                        </circle>
                                        <circle cx="150" cy="250" r="2" fill="#f59e0b">
                                            <animateTransform attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="10s" repeatCount="indefinite" />
                                        </circle>
                                    </g>

                                    {/* Binary code rain effect */}
                                    <g opacity="0.3" fontFamily="monospace" fontSize="10" fill="#06b6d4">
                                        <text x="30" y="50">
                                            <animate attributeName="y" values="0;500" dur="8s" repeatCount="indefinite" />
                                            10110
                                        </text>
                                        <text x="460" y="100">
                                            <animate attributeName="y" values="0;500" dur="10s" repeatCount="indefinite" />
                                            01001
                                        </text>
                                        <text x="20" y="450">
                                            <animate attributeName="y" values="500;0" dur="9s" repeatCount="indefinite" />
                                            11010
                                        </text>
                                        <text x="470" y="400">
                                            <animate attributeName="y" values="500;0" dur="11s" repeatCount="indefinite" />
                                            00111
                                        </text>
                                    </g>

                                    {/* Corner accent lines */}
                                    <g stroke="#06b6d4" strokeWidth="2" fill="none" opacity="0.5">
                                        <path d="M 20 20 L 50 20 L 50 22" />
                                        <path d="M 480 20 L 450 20 L 450 22" />
                                        <path d="M 20 480 L 50 480 L 50 478" />
                                        <path d="M 480 480 L 450 480 L 450 478" />
                                    </g>
                                </svg>

                                {/* Live Stats Overlay - Top Left */}
                                <div className="absolute top-4 left-4 bg-black/40 backdrop-blur-md border border-cyan-500/30 rounded-lg px-3 py-2">
                                    <div className="flex items-center gap-2">
                                        <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                                        <span className="text-cyan-400 text-xs font-mono">PROCESSING</span>
                                    </div>
                                    <div className="text-white text-xs font-mono mt-1">
                                        <span className="text-white/60">Neurons:</span> <span className="text-cyan-300">2.4M</span>
                                    </div>
                                </div>

                                {/* Live Stats Overlay - Bottom Right */}
                                <div className="absolute bottom-4 right-4 bg-black/40 backdrop-blur-md border border-purple-500/30 rounded-lg px-3 py-2">
                                    <div className="text-purple-300 text-xs font-mono">
                                        <span className="text-white/60">Accuracy:</span> 99.7%
                                    </div>
                                    <div className="text-purple-300 text-xs font-mono mt-1">
                                        <span className="text-white/60">Latency:</span> 12ms
                                    </div>
                                </div>
                            </div>

                            {/* Floating Badge - Top Right */}
                            <div className="absolute -top-4 -right-4 bg-white border border-slate-200 rounded-2xl p-4 shadow-xl">
                                <div className="flex items-center gap-3">
                                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center">
                                        <Zap className="w-5 h-5 text-white" />
                                    </div>
                                    <div>
                                        <div className="text-slate-900 font-bold text-lg">100%</div>
                                        <div className="text-slate-500 text-xs">Automation</div>
                                    </div>
                                </div>
                            </div>

                            {/* Floating Badge - Bottom Left */}
                            <div className="absolute -bottom-4 -left-4 bg-white border border-slate-200 rounded-2xl p-4 shadow-xl">
                                <div className="flex items-center gap-3">
                                    <div className="w-10 h-10 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
                                        <Rocket className="w-5 h-5 text-white" />
                                    </div>
                                    <div>
                                        <div className="text-slate-900 font-bold text-lg">3x</div>
                                        <div className="text-slate-500 text-xs">Efficiency</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* Why AI Automation Section */}
            <div className="py-20 bg-white">
                <div className="container mx-auto px-4">
                    <div className="text-center max-w-4xl mx-auto mb-16">
                        <h2 className="text-4xl md:text-5xl font-bold mb-6">
                            Why AI Automation for{' '}
                            <span className="bg-gradient-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent">
                                Your Business Growth?
                            </span>
                        </h2>
                        <p className="text-xl text-slate-600 leading-relaxed">
                            Unlock unprecedented business success with AI. Stay ahead of competition and maximize profitability with intelligent automation.
                        </p>
                    </div>

                    {/* Business Growth Benefits */}
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
                        <div className="group p-8 bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl hover:shadow-xl transition-all border border-blue-100">
                            <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <TrendingUp className="w-8 h-8 text-white" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">Revenue Growth</h3>
                            <p className="text-slate-600 leading-relaxed mb-4">
                                Optimize your sales process with AI automation to achieve 40-50% revenue increase. Automated follow-ups, personalized offers, and predictive analytics drive higher sales.
                            </p>
                            <div className="flex items-center gap-2 text-primary font-semibold">
                                <CheckCircle2 className="w-5 h-5" />
                                <span>40-50% Sales Increase</span>
                            </div>
                        </div>

                        <div className="group p-8 bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl hover:shadow-xl transition-all border border-purple-100">
                            <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <DollarSign className="w-8 h-8 text-white" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">Cost Reduction</h3>
                            <p className="text-slate-600 leading-relaxed mb-4">
                                Reduce operational costs by 60-70% through automation. Accomplish more with fewer staff, saving both time and money while maintaining quality.
                            </p>
                            <div className="flex items-center gap-2 text-purple-600 font-semibold">
                                <CheckCircle2 className="w-5 h-5" />
                                <span>60-70% Cost Savings</span>
                            </div>
                        </div>

                        <div className="group p-8 bg-gradient-to-br from-pink-50 to-orange-50 rounded-2xl hover:shadow-xl transition-all border border-pink-100">
                            <div className="w-16 h-16 bg-gradient-to-br from-pink-500 to-orange-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <Zap className="w-8 h-8 text-white" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">Speed & Efficiency</h3>
                            <p className="text-slate-600 leading-relaxed mb-4">
                                AI completes in seconds what takes humans hours. Free your team to focus on strategic initiatives while automation handles repetitive tasks.
                            </p>
                            <div className="flex items-center gap-2 text-pink-600 font-semibold">
                                <CheckCircle2 className="w-5 h-5" />
                                <span>3x Speed Boost</span>
                            </div>
                        </div>

                        <div className="group p-8 bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl hover:shadow-xl transition-all border border-green-100">
                            <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <Users className="w-8 h-8 text-white" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">Customer Satisfaction</h3>
                            <p className="text-slate-600 leading-relaxed mb-4">
                                Maintain 90%+ customer satisfaction with 24/7 instant support, personalized experiences, and lightning-fast responses to all inquiries.
                            </p>
                            <div className="flex items-center gap-2 text-green-600 font-semibold">
                                <CheckCircle2 className="w-5 h-5" />
                                <span>90%+ Satisfaction</span>
                            </div>
                        </div>

                        <div className="group p-8 bg-gradient-to-br from-cyan-50 to-blue-50 rounded-2xl hover:shadow-xl transition-all border border-cyan-100">
                            <div className="w-16 h-16 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <BarChart3 className="w-8 h-8 text-white" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">Data-Driven Decisions</h3>
                            <p className="text-slate-600 leading-relaxed mb-4">
                                AI analyzes your business data to provide accurate insights. Minimize decision-making risks and identify the most profitable paths forward.
                            </p>
                            <div className="flex items-center gap-2 text-cyan-600 font-semibold">
                                <CheckCircle2 className="w-5 h-5" />
                                <span>100% Accurate Insights</span>
                            </div>
                        </div>

                        <div className="group p-8 bg-gradient-to-br from-amber-50 to-yellow-50 rounded-2xl hover:shadow-xl transition-all border border-amber-100">
                            <div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-yellow-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                                <Rocket className="w-8 h-8 text-white" />
                            </div>
                            <h3 className="text-2xl font-bold mb-4">Stay Ahead of Competition</h3>
                            <p className="text-slate-600 leading-relaxed mb-4">
                                Companies using AI are 2-3 years ahead of competitors. Adopt this advanced technology now to dominate your market and lead innovation.
                            </p>
                            <div className="flex items-center gap-2 text-amber-600 font-semibold">
                                <CheckCircle2 className="w-5 h-5" />
                                <span>Competitive Advantage</span>
                            </div>
                        </div>
                    </div>

                    {/* AI Advancement Statistics */}
                    <div className="bg-gradient-to-br from-slate-900 via-primary/90 to-purple-900 rounded-3xl p-12 text-white">
                        <div className="text-center mb-12">
                            <h3 className="text-3xl md:text-4xl font-bold mb-4">
                                How Advanced is AI Today?
                            </h3>
                            <p className="text-xl text-white/80 max-w-3xl mx-auto">
                                AI technology is providing unprecedented benefits to humanity. See the real-world statistics:
                            </p>
                        </div>

                        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                            <div className="text-center p-6 bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20">
                                <div className="text-5xl font-bold mb-2 bg-gradient-to-r from-yellow-300 to-amber-400 bg-clip-text text-transparent">
                                    85%
                                </div>
                                <p className="text-white/90 font-medium mb-2">Businesses Use AI</p>
                                <p className="text-sm text-white/60">Fortune 500 companies</p>
                            </div>

                            <div className="text-center p-6 bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20">
                                <div className="text-5xl font-bold mb-2 bg-gradient-to-r from-green-300 to-emerald-400 bg-clip-text text-transparent">
                                    $15.7T
                                </div>
                                <p className="text-white/90 font-medium mb-2">AI Economic Impact</p>
                                <p className="text-sm text-white/60">By 2030 globally</p>
                            </div>

                            <div className="text-center p-6 bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20">
                                <div className="text-5xl font-bold mb-2 bg-gradient-to-r from-blue-300 to-cyan-400 bg-clip-text text-transparent">
                                    97%
                                </div>
                                <p className="text-white/90 font-medium mb-2">Mobile Users Use AI</p>
                                <p className="text-sm text-white/60">On a daily basis</p>
                            </div>

                            <div className="text-center p-6 bg-white/10 backdrop-blur-sm rounded-2xl border border-white/20">
                                <div className="text-5xl font-bold mb-2 bg-gradient-to-r from-pink-300 to-rose-400 bg-clip-text text-transparent">
                                    80%
                                </div>
                                <p className="text-white/90 font-medium mb-2">Productivity Increase</p>
                                <p className="text-sm text-white/60">Through AI automation</p>
                            </div>
                        </div>

                        <div className="mt-12 text-center">
                            <p className="text-lg text-white/90 mb-6">
                                <strong>AI powers your daily life:</strong> Voice Assistants (Siri, Alexa), Smart Recommendations (Netflix, YouTube), Auto Translation, Face Recognition, Medical Diagnosis, Self-Driving Cars, and thousands more innovations.
                            </p>
                            <div className="inline-flex items-center gap-2 px-6 py-3 bg-white/20 backdrop-blur-sm rounded-full border border-white/30">
                                <Sparkles className="w-5 h-5 text-yellow-300" />
                                <span className="font-semibold">Adopt Tomorrow's Technology Today!</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* AI Services Section */}
            <div id="ai-services" className="py-20 bg-white">
                <div className="container mx-auto px-4">
                    <div className="text-center max-w-3xl mx-auto mb-20">
                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
                            <Sparkles className="w-4 h-4" />
                            Our Platform
                        </div>
                        <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
                            Our{' '}
                            <span className="bg-gradient-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent">
                                AI Automation Services
                            </span>
                        </h2>
                        <p className="text-xl text-slate-600">
                            Comprehensive AI solutions designed to transform every aspect of your business operations
                        </p>
                    </div>

                    {/* Service Items - Alternating Layout */}
                    <div className="space-y-16">
                        {aiServices.map((service, index) => {
                            const IconComponent = service.icon;
                            const isEven = index % 2 === 0;
                            
                            return (
                                <div key={service.id} className="grid lg:grid-cols-2 gap-12 items-stretch">
                                    {isEven ? (
                                        <>
                                            {/* Illustration Left (for even index: 0, 2, 4, 6, 8) */}
                                            <div className="relative h-full">
                                                <div className="h-full bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl p-8 relative overflow-hidden">
                                                    {/* Decorative Background */}
                                                    <div className={`absolute inset-0 bg-gradient-to-br ${service.color} opacity-5`} />
                                                    
                                                    {/* Floating Elements */}
                                                    <div className="absolute inset-0 flex items-center justify-center">
                                                        <div className="relative w-full h-full">
                                                            {/* Main Device/Platform */}
                                                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-48">
                                                                <div className="relative bg-white rounded-2xl shadow-2xl border-4 border-slate-200 p-6 transform perspective-1000 rotateY-5">
                                                                    {/* Screen Content */}
                                                                    <div className="space-y-3">
                                                                        <div className="flex items-center gap-3">
                                                                            <div className={`w-12 h-12 bg-gradient-to-br ${service.color} rounded-lg flex items-center justify-center`}>
                                                                                <IconComponent className="w-6 h-6 text-white" />
                                                                            </div>
                                                                            <div className="flex-1">
                                                                                <div className="h-2 bg-slate-200 rounded w-20 mb-1"></div>
                                                                                <div className="h-2 bg-slate-100 rounded w-16"></div>
                                                                            </div>
                                                                        </div>
                                                                        <div className="space-y-2">
                                                                            <div className="h-2 bg-slate-100 rounded"></div>
                                                                            <div className="h-2 bg-slate-100 rounded w-5/6"></div>
                                                                            <div className="h-2 bg-slate-100 rounded w-4/6"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            {/* Floating Element 1 - Top Left */}
                                                            <div className="absolute top-8 left-8 w-20 h-24 animate-float">
                                                                <div className={`w-full h-full bg-gradient-to-br ${service.color} rounded-xl shadow-lg opacity-80`}>
                                                                    <div className="p-3 space-y-1">
                                                                        <div className="h-1 bg-white/50 rounded"></div>
                                                                        <div className="h-1 bg-white/50 rounded"></div>
                                                                        <div className="h-1 bg-white/50 rounded w-2/3"></div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            {/* Floating Element 2 - Top Right (service-tinted) */}
                                                            <div className="absolute top-12 right-12 w-16 h-16 animate-float" style={{ animationDelay: '1s' }}>
                                                                <div className={`w-full h-full bg-gradient-to-br ${service.color} opacity-90 rounded-lg shadow-lg`}></div>
                                                            </div>

                                                            {/* Floating Element 3 - Top Right Corner */}
                                                            <div className="absolute top-4 right-4 w-12 h-12 animate-float" style={{ animationDelay: '2s' }}>
                                                                <div className="w-full h-full bg-gradient-to-br from-amber-400 to-orange-500 rounded-lg shadow-lg"></div>
                                                            </div>

                                                            {/* Floating Element 4 - Bottom Right (Server/Data, service-tinted) */}
                                                            <div className="absolute bottom-8 right-8 w-24 h-32 animate-float" style={{ animationDelay: '1.5s' }}>
                                                                <div className={`w-full h-full bg-gradient-to-br ${service.color} opacity-70 rounded-xl shadow-lg p-2 space-y-1`}>
                                                                    <div className="h-8 bg-white/20 rounded"></div>
                                                                    <div className="h-8 bg-white/20 rounded"></div>
                                                                    <div className="h-8 bg-white/20 rounded"></div>
                                                                </div>
                                                            </div>

                                                            {/* Floating Element 5 - Bottom Left (Chart) */}
                                                            <div className="absolute bottom-12 left-12 w-20 h-20 animate-float" style={{ animationDelay: '0.5s' }}>
                                                                <div className={`w-full h-full bg-gradient-to-br ${service.color} rounded-xl shadow-lg p-3 flex items-end justify-around gap-1`}>
                                                                    <div className="w-2 h-8 bg-white/50 rounded"></div>
                                                                    <div className="w-2 h-12 bg-white/70 rounded"></div>
                                                                    <div className="w-2 h-6 bg-white/50 rounded"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            {/* Content Right */}
                                            <div>
                                                <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-medium mb-4">
                                                    <IconComponent className="w-3.5 h-3.5" />
                                                    Solution #{index + 1}
                                                </div>

                                                <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold mb-4">
                                                    {service.title.split(' ').slice(0, -1).join(' ')}{' '}
                                                    <span className="bg-gradient-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent">
                                                        {service.title.split(' ').slice(-1)}
                                                    </span>
                                                </h3>

                                                <p className="text-base text-slate-600 mb-6 leading-relaxed">
                                                    {service.description}
                                                </p>

                                                <div className="space-y-2">
                                                    {service.features.map((feature, idx) => (
                                                        <div key={idx} className="flex items-start gap-3 p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                                            <div className={`w-10 h-10 bg-gradient-to-br ${service.color} rounded-lg flex items-center justify-center flex-shrink-0`}>
                                                                <CheckCircle2 className="w-5 h-5 text-white" />
                                                            </div>
                                                            <div className="flex-1 pt-1.5">
                                                                <h4 className="font-bold text-base mb-0.5">{feature}</h4>
                                                                <p className="text-slate-600 text-sm">Advanced automation capabilities</p>
                                                            </div>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>
                                        </>
                                    ) : (
                                        <>
                                            {/* Content Left (for odd index: 1, 3, 5, 7, 9) */}
                                            <div>
                                                <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 text-primary text-xs font-medium mb-4">
                                                    <IconComponent className="w-3.5 h-3.5" />
                                                    Solution #{index + 1}
                                                </div>

                                                <h3 className="text-2xl md:text-3xl lg:text-4xl font-bold mb-4">
                                                    {service.title.split(' ').slice(0, -1).join(' ')}{' '}
                                                    <span className="bg-gradient-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent">
                                                        {service.title.split(' ').slice(-1)}
                                                    </span>
                                                </h3>

                                                <p className="text-base text-slate-600 mb-6 leading-relaxed">
                                                    {service.description}
                                                </p>

                                                <div className="space-y-2">
                                                    {service.features.map((feature, idx) => (
                                                        <div key={idx} className="flex items-start gap-3 p-3 rounded-lg hover:bg-slate-50 transition-colors">
                                                            <div className={`w-10 h-10 bg-gradient-to-br ${service.color} rounded-lg flex items-center justify-center flex-shrink-0`}>
                                                                <CheckCircle2 className="w-5 h-5 text-white" />
                                                            </div>
                                                            <div className="flex-1 pt-1.5">
                                                                <h4 className="font-bold text-base mb-0.5">{feature}</h4>
                                                                <p className="text-slate-600 text-sm">Advanced automation capabilities</p>
                                                            </div>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>

                                            {/* Illustration Right */}
                                            <div className="relative h-full">
                                                <div className="h-full bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl p-8 relative overflow-hidden">
                                                    {/* Decorative Background */}
                                                    <div className={`absolute inset-0 bg-gradient-to-br ${service.color} opacity-5`} />
                                                    
                                                    {/* Floating Elements */}
                                                    <div className="absolute inset-0 flex items-center justify-center">
                                                        <div className="relative w-full h-full">
                                                            {/* Main Device/Platform */}
                                                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-48">
                                                                <div className="relative bg-white rounded-2xl shadow-2xl border-4 border-slate-200 p-6 transform perspective-1000 rotateY-5">
                                                                    {/* Screen Content */}
                                                                    <div className="space-y-3">
                                                                        <div className="flex items-center gap-3">
                                                                            <div className={`w-12 h-12 bg-gradient-to-br ${service.color} rounded-lg flex items-center justify-center`}>
                                                                                <IconComponent className="w-6 h-6 text-white" />
                                                                            </div>
                                                                            <div className="flex-1">
                                                                                <div className="h-2 bg-slate-200 rounded w-20 mb-1"></div>
                                                                                <div className="h-2 bg-slate-100 rounded w-16"></div>
                                                                            </div>
                                                                        </div>
                                                                        <div className="space-y-2">
                                                                            <div className="h-2 bg-slate-100 rounded"></div>
                                                                            <div className="h-2 bg-slate-100 rounded w-5/6"></div>
                                                                            <div className="h-2 bg-slate-100 rounded w-4/6"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            {/* Floating Element 1 - Top Left */}
                                                            <div className="absolute top-8 left-8 w-20 h-24 animate-float">
                                                                <div className={`w-full h-full bg-gradient-to-br ${service.color} rounded-xl shadow-lg opacity-80`}>
                                                                    <div className="p-3 space-y-1">
                                                                        <div className="h-1 bg-white/50 rounded"></div>
                                                                        <div className="h-1 bg-white/50 rounded"></div>
                                                                        <div className="h-1 bg-white/50 rounded w-2/3"></div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            {/* Floating Element 2 - Top Right (service-tinted) */}
                                                            <div className="absolute top-12 right-12 w-16 h-16 animate-float" style={{ animationDelay: '1s' }}>
                                                                <div className={`w-full h-full bg-gradient-to-br ${service.color} opacity-90 rounded-lg shadow-lg`}></div>
                                                            </div>

                                                            {/* Floating Element 3 - Top Right Corner */}
                                                            <div className="absolute top-4 right-4 w-12 h-12 animate-float" style={{ animationDelay: '2s' }}>
                                                                <div className="w-full h-full bg-gradient-to-br from-amber-400 to-orange-500 rounded-lg shadow-lg"></div>
                                                            </div>

                                                            {/* Floating Element 4 - Bottom Right (Server/Data, service-tinted) */}
                                                            <div className="absolute bottom-8 right-8 w-24 h-32 animate-float" style={{ animationDelay: '1.5s' }}>
                                                                <div className={`w-full h-full bg-gradient-to-br ${service.color} opacity-70 rounded-xl shadow-lg p-2 space-y-1`}>
                                                                    <div className="h-8 bg-white/20 rounded"></div>
                                                                    <div className="h-8 bg-white/20 rounded"></div>
                                                                    <div className="h-8 bg-white/20 rounded"></div>
                                                                </div>
                                                            </div>

                                                            {/* Floating Element 5 - Bottom Left (Chart) */}
                                                            <div className="absolute bottom-12 left-12 w-20 h-20 animate-float" style={{ animationDelay: '0.5s' }}>
                                                                <div className={`w-full h-full bg-gradient-to-br ${service.color} rounded-xl shadow-lg p-3 flex items-end justify-around gap-1`}>
                                                                    <div className="w-2 h-8 bg-white/50 rounded"></div>
                                                                    <div className="w-2 h-12 bg-white/70 rounded"></div>
                                                                    <div className="w-2 h-6 bg-white/50 rounded"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </>
                                    )}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>

            {/* Platform Integration Section */}
            <div className="py-20 bg-white">
                <div className="container mx-auto px-4">
                    <div className="grid lg:grid-cols-2 gap-12 items-center">
                        <div>
                            <h2 className="text-4xl md:text-5xl font-bold mb-6">
                                Seamless Integration with Your Existing Systems
                            </h2>
                            <p className="text-xl text-slate-600 mb-8 leading-relaxed">
                                Our AI automation solutions integrate perfectly with your current infrastructure, requiring minimal disruption while maximizing results.
                            </p>

                            <div className="space-y-4">
                                {[
                                    { icon: Monitor, title: 'Web Applications', desc: 'Full integration with web platforms' },
                                    { icon: Smartphone, title: 'Mobile Apps', desc: 'Native iOS and Android support' },
                                    { icon: Server, title: 'Backend Systems', desc: 'API-first architecture' },
                                    { icon: ShieldCheck, title: 'Secure & Compliant', desc: 'Enterprise-grade security' }
                                ].map((item, idx) => (
                                    <div key={idx} className="flex items-start gap-4 p-4 rounded-xl hover:bg-slate-50 transition-colors">
                                        <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                                            <item.icon className="w-6 h-6 text-primary" />
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-lg mb-1">{item.title}</h4>
                                            <p className="text-slate-600">{item.desc}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>

                        <div className="relative">
                            <div className="aspect-square bg-gradient-to-br from-blue-100 to-purple-100 rounded-3xl p-8 relative overflow-hidden">
                                {/* Isometric Illustration Placeholder */}
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <div className="relative">
                                        {/* Server Stack */}
                                        <div className="relative">
                                            <div className="w-48 h-48 bg-gradient-to-br from-primary to-purple-600 rounded-2xl transform rotate-12 absolute top-0 left-0 opacity-20 blur-xl" />
                                            <div className="relative bg-white rounded-2xl p-8 shadow-2xl">
                                                <div className="flex flex-col items-center gap-4">
                                                    <div className="w-20 h-20 bg-gradient-to-br from-primary to-purple-600 rounded-xl flex items-center justify-center">
                                                        <Zap className="w-10 h-10 text-white" />
                                                    </div>
                                                    <div className="text-center">
                                                        <div className="text-2xl font-bold mb-2">AI Engine</div>
                                                        <div className="text-sm text-slate-500">Processing...</div>
                                                    </div>
                                                    {/* Connection Lines */}
                                                    <div className="flex gap-2">
                                                        {[1, 2, 3, 4].map((i) => (
                                                            <div key={i} className="w-3 h-3 bg-green-500 rounded-full animate-pulse" style={{ animationDelay: `${i * 200}ms` }} />
                                                        ))}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* CTA Section - Dark Elegant */}
            <div className="relative py-20 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white overflow-hidden">
                <div className="absolute inset-0 opacity-10">
                    <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary rounded-full filter blur-3xl" />
                    <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500 rounded-full filter blur-3xl" />
                </div>

                <div className="container mx-auto px-4 relative z-10">
                    <div className="max-w-3xl mx-auto text-center">
                        <h2 className="text-4xl md:text-5xl font-bold mb-6">
                            Ready to Automate Your Business?
                        </h2>
                        <p className="text-xl text-slate-300 mb-8 leading-relaxed">
                            Transform your operations with AI automation. Get started today with a free consultation and discover how we can help you achieve 3x efficiency.
                        </p>

                        <div className="flex flex-wrap gap-4 justify-center">
                            <Button size="lg" className="bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/50">
                                <a href="/order?context=service&service=ai-automation" className="flex items-center gap-2 text-white">
                                    Get Free AI Consultation
                                    <ArrowRight className="w-4 h-4" />
                                </a>
                            </Button>
                            <Button size="lg" variant="outline" className="border-2 border-white bg-transparent hover:bg-white transition-all">
                                <a href="/services" className="text-white hover:text-slate-900">View All Services</a>
                            </Button>
                        </div>

                        {/* Trust Indicators */}
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12 pt-12 border-t border-white/10">
                            <div>
                                <div className="text-3xl font-bold text-white mb-1">100%</div>
                                <div className="text-slate-400 text-sm">Automation</div>
                            </div>
                            <div>
                                <div className="text-3xl font-bold text-white mb-1">3x</div>
                                <div className="text-slate-400 text-sm">Efficiency Gain</div>
                            </div>
                            <div>
                                <div className="text-3xl font-bold text-white mb-1">24/7</div>
                                <div className="text-slate-400 text-sm">AI Active</div>
                            </div>
                            <div>
                                <div className="text-3xl font-bold text-white mb-1">10+</div>
                                <div className="text-slate-400 text-sm">AI Solutions</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Layout>
    );
}