'use client'

import { CRADemo } from '../_hooks/useCRADemo'

export function CyberSafetyHero({ data }: { data: CRADemo }) {
  if (!data.cross_links.length) return null
  return (
    <section className="rounded-xl border-2 border-orange-300 dark:border-orange-700 bg-orange-50/60 dark:bg-orange-900/15">
      <div className="px-5 py-4 border-b border-orange-200 dark:border-orange-800/60">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
          Cyber öffnet eine bestehende CE-Gefährdung erneut
        </h2>
        <p className="text-sm text-gray-600 dark:text-gray-300 mt-1">
          Wo ein Cyber-Risiko eine in Ihrer CE-Risikobeurteilung bereits{' '}
          <span className="font-medium">mechanisch gemilderte</span> Gefährdung wieder aufreißt
          — der Schnittpunkt von Maschinenverordnung und Cyber Resilience Act.
        </p>
      </div>
      <div className="p-5 space-y-4">
        {data.cross_links.map((cl, i) => (
          <div key={i} className="rounded-lg border border-orange-200 dark:border-orange-800/60 bg-white dark:bg-gray-800 p-5">
            <p className="text-lg font-semibold text-gray-900 dark:text-gray-100">{cl.safety_hazard}</p>
            <p className="text-sm text-gray-500 mt-0.5">{cl.safety_ref}</p>

            <div className="mt-3 flex flex-wrap items-center gap-3 text-sm">
              <span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300 px-3 py-1 font-medium">
                CE: gemindert
              </span>
              <span className="text-gray-400">→</span>
              <span className="inline-flex items-center gap-1.5 rounded-full bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300 px-3 py-1 font-medium">
                Cyber: wieder offen
              </span>
            </div>

            <div className="mt-4 grid gap-3 md:grid-cols-2">
              <div className="text-sm text-gray-700 dark:text-gray-200">
                <span className="text-gray-500">Bisherige Schutzmaßnahme:</span><br />
                {cl.original_measure}
              </div>
              <div className="text-sm text-gray-700 dark:text-gray-200">
                <span className="text-gray-500">Auslösende Cyber-Befunde:</span><br />
                {cl.cyber_finding_ids.join(', ')}
              </div>
            </div>

            <p className="text-sm text-gray-800 dark:text-gray-200 mt-3">
              <span className="font-medium">Warum:</span> {cl.cyber_breaks_it}
            </p>
            <span className="inline-block mt-3 rounded px-2.5 py-1 text-sm font-semibold bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300">
              Restrisiko: {cl.residual}
            </span>
          </div>
        ))}
      </div>
    </section>
  )
}
