'use client'

import { SectionWrapper } from '@/components/shared/section-wrapper'
import { ShieldCheck, BarChart2, Activity, Headphones } from 'lucide-react'
import { useScrollAnimation, fadeInUpClass } from '@/hooks/use-scroll-animation'

const DEFAULT_ICONS = [
    <ShieldCheck key="shield" className="h-5 w-5 text-brand-orange" />,
    <BarChart2 key="bar" className="h-5 w-5 text-brand-orange" />,
    <Activity key="activity" className="h-5 w-5 text-brand-orange" />,
    <Headphones key="headphones" className="h-5 w-5 text-brand-orange" />,
]

interface HelpedCompaniesProps {
    config?: {
        heading: string
        description: string
        items: { title: string; description: string }[]
    }
}

export function HelpedCompanies({ config }: HelpedCompaniesProps) {
    const { ref, isVisible } = useScrollAnimation()
    const heading = config?.heading ?? 'Helped companies heavily grow.'
    const description = config?.description ?? 'We provide the infrastructure that powers high-growth companies. Scalable, reliable, and secure hosting solutions designed for your success.'
    const items = config?.items ?? [
        { title: 'Secure & Fast', description: 'Enterprise-grade security with blazing fast speeds.' },
        { title: 'Real-Time Logs', description: 'Monitor your server performance in real-time.' },
        { title: '24/7 Monitoring', description: 'Proactive monitoring to prevent downtime.' },
        { title: 'Expert Support', description: 'Direct access to level 3 engineers.' },
    ]

    return (
        <SectionWrapper bg="navy-deep">
            <div ref={ref} className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${fadeInUpClass(isVisible)}`}>
                {/* Data Center Visual */}
                <div className="order-2 lg:order-1 bg-white/5 rounded-2xl h-[400px] border border-white/10 relative overflow-hidden group p-6">
                    <div className="absolute inset-0 bg-brand-purple/20 blur-[100px] opacity-20 group-hover:opacity-40 transition-opacity" />
                    <div className="relative z-10 space-y-4 h-full flex flex-col justify-center">
                        <div className="flex items-center gap-2 mb-2">
                            <div className="w-2.5 h-2.5 rounded-full bg-green-400 animate-pulse" />
                            <span className="text-xs font-mono text-slate-400">dc-rack-01.hostimatic.com</span>
                        </div>
                        {/* Server Racks */}
                        <div className="grid grid-cols-4 gap-2">
                            {[...Array(8)].map((_, i) => (
                                <div key={i} className="bg-white/5 border border-white/10 rounded-lg p-2 flex flex-col items-center gap-1.5">
                                    <div className="w-full h-1 bg-white/10 rounded" />
                                    <div className="flex gap-0.5">
                                        <div className={`w-1 h-1 rounded-full ${i < 6 ? 'bg-green-400' : 'bg-yellow-400'} ${i < 4 ? 'animate-pulse' : ''}`} />
                                        <div className="w-1 h-1 rounded-full bg-blue-400" />
                                    </div>
                                    <div className="w-full h-1 bg-white/10 rounded" />
                                </div>
                            ))}
                        </div>
                        {/* Network Stats */}
                        <div className="flex items-center justify-between bg-white/5 rounded-lg px-4 py-3 border border-white/5">
                            <div className="flex items-center gap-2">
                                <Activity className="h-4 w-4 text-green-400" />
                                <span className="text-sm text-slate-300">Network</span>
                            </div>
                            <span className="text-sm font-mono text-green-400">1.2 Gbps ↕</span>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                            <div className="bg-white/5 rounded-lg px-3 py-2.5 border border-white/5 text-center">
                                <p className="text-lg font-bold text-white font-mono">99.99%</p>
                                <p className="text-xs text-slate-500">Uptime</p>
                            </div>
                            <div className="bg-white/5 rounded-lg px-3 py-2.5 border border-white/5 text-center">
                                <p className="text-lg font-bold text-brand-orange font-mono">2,847</p>
                                <p className="text-xs text-slate-500">Clients</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="order-1 lg:order-2">
                    <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">{heading}</h2>
                    <p className="text-slate-300 text-lg mb-8 leading-relaxed">{description}</p>

                    <div className="space-y-6">
                        {items.map((item, i) => (
                            <div key={i} className="flex gap-4">
                                <div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 shrink-0">
                                    {DEFAULT_ICONS[i % DEFAULT_ICONS.length]}
                                </div>
                                <div>
                                    <h4 className="text-white font-bold text-lg mb-1">{item.title}</h4>
                                    <p className="text-slate-400 text-sm">{item.description}</p>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </SectionWrapper>
    )
}
