'use client'

import { TrendingUp, ShieldAlert, Euro } 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 AnimatedCounter from '@/components/ui/AnimatedCounter'
import FadeInView from '@/components/ui/FadeInView'

const icons = [TrendingUp, ShieldAlert, Euro]

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

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

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {i.problem.cards.map((card, idx) => {
            const Icon = icons[idx]
            return (
              <GlassCard key={idx} delay={idx * 0.1}>
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 rounded-xl bg-accent-electric/10 flex items-center justify-center">
                    <Icon className="w-5 h-5 text-accent-electric" />
                  </div>
                </div>
                <div className="text-3xl font-bold mb-2">
                  <AnimatedCounter value={card.metric} />
                </div>
                <p className="text-sm font-medium text-white/80 mb-2">{card.label}</p>
                <p className="text-sm text-white/40 mb-3">{card.description}</p>
                <p className="mono-label text-xs">{card.source}</p>
              </GlassCard>
            )
          })}
        </div>

        <FadeInView delay={0.4} className="mt-12 text-center">
          <p className="text-white/40 text-sm max-w-2xl mx-auto border-t border-white/[0.06] pt-8">
            Die Konsequenz: Unternehmen riskieren Bussgelder, Betriebsstillstand und Wettbewerbsnachteile
            — oder sie investieren in eine Plattform, die regulatorische Komplexitaet deterministisch beherrscht.
          </p>
        </FadeInView>
      </div>
    </section>
  )
}
