'use client'

import { Shield, FileCheck, ClipboardCheck } from 'lucide-react'
import { useApp } from '@/lib/context'
import FadeInView from '@/components/ui/FadeInView'
import AnimatedCounter from '@/components/ui/AnimatedCounter'

const pillars = {
  de: [
    { icon: Shield, label: 'Deterministisch', detail: 'Regelbasiert, nicht generativ' },
    { icon: FileCheck, label: 'Nachvollziehbar', detail: 'Jedes Ergebnis mit Rechtsquelle' },
    { icon: ClipboardCheck, label: 'Auditierbar', detail: 'Vollständiger Decision Trail' },
  ],
  en: [
    { icon: Shield, label: 'Deterministic', detail: 'Rule-based, not generative' },
    { icon: FileCheck, label: 'Traceable', detail: 'Every result with legal source' },
    { icon: ClipboardCheck, label: 'Auditable', detail: 'Complete decision trail' },
  ],
}

const stats = [
  { value: '294.000+', labelDe: 'atomare Controls', labelEn: 'atomic controls' },
  { value: '380+', labelDe: 'Rechtsquellen', labelEn: 'legal sources' },
  { value: '1.058', labelDe: 'Hazard Patterns', labelEn: 'hazard patterns' },
  { value: '751', labelDe: 'Normen', labelEn: 'standards' },
]

export default function TrustBar() {
  const { lang } = useApp()
  const items = pillars[lang]

  return (
    <section className="py-24 sm:py-32 section-alt">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Trust pillars */}
        <FadeInView>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
            {items.map((pillar, idx) => {
              const Icon = pillar.icon
              return (
                <div key={idx} className="flex items-center gap-4 p-4 rounded-xl border border-white/[0.06] bg-white/[0.03]">
                  <div className="w-10 h-10 rounded-xl bg-accent-indigo/10 flex items-center justify-center shrink-0">
                    <Icon className="w-5 h-5 text-accent-indigo" />
                  </div>
                  <div>
                    <h3 className="text-sm font-bold">{pillar.label}</h3>
                    <p className="text-xs text-white/40">{pillar.detail}</p>
                  </div>
                </div>
              )
            })}
          </div>
        </FadeInView>

        {/* Stats */}
        <FadeInView delay={0.2}>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {stats.map((stat, idx) => (
              <div key={idx} className="text-center">
                <div className="text-3xl font-bold mb-1 gradient-text">
                  <AnimatedCounter value={stat.value} />
                </div>
                <p className="text-xs text-white/40">{lang === 'de' ? stat.labelDe : stat.labelEn}</p>
              </div>
            ))}
          </div>
        </FadeInView>
      </div>
    </section>
  )
}
