'use client'

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

const DEFAULT_ICONS = [
    <Lock key="lock" className="h-8 w-8 text-green-400" />,
    <Shield key="shield" className="h-8 w-8 text-brand-orange" />,
    <Server key="server" className="h-8 w-8 text-brand-purple" />,
]

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

export function AdvancedSecurity({ config }: AdvancedSecurityProps) {
    const { ref, isVisible } = useScrollAnimation()
    const heading = config?.heading ?? 'Advanced Security Features'
    const description = config?.description ?? "Security is not an option, it's a necessity. We include advanced security measures in every plan to keep your data safe."
    const cards = config?.cards ?? [
        { title: 'SSL Certificates', description: "We provide free Let's Encrypt SSL certificates for all domains to ensure encrypted connections." },
        { title: 'DDoS Protection', description: 'Our advanced firewall and DDoS mitigation system protects your site from malicious attacks.' },
        { title: '99.9% Uptime', description: 'Redundant infrastructure ensures your website stays online even during hardware failures.' },
    ]
    const s = config?.styles ?? {}

    return (
        <SectionWrapper bg="navy" className="text-center" customBg={s.bg_color}>
            <div ref={ref} className={`max-w-3xl mx-auto mb-16 ${fadeInUpClass(isVisible)}`}>
                <h2 className="text-3xl md:text-4xl font-bold text-white mb-6" style={s.heading_color ? { color: s.heading_color } : undefined}>{heading}</h2>
                <p className="text-slate-300 text-lg" style={s.text_color ? { color: s.text_color } : undefined}>{description}</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-left">
                {cards.map((card, i) => (
                    <SecurityCard key={i} title={card.title} description={card.description} icon={DEFAULT_ICONS[i % DEFAULT_ICONS.length]} />
                ))}
            </div>
        </SectionWrapper>
    )
}

function SecurityCard({ title, description, icon }: { title: string, description: string, icon: React.ReactNode }) {
    return (
        <div className="bg-white/5 border border-white/10 rounded-2xl p-8 hover:bg-white/10 transition-colors">
            <div className="mb-6">{icon}</div>
            <h3 className="text-xl font-bold text-white mb-3">{title}</h3>
            <p className="text-slate-400 leading-relaxed">{description}</p>
        </div>
    )
}
