'use client'

import { motion } from 'framer-motion'
import { X } from 'lucide-react'
import { useApp } from '@/lib/context'

const data = {
  de: {
    before: {
      title: 'Ausgangslage',
      items: [
        '15 Jahre altes Embedded Board',
        'Kein Secure Element / TPM',
        'Kein Secure Boot, kein OTA',
        'Hardcoded Credentials im Firmware',
        'Alter TCP/IP Stack ohne Patches',
        'Penetration-Test: 187 Findings',
        '"Was davon ist wirklich kritisch?"',
      ],
    },
    after: {
      title: 'BreakPilot Delta-Analyse',
      items: [
        { text: '3 Findings blockieren CE/CRA → sofort handeln', type: 'critical' as const },
        { text: '12 Findings sind Software-only Fixes', type: 'fixable' as const },
        { text: '172 Findings sind kosmetisch oder low-risk', type: 'ok' as const },
        { text: 'Hardware-Redesign: wahrscheinlich NICHT nötig', type: 'ok' as const },
        { text: 'RED-Re-Zertifizierung: nur bei Funkmodul-Änderung', type: 'fixable' as const },
        { text: 'Geschätzter Aufwand: €15k statt €50k', type: 'ok' as const },
        { text: 'Jira-Tickets mit Fix-Vorschlägen erstellt', type: 'ok' as const },
      ],
    },
  },
  en: {
    before: {
      title: 'Starting Point',
      items: [
        '15-year-old embedded board',
        'No Secure Element / TPM',
        'No Secure Boot, no OTA',
        'Hardcoded credentials in firmware',
        'Legacy TCP/IP stack without patches',
        'Penetration test: 187 findings',
        '"Which ones actually matter?"',
      ],
    },
    after: {
      title: 'BreakPilot Delta Analysis',
      items: [
        { text: '3 findings block CE/CRA → act immediately', type: 'critical' as const },
        { text: '12 findings are software-only fixes', type: 'fixable' as const },
        { text: '172 findings are cosmetic or low-risk', type: 'ok' as const },
        { text: 'Hardware redesign: probably NOT necessary', type: 'ok' as const },
        { text: 'RED re-certification: only if RF module changes', type: 'fixable' as const },
        { text: 'Estimated effort: €15k instead of €50k', type: 'ok' as const },
        { text: 'Jira tickets with fix suggestions created', type: 'ok' as const },
      ],
    },
  },
}

const typeColors = {
  critical: 'text-red-400',
  fixable: 'text-amber-400',
  ok: 'text-green-400',
}

const typeIcons = {
  critical: '●',
  fixable: '◐',
  ok: '●',
}

export default function DeltaImpactSection() {
  const { lang } = useApp()
  const d = data[lang]

  return (
    <section className="py-16 sm:py-24">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 relative">
          {/* Before */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
          >
            <div className="rounded-2xl border border-red-500/15 bg-red-500/[0.03] p-6 h-full">
              <h3 className="text-sm font-bold text-red-400 mb-5 font-mono uppercase tracking-wider">
                {d.before.title}
              </h3>
              <ul className="space-y-3">
                {d.before.items.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm text-white/40">
                    <X className="w-4 h-4 text-red-400/50 mt-0.5 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </motion.div>

          {/* After */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}
          >
            <div className="rounded-2xl border border-green-500/15 bg-green-500/[0.03] p-6 h-full">
              <h3 className="text-sm font-bold text-green-400 mb-5 font-mono uppercase tracking-wider">
                {d.after.title}
              </h3>
              <ul className="space-y-3">
                {d.after.items.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm text-white/60">
                    <span className={`mt-0.5 shrink-0 text-xs ${typeColors[item.type]}`}>
                      {typeIcons[item.type]}
                    </span>
                    {item.text}
                  </li>
                ))}
              </ul>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}
