'use client'

import { Shield, FileCheck, ClipboardCheck, Check, X } 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 FadeInView from '@/components/ui/FadeInView'

const iconMap: Record<string, typeof Shield> = {
  Shield,
  FileCheck,
  ClipboardCheck,
}

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

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

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
          {i.deterministic.pillars.map((pillar, idx) => {
            const Icon = iconMap[pillar.icon]
            return (
              <GlassCard key={idx} delay={idx * 0.1}>
                <div className="w-12 h-12 rounded-xl bg-accent-indigo/10 flex items-center justify-center mb-4">
                  <Icon className="w-6 h-6 text-accent-indigo" />
                </div>
                <h3 className="text-lg font-bold mb-2">{pillar.title}</h3>
                <p className="text-sm text-white/50">{pillar.description}</p>
              </GlassCard>
            )
          })}
        </div>

        <FadeInView>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="rounded-2xl border border-red-500/20 bg-red-500/[0.04] p-6">
              <h4 className="text-sm font-bold text-red-400 mb-4 font-mono uppercase tracking-wider">
                {i.deterministic.comparison.llm.title}
              </h4>
              <ul className="space-y-3">
                {i.deterministic.comparison.llm.items.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm text-white/50">
                    <X className="w-4 h-4 text-red-400/60 mt-0.5 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>

            <div className="rounded-2xl border border-green-500/20 bg-green-500/[0.04] p-6">
              <h4 className="text-sm font-bold text-green-400 mb-4 font-mono uppercase tracking-wider">
                {i.deterministic.comparison.breakpilot.title}
              </h4>
              <ul className="space-y-3">
                {i.deterministic.comparison.breakpilot.items.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm text-white/70">
                    <Check className="w-4 h-4 text-green-400 mt-0.5 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </FadeInView>
      </div>
    </section>
  )
}
