'use client'

import Link from 'next/link'
import { ArrowRight, Scan, FileCheck, Users } from 'lucide-react'
import { useApp } from '@/lib/context'
import FadeInView from '@/components/ui/FadeInView'
import GlassCard from '@/components/ui/GlassCard'

const icons = [Scan, FileCheck, Users]
const gradients = ['from-red-500/10 to-amber-500/10', 'from-accent-electric/10 to-accent-indigo/10', 'from-accent-purple/10 to-accent-electric/10']

const cases = {
  de: [
    {
      title: '187 Pentest-Findings — was davon ist wirklich kritisch?',
      description: 'SAST/DAST + Pentesting liefern 187 Findings für ein Embedded Board. BreakPilot priorisiert automatisch: 3 blockieren CE/CRA, 12 sind Software-only Fixes, der Rest ist kosmetisch. Jira-Tickets mit Code-Fix-Vorschlägen werden automatisch erstellt.',
      highlight: 'Hardware-Redesign für €50k? Wahrscheinlich nicht nötig.',
      href: '/product-compliance',
      cta: 'Product Compliance ansehen',
    },
    {
      title: 'CE-Akte in Stunden statt Monaten',
      description: 'Sondermaschinenbauer beschreibt einen Cobot in 14 Textfeldern. 1.058 Hazard Patterns feuern deterministisch. 12 Gefährdungen, 30 Maßnahmen, 45 Normen — automatisch zugeordnet, nicht generiert.',
      highlight: 'CE-Akte nach MVO 2023/1230 Anhang IV per Klick.',
      href: '/plattform',
      cta: 'Plattform entdecken',
    },
    {
      title: 'Der CE-Experte geht in Rente',
      description: 'Ein Junior-Konstrukteur nutzt BreakPilot für seine erste Risikobeurteilung. Konsistente Erstbewertung mit Explainability. Der Senior reviewt nur noch, statt alles selbst zu machen.',
      highlight: 'Expertenwissen operationalisiert, nicht in Köpfen eingesperrt.',
      href: '/plattform',
      cta: 'Plattform entdecken',
    },
  ],
  en: [
    {
      title: '187 pentest findings — which ones actually matter?',
      description: 'SAST/DAST + pentesting deliver 187 findings for an embedded board. BreakPilot prioritizes automatically: 3 block CE/CRA, 12 are software-only fixes, the rest is cosmetic. Jira tickets with code fix suggestions are created automatically.',
      highlight: 'Hardware redesign for €50k? Probably not necessary.',
      href: '/product-compliance',
      cta: 'View Product Compliance',
    },
    {
      title: 'CE file in hours instead of months',
      description: 'A special machine builder describes a cobot in 14 text fields. 1,058 hazard patterns fire deterministically. 12 hazards, 30 mitigations, 45 norms — automatically mapped, not generated.',
      highlight: 'CE file per Machinery Regulation 2023/1230 Annex IV with one click.',
      href: '/plattform',
      cta: 'Discover Platform',
    },
    {
      title: 'The CE expert is retiring',
      description: 'A junior engineer uses BreakPilot for their first risk assessment. Consistent initial assessment with explainability. The senior only reviews instead of doing everything.',
      highlight: 'Expert knowledge operationalized, not locked in heads.',
      href: '/plattform',
      cta: 'Discover Platform',
    },
  ],
}

export default function UseCaseCards() {
  const { lang } = useApp()
  const items = cases[lang]

  return (
    <section className="py-24 sm:py-32">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {items.map((item, idx) => {
            const Icon = icons[idx]
            return (
              <GlassCard key={idx} delay={idx * 0.1} hover={false} className="flex flex-col">
                <div className={`w-12 h-12 rounded-2xl bg-gradient-to-br ${gradients[idx]} flex items-center justify-center mb-5`}>
                  <Icon className="w-6 h-6 text-white/70" />
                </div>
                <h3 className="text-lg font-bold mb-3 leading-snug">{item.title}</h3>
                <p className="text-sm text-white/40 mb-4 flex-1">{item.description}</p>
                <p className="text-sm text-accent-electric font-medium mb-5">{item.highlight}</p>
                <Link
                  href={item.href}
                  className="inline-flex items-center gap-2 text-sm text-white/50 hover:text-white transition-colors group"
                >
                  {item.cta}
                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </Link>
              </GlassCard>
            )
          })}
        </div>
      </div>
    </section>
  )
}
