'use client'

import { ArrowRight } from 'lucide-react'
import { useApp } from '@/lib/context'
import FadeInView from '@/components/ui/FadeInView'
import GlassCard from '@/components/ui/GlassCard'
import TechBadge from '@/components/ui/TechBadge'
import SectionHeading from '@/components/ui/SectionHeading'

const tools = [
  { name: 'SAST', de: 'Statische Code-Analyse für Firmware/Embedded', en: 'Static code analysis for firmware/embedded' },
  { name: 'DAST', de: 'Dynamische Sicherheitstests gegen laufende Systeme', en: 'Dynamic security testing against running systems' },
  { name: 'SBOM', de: 'Software Bill of Materials — CRA-Pflicht ab 2027', en: 'Software Bill of Materials — CRA mandatory from 2027' },
  { name: 'Pentesting', de: 'Automatisierte Schwachstellensuche', en: 'Automated vulnerability scanning' },
  { name: 'Secret Detection', de: 'Hardcoded Credentials im Code finden', en: 'Find hardcoded credentials in code' },
  { name: 'Dependency Audit', de: 'Bekannte CVEs in Abhängigkeiten', en: 'Known CVEs in dependencies' },
]

const heading = {
  de: {
    tag: 'SECURITY TOOLCHAIN',
    title: 'Scan → Priorisierung →',
    titleHighlight: 'Fix → Nachweis.',
    subtitle: 'Jedes Finding wird automatisch priorisiert, als Jira-Ticket erstellt und mit Code-Fix-Vorschlag versehen.',
    pipeline: ['Scan', 'Findings', 'Priorisierung', 'Jira-Ticket', 'Fix', 'Verifikation', 'Evidence'],
    jiraTitle: 'Automatische Entscheidungsunterstützung',
    jiraItems: [
      'Blocker: Finding blockiert CE/CRA-Konformität',
      'Major: Software-only Fix möglich',
      'Minor: Kosmetisch, kein Compliance-Impact',
      'Hardware vs. Software: Brauche ich ein Board-Redesign?',
      'Code-Fix-Vorschlag direkt im Ticket',
    ],
  },
  en: {
    tag: 'SECURITY TOOLCHAIN',
    title: 'Scan → Prioritize →',
    titleHighlight: 'Fix → Evidence.',
    subtitle: 'Every finding is automatically prioritized, created as a Jira ticket and provided with a code fix suggestion.',
    pipeline: ['Scan', 'Findings', 'Prioritization', 'Jira Ticket', 'Fix', 'Verification', 'Evidence'],
    jiraTitle: 'Automatic decision support',
    jiraItems: [
      'Blocker: Finding blocks CE/CRA compliance',
      'Major: Software-only fix possible',
      'Minor: Cosmetic, no compliance impact',
      'Hardware vs. Software: Do I need a board redesign?',
      'Code fix suggestion directly in the ticket',
    ],
  },
}

export default function SecurityToolchainSection() {
  const { lang } = useApp()
  const h = heading[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">
        <SectionHeading tag={h.tag} title={h.title} titleHighlight={h.titleHighlight} subtitle={h.subtitle} />

        {/* Pipeline visualization */}
        <FadeInView className="mb-16">
          <div className="flex flex-wrap items-center justify-center gap-2">
            {h.pipeline.map((step, idx) => (
              <div key={idx} className="flex items-center gap-2">
                <span className="px-3 py-1.5 rounded-lg bg-accent-electric/10 border border-accent-electric/15 text-xs text-accent-electric font-mono">
                  {step}
                </span>
                {idx < h.pipeline.length - 1 && (
                  <ArrowRight className="w-3 h-3 text-white/20" />
                )}
              </div>
            ))}
          </div>
        </FadeInView>

        {/* Tools grid + Jira integration */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <FadeInView direction="left">
            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
              {tools.map((tool, idx) => (
                <GlassCard key={idx} delay={idx * 0.05} className="p-4">
                  <p className="font-mono text-sm font-bold text-accent-electric mb-1">{tool.name}</p>
                  <p className="text-xs text-white/40">{lang === 'de' ? tool.de : tool.en}</p>
                </GlassCard>
              ))}
            </div>
          </FadeInView>

          <FadeInView direction="right">
            <div className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-6 h-full">
              <h3 className="text-lg font-bold mb-4">{h.jiraTitle}</h3>
              <ul className="space-y-3 mb-6">
                {h.jiraItems.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 text-sm text-white/50">
                    <span className={`mt-1 w-2 h-2 rounded-full shrink-0 ${idx === 0 ? 'bg-red-400' : idx === 1 ? 'bg-amber-400' : idx === 2 ? 'bg-green-400' : 'bg-accent-electric'}`} />
                    {item}
                  </li>
                ))}
              </ul>
              <div className="flex flex-wrap gap-2">
                {['Jira', 'Linear', 'GitLab', 'GitHub'].map(t => (
                  <TechBadge key={t}>{t}</TechBadge>
                ))}
              </div>
            </div>
          </FadeInView>
        </div>
      </div>
    </section>
  )
}
