'use client'

import { SectionWrapper } from '@/components/shared/section-wrapper'
import { Rocket, Shield, Lock, Clock, Zap, Headphones } from 'lucide-react'
import { useScrollAnimation, fadeInUpClass } from '@/hooks/use-scroll-animation'
import type { SectionStyles } from '@/lib/home-config'

const DEFAULT_ICONS = [
    { icon: <Rocket className="h-6 w-6 text-brand-purple" />, color: 'bg-brand-purple/10' },
    { icon: <Zap className="h-6 w-6 text-brand-orange" />, color: 'bg-brand-orange/10' },
    { icon: <Lock className="h-6 w-6 text-green-500" />, color: 'bg-green-500/10' },
    { icon: <Clock className="h-6 w-6 text-blue-500" />, color: 'bg-blue-500/10' },
]

interface FeaturesAdvancedProps {
    config?: {
        label: string
        heading: string
        description: string
        cards: { title: string; description: string }[]
        bullets: string[]
        styles?: SectionStyles
    }
}

export function FeaturesAdvanced({ config }: FeaturesAdvancedProps) {
    const { ref, isVisible } = useScrollAnimation()
    const label = config?.label ?? 'Advanced Features'
    const heading = config?.heading ?? 'Built for speed, security, and scalability.'
    const description = config?.description ?? 'We use the latest technology to ensure your website is always fast, secure, and online. Our infrastructure is optimized for high traffic and critical applications.'
    const cards = config?.cards ?? [
        { title: 'Maximum Performance', description: 'Powered by NVMe SSDs and LiteSpeed servers for blazing fast load times.' },
        { title: 'LiteSpeed Web Server', description: 'Up to 20x faster than Apache. Built-in caching for WordPress.' },
        { title: 'Free SSL Certificates', description: 'Auto-installed SSL for all your domains and subdomains.' },
        { title: 'Daily Backups', description: 'Your data is safe with us. We backup your site remotely every day.' },
    ]
    const bullets = config?.bullets ?? ['99.9% Uptime Guarantee', 'DDoS Protection Included', '24/7/365 Expert Support']
    const s = config?.styles ?? {}

    return (
        <SectionWrapper bg="lavender" customBg={s.bg_color}>
            <div ref={ref} className={`grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 ${fadeInUpClass(isVisible)}`}>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {cards.map((card, i) => {
                        const visual = DEFAULT_ICONS[i % DEFAULT_ICONS.length]
                        return (
                            <div key={i} className="bg-white p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow group">
                                <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-4 transition-transform group-hover:scale-110 ${visual.color}`}>
                                    {visual.icon}
                                </div>
                                <h3 className="text-lg font-bold text-navy mb-2">{card.title}</h3>
                                <p className="text-slate-600 text-sm leading-relaxed">{card.description}</p>
                            </div>
                        )
                    })}
                </div>

                <div className="flex flex-col justify-center">
                    <h5 className="text-brand-orange font-bold uppercase tracking-wider text-sm mb-2" style={s.accent_color ? { color: s.accent_color } : undefined}>{label}</h5>
                    <h2 className="text-3xl md:text-4xl font-bold text-navy mb-6" style={s.heading_color ? { color: s.heading_color } : undefined}>{heading}</h2>
                    <p className="text-slate-600 text-lg mb-8 leading-relaxed" style={s.text_color ? { color: s.text_color } : undefined}>{description}</p>
                    <ul className="space-y-4">
                        {bullets.map((bullet, i) => (
                            <li key={i} className="flex items-center gap-3">
                                <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold">✓</div>
                                <span className="font-medium text-navy">{bullet}</span>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
        </SectionWrapper>
    )
}
