'use client'

import { Check } from 'lucide-react'
import { t } from '@/lib/content'
import { useApp } from '@/lib/context'
import SectionHeading from '@/components/ui/SectionHeading'
import FadeInView from '@/components/ui/FadeInView'

const riskColors = {
  red: { bg: 'bg-red-500/10', border: 'border-red-500/20', text: 'text-red-400', bar: 'bg-red-500' },
  amber: { bg: 'bg-amber-500/10', border: 'border-amber-500/20', text: 'text-amber-400', bar: 'bg-amber-500' },
  blue: { bg: 'bg-blue-500/10', border: 'border-blue-500/20', text: 'text-blue-400', bar: 'bg-blue-500' },
  green: { bg: 'bg-green-500/10', border: 'border-green-500/20', text: 'text-green-400', bar: 'bg-green-500' },
}

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

  return (
    <section id="ai-governance" 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.aiGovernance.tag}
          title={i.aiGovernance.title}
          titleHighlight={i.aiGovernance.titleHighlight}
          subtitle={i.aiGovernance.subtitle}
        />

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <FadeInView direction="left">
            <div className="space-y-3">
              {i.aiGovernance.riskLevels.map((level, idx) => {
                const colors = riskColors[level.color]
                return (
                  <div key={idx} className={`rounded-xl border ${colors.border} ${colors.bg} p-4 flex items-center gap-4`}>
                    <div className={`w-1 h-10 rounded-full ${colors.bar} shrink-0`} />
                    <div>
                      <h4 className={`text-sm font-bold ${colors.text}`}>{level.level}</h4>
                      <p className="text-xs text-white/40">{level.description}</p>
                    </div>
                  </div>
                )
              })}
            </div>
          </FadeInView>

          <FadeInView direction="right">
            <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-6 h-full">
              <h3 className="text-lg font-bold mb-4">Deterministische AI-Act-Compliance</h3>
              <ul className="space-y-3">
                {i.aiGovernance.features.map((feature, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm text-white/60">
                    <Check className="w-4 h-4 text-accent-signal mt-0.5 shrink-0" />
                    {feature}
                  </li>
                ))}
              </ul>
            </div>
          </FadeInView>
        </div>
      </div>
    </section>
  )
}
