'use client'

import { Factory, Truck, Cpu, Zap } 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'
import TechBadge from '@/components/ui/TechBadge'

const iconMap: Record<string, typeof Factory> = { Factory, Truck, Cpu, Zap }

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

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

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {i.targets.industries.map((industry, idx) => {
            const Icon = iconMap[industry.icon]
            return (
              <GlassCard key={idx} delay={idx * 0.1}>
                <div className="w-10 h-10 rounded-xl bg-accent-electric/10 flex items-center justify-center mb-4">
                  <Icon className="w-5 h-5 text-accent-electric" />
                </div>
                <h3 className="text-sm font-bold mb-3">{industry.name}</h3>
                <div className="flex flex-wrap gap-1.5 mb-4">
                  {industry.regulations.map((reg, ri) => (
                    <TechBadge key={ri}>{reg}</TechBadge>
                  ))}
                </div>
                <p className="text-xs text-accent-signal/80 font-mono">{industry.roi}</p>
              </GlassCard>
            )
          })}
        </div>
      </div>
    </section>
  )
}
