'use client'

import { Mail, Table, UserSearch, Clock, AlertCircle, Euro, Timer, HelpCircle } from 'lucide-react'
import { useApp } from '@/lib/context'
import FadeInView from '@/components/ui/FadeInView'
import GradientText from '@/components/ui/GradientText'

const steps = {
  de: [
    { icon: Mail, label: 'Alles per Email', detail: 'Anforderungen, Rückfragen, Freigaben — verstreut in 200 Threads' },
    { icon: Table, label: 'Alles per Excel', detail: 'Risikobeurteilungen, Maßnahmenlisten, Normverweise in 15 Dateien' },
    { icon: UserSearch, label: 'Hinterherlaufen', detail: '"Wer war nochmal zuständig für die EMV-Messung?"' },
    { icon: Clock, label: 'Wartezeiten & Urlaub', detail: 'CE-Review blockiert weil der Experte 3 Wochen weg ist' },
    { icon: AlertCircle, label: 'CE-Berater zu spät', detail: 'Maschine ist fertig, CE-Bewertung fängt erst jetzt an' },
    { icon: Euro, label: '€50.000+ pro Jahr', detail: 'Externe Audits, Penetrationstests, CE-Beratung, Normen kaufen' },
    { icon: Timer, label: 'Time-to-Market verzögert', detail: 'Wochen bis Monate für eine vollständige CE-Akte' },
    { icon: HelpCircle, label: 'Silo-Experten', detail: 'CRA, AI Act, MVO, NIS2 — jeder kennt nur sein Thema' },
  ],
  en: [
    { icon: Mail, label: 'Everything by email', detail: 'Requirements, follow-ups, approvals — scattered across 200 threads' },
    { icon: Table, label: 'Everything in Excel', detail: 'Risk assessments, mitigation lists, norm references in 15 files' },
    { icon: UserSearch, label: 'Chasing people', detail: '"Who was responsible for the EMC measurement again?"' },
    { icon: Clock, label: 'Wait times & vacation', detail: 'CE review blocked because the expert is away for 3 weeks' },
    { icon: AlertCircle, label: 'CE consultants too late', detail: 'Machine is finished, CE assessment only starts now' },
    { icon: Euro, label: '€50,000+ per year', detail: 'External audits, penetration tests, CE consulting, buying norms' },
    { icon: Timer, label: 'Time-to-market delayed', detail: 'Weeks to months for a complete CE file' },
    { icon: HelpCircle, label: 'Silo experts', detail: 'CRA, AI Act, MVO, NIS2 — everyone only knows their topic' },
  ],
}

const heading = {
  de: { tag: 'DAS PROBLEM', title: 'So läuft es', titleHighlight: 'heute.', bridge: 'BreakPilot baut die Brücke zwischen Code, Produkt und Regulation — in Echtzeit, ohne Excel, Email und ohne Hinterherlaufen.' },
  en: { tag: 'THE PROBLEM', title: "How it works", titleHighlight: 'today.', bridge: 'BreakPilot bridges the gap between code, product and regulation — in real-time, without Excel, email or chasing people.' },
}

export default function ProblemFlowSection() {
  const { lang } = useApp()
  const h = heading[lang]
  const items = steps[lang]

  return (
    <section className="py-24 sm:py-32 section-alt">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <FadeInView className="text-center mb-16">
          <p className="mono-label mb-4">{h.tag}</p>
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            {h.title} <GradientText>{h.titleHighlight}</GradientText>
          </h2>
        </FadeInView>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-16">
          {items.map((step, idx) => {
            const Icon = step.icon
            return (
              <FadeInView key={idx} delay={idx * 0.06}>
                <div className="rounded-xl border border-red-500/10 bg-red-500/[0.03] p-5 h-full">
                  <div className="flex items-center gap-3 mb-3">
                    <div className="w-8 h-8 rounded-lg bg-red-500/10 flex items-center justify-center">
                      <Icon className="w-4 h-4 text-red-400" />
                    </div>
                    <span className="font-mono text-xs text-red-400/60">{String(idx + 1).padStart(2, '0')}</span>
                  </div>
                  <h3 className="text-sm font-bold mb-1 text-red-300/80">{step.label}</h3>
                  <p className="text-xs text-white/30 leading-relaxed">{step.detail}</p>
                </div>
              </FadeInView>
            )
          })}
        </div>

        <FadeInView>
          <div className="rounded-2xl border border-accent-electric/20 bg-accent-electric/[0.04] p-8 text-center">
            <p className="text-lg text-white/70 max-w-3xl mx-auto font-medium leading-relaxed">
              {h.bridge}
            </p>
          </div>
        </FadeInView>
      </div>
    </section>
  )
}
