'use client'

import { AlertTriangle, ShieldCheck, RefreshCw, Cpu, FileText, Link } from 'lucide-react'
import { t } from '@/lib/content'
import { useApp } from '@/lib/context'
import SectionHeading from '@/components/ui/SectionHeading'
import GlassCard from '@/components/ui/GlassCard'

const iconMap: Record<string, typeof AlertTriangle> = { AlertTriangle, ShieldCheck, RefreshCw, Cpu, FileText, Link }

export default function SafetySection() {
  const { lang } = useApp()
  const i = t(lang)

  return (
    <section id="safety" className="py-24 sm:py-32 section-alt">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          tag={i.safety.tag}
          title={i.safety.title}
          titleHighlight={i.safety.titleHighlight}
          subtitle={i.safety.subtitle}
        />

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {i.safety.features.map((feature, idx) => {
            const Icon = iconMap[feature.icon]
            return (
              <GlassCard key={idx} delay={idx * 0.08}>
                <div className="w-10 h-10 rounded-xl bg-amber-500/10 flex items-center justify-center mb-4">
                  <Icon className="w-5 h-5 text-amber-400" />
                </div>
                <h3 className="text-sm font-bold mb-2">{feature.title}</h3>
                <p className="text-xs text-white/40 leading-relaxed">{feature.description}</p>
              </GlassCard>
            )
          })}
        </div>
      </div>
    </section>
  )
}
