import { Metadata } from 'next'
import Link from 'next/link'

export const metadata: Metadata = {
  title: 'NIS2-Richtlinie Checkliste | BreakPilot Comply',
  description: 'Pruefen Sie mit unserer Checkliste, ob und wie Ihr Unternehmen von der NIS2-Richtlinie betroffen ist.',
}

export default function NIS2ChecklistePage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero */}
      <section className="pt-12 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-primary-50 to-white">
        <div className="max-w-4xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-6">
            EU-Richtlinie 2022/2555
          </div>
          <h1 className="text-4xl sm:text-5xl font-bold text-slate-900 tracking-tight">
            NIS2-Richtlinie Checkliste
          </h1>
          <p className="mt-6 text-xl text-slate-600 max-w-2xl mx-auto">
            Pruefen Sie mit unserer Checkliste, ob und wie Ihr Unternehmen von der NIS2-Richtlinie betroffen ist &ndash; und welche Massnahmen Sie umsetzen muessen.
          </p>
        </div>
      </section>

      {/* Table of Contents */}
      <section className="py-8 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto">
          <div className="bg-slate-50 border border-slate-200 rounded-2xl p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Inhalt</h2>
            <nav className="space-y-2 text-sm">
              <a href="#was-ist-nis2" className="block text-primary-600 hover:text-primary-800 transition-colors">1. Was ist die NIS2-Richtlinie?</a>
              <a href="#wer-ist-betroffen" className="block text-primary-600 hover:text-primary-800 transition-colors">2. Wer ist betroffen?</a>
              <a href="#schwellenwerte" className="block text-primary-600 hover:text-primary-800 transition-colors">3. Schwellenwerte</a>
              <a href="#mindestanforderungen" className="block text-primary-600 hover:text-primary-800 transition-colors">4. Die 10 Mindestanforderungen</a>
              <a href="#meldepflichten" className="block text-primary-600 hover:text-primary-800 transition-colors">5. Meldepflichten</a>
              <a href="#strafen" className="block text-primary-600 hover:text-primary-800 transition-colors">6. Strafen und Bussgelder</a>
              <a href="#checkliste" className="block text-primary-600 hover:text-primary-800 transition-colors">7. Checkliste: In 5 Schritten NIS2-konform</a>
              <a href="#breakpilot-comply" className="block text-primary-600 hover:text-primary-800 transition-colors">8. BreakPilot Comply und NIS2</a>
            </nav>
          </div>
        </div>
      </section>

      {/* Article Content */}
      <article className="py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto">

          {/* Section 1 */}
          <section id="was-ist-nis2" className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-6">
              1. Was ist die NIS2-Richtlinie?
            </h2>
            <div className="prose prose-slate max-w-none space-y-4">
              <p className="text-lg text-slate-600 leading-relaxed">
                Die <strong className="text-slate-900">NIS2-Richtlinie</strong> (Network and Information Security Directive 2, EU 2022/2555) ist die ueberarbeitete EU-Richtlinie fuer Cybersicherheit. Sie loest die urspruengliche NIS-Richtlinie von 2016 ab und erweitert deren Anwendungsbereich erheblich.
              </p>
              <p className="text-lg text-slate-600 leading-relaxed">
                Ziel der NIS2 ist es, ein einheitlich hohes Cybersicherheitsniveau in allen EU-Mitgliedstaaten sicherzustellen. Die Richtlinie verpflichtet Unternehmen und Einrichtungen in kritischen und wichtigen Sektoren, angemessene Sicherheitsmassnahmen zu ergreifen und Sicherheitsvorfaelle zu melden.
              </p>
              <p className="text-lg text-slate-600 leading-relaxed">
                In Deutschland wird die NIS2-Richtlinie durch das <strong className="text-slate-900">NIS2-Umsetzungs- und Cybersicherheitsstaerkungsgesetz (NIS2UmsuCG)</strong> in nationales Recht umgesetzt. Dieses Gesetz aendert unter anderem das BSI-Gesetz (BSIG) und fuehrt neue Pflichten fuer Unternehmen ein. Die nationale Umsetzung haette bis Oktober 2024 erfolgen sollen; in Deutschland befindet sich das Gesetz Stand 2025 noch im Gesetzgebungsverfahren.
              </p>
              <div className="bg-primary-50 border border-primary-200 rounded-xl p-5 mt-6">
                <p className="text-primary-800 font-medium">
                  Wichtig: Auch wenn das deutsche Umsetzungsgesetz noch nicht in Kraft getreten ist, sollten Unternehmen bereits jetzt mit der Vorbereitung beginnen. Die Anforderungen der EU-Richtlinie sind klar definiert und die Umsetzungsfristen laufen.
                </p>
              </div>
            </div>
          </section>

          {/* Section 2 */}
          <section id="wer-ist-betroffen" className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-6">
              2. Wer ist betroffen?
            </h2>
            <div className="space-y-6">
              <p className="text-lg text-slate-600 leading-relaxed">
                Die NIS2-Richtlinie unterscheidet zwei Kategorien von Einrichtungen, die jeweils unterschiedlichen Pflichten und Sanktionsrahmen unterliegen:
              </p>

              {/* Wesentliche Einrichtungen */}
              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                <div className="bg-primary-600 text-white px-6 py-3">
                  <h3 className="text-lg font-semibold">Wesentliche Einrichtungen (Essential Entities)</h3>
                </div>
                <div className="p-6">
                  <p className="text-slate-600 mb-4">
                    Unternehmen in Sektoren mit hoher Kritikalitaet nach Anhang I der Richtlinie:
                  </p>
                  <div className="grid sm:grid-cols-2 gap-3">
                    {[
                      'Energie (Strom, Gas, Oel, Fernwaerme, Wasserstoff)',
                      'Verkehr (Luft, Schiene, Wasser, Strasse)',
                      'Bankwesen',
                      'Finanzmarktinfrastrukturen',
                      'Gesundheitswesen',
                      'Trinkwasserversorgung',
                      'Abwasserentsorgung',
                      'Digitale Infrastruktur (DNS, TLD, Cloud, RZ)',
                      'ICT-Service-Management (B2B)',
                      'Oeffentliche Verwaltung',
                      'Weltraum',
                    ].map((sector) => (
                      <div key={sector} className="flex items-start gap-2">
                        <span className="text-primary-500 mt-1 flex-shrink-0">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                          </svg>
                        </span>
                        <span className="text-sm text-slate-700">{sector}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Wichtige Einrichtungen */}
              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                <div className="bg-accent-600 text-white px-6 py-3">
                  <h3 className="text-lg font-semibold">Wichtige Einrichtungen (Important Entities)</h3>
                </div>
                <div className="p-6">
                  <p className="text-slate-600 mb-4">
                    Unternehmen in weiteren kritischen Sektoren nach Anhang II:
                  </p>
                  <div className="grid sm:grid-cols-2 gap-3">
                    {[
                      'Post- und Kurierdienste',
                      'Abfallwirtschaft',
                      'Chemische Industrie',
                      'Lebensmittelproduktion und -vertrieb',
                      'Verarbeitendes Gewerbe (Medizinprodukte, Elektronik, Maschinenbau, Kfz)',
                      'Digitale Dienste (Marktplaetze, Suchmaschinen, soziale Netzwerke)',
                      'Forschungseinrichtungen',
                    ].map((sector) => (
                      <div key={sector} className="flex items-start gap-2">
                        <span className="text-accent-500 mt-1 flex-shrink-0">
                          <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                          </svg>
                        </span>
                        <span className="text-sm text-slate-700">{sector}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Section 3 */}
          <section id="schwellenwerte" className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-6">
              3. Schwellenwerte
            </h2>
            <p className="text-lg text-slate-600 leading-relaxed mb-6">
              Ob ein Unternehmen unter die NIS2-Richtlinie faellt, haengt neben der Sektorzugehoerigkeit auch von der Unternehmensgroesse ab. Die Richtlinie nutzt die EU-KMU-Definition:
            </p>
            <div className="overflow-x-auto">
              <table className="w-full border-collapse">
                <thead>
                  <tr className="bg-slate-100">
                    <th className="text-left px-4 py-3 text-sm font-semibold text-slate-700 border border-slate-200">Kategorie</th>
                    <th className="text-left px-4 py-3 text-sm font-semibold text-slate-700 border border-slate-200">Mitarbeiter</th>
                    <th className="text-left px-4 py-3 text-sm font-semibold text-slate-700 border border-slate-200">Jahresumsatz</th>
                    <th className="text-left px-4 py-3 text-sm font-semibold text-slate-700 border border-slate-200">Einstufung</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="bg-primary-50">
                    <td className="px-4 py-3 text-sm text-slate-700 border border-slate-200 font-medium">Grossunternehmen</td>
                    <td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">&ge; 250</td>
                    <td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">&gt; 50 Mio. EUR</td>
                    <td className="px-4 py-3 text-sm border border-slate-200">
                      <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800">
                        Wesentlich (Anhang I) / Wichtig (Anhang II)
                      </span>
                    </td>
                  </tr>
                  <tr>
                    <td className="px-4 py-3 text-sm text-slate-700 border border-slate-200 font-medium">Mittleres Unternehmen</td>
                    <td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">50&ndash;249</td>
                    <td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">10&ndash;50 Mio. EUR</td>
                    <td className="px-4 py-3 text-sm border border-slate-200">
                      <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-accent-100 text-accent-800">
                        Wichtig (beide Anhaenge)
                      </span>
                    </td>
                  </tr>
                  <tr className="bg-slate-50">
                    <td className="px-4 py-3 text-sm text-slate-700 border border-slate-200 font-medium">Kleinunternehmen</td>
                    <td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">&lt; 50</td>
                    <td className="px-4 py-3 text-sm text-slate-700 border border-slate-200">&lt; 10 Mio. EUR</td>
                    <td className="px-4 py-3 text-sm border border-slate-200">
                      <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600">
                        Grundsaetzlich nicht betroffen*
                      </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p className="text-sm text-slate-500 mt-3">
              * Ausnahmen: Bestimmte Einrichtungen wie DNS-Diensteanbieter, TLD-Registrierungsstellen, qualifizierte Vertrauensdiensteanbieter und Betreiber oeffentlicher Kommunikationsnetze fallen unabhaengig von ihrer Groesse unter die NIS2-Richtlinie.
            </p>
          </section>

          {/* Section 4 */}
          <section id="mindestanforderungen" className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-6">
              4. Die 10 Mindestanforderungen
            </h2>
            <p className="text-lg text-slate-600 leading-relaxed mb-8">
              Artikel 21 der NIS2-Richtlinie definiert zehn Mindestmassnahmen, die betroffene Einrichtungen umsetzen muessen. Diese bilden das Fundament eines angemessenen Cybersicherheitsniveaus:
            </p>
            <div className="space-y-4">
              {[
                {
                  num: 1,
                  title: 'Risikoanalyse und Sicherheitskonzepte',
                  desc: 'Erstellung und Pflege von Konzepten fuer die Risikoanalyse und Sicherheit von Informationssystemen. Dazu gehoert eine systematische Bewertung von Bedrohungen, Schwachstellen und deren potenziellen Auswirkungen.',
                },
                {
                  num: 2,
                  title: 'Bewertung von Sicherheitsvorfaellen (Incident Handling)',
                  desc: 'Etablierung von Prozessen zur Erkennung, Analyse, Eindaemmung und Behebung von Sicherheitsvorfaellen. Dazu gehoert auch ein klar definierter Eskalationsprozess.',
                },
                {
                  num: 3,
                  title: 'Business Continuity und Krisenmanagement',
                  desc: 'Sicherstellung der Geschaeftskontinuitaet durch Backup-Management, Disaster Recovery, Notfallplaene und Krisenmanagement-Verfahren.',
                },
                {
                  num: 4,
                  title: 'Sicherheit in der Lieferkette',
                  desc: 'Bewertung und Management von Cybersicherheitsrisiken in der gesamten Lieferkette, einschliesslich der Beziehungen zu direkten Lieferanten und Dienstleistern.',
                },
                {
                  num: 5,
                  title: 'Sicherheit bei Erwerb, Entwicklung und Wartung von IT-Systemen',
                  desc: 'Integration von Sicherheitsanforderungen in den gesamten Lebenszyklus von Netzwerk- und Informationssystemen, einschliesslich des Umgangs mit Schwachstellen.',
                },
                {
                  num: 6,
                  title: 'Management von Schwachstellen (Vulnerability Management)',
                  desc: 'Konzepte und Verfahren zur Bewertung der Wirksamkeit von Risikomanagement-Massnahmen. Regelmaessige Schwachstellen-Scans und Patch-Management gehoeren dazu.',
                },
                {
                  num: 7,
                  title: 'Bewertung der Wirksamkeit von Sicherheitsmassnahmen',
                  desc: 'Regelmaessige Ueberpruefung und Bewertung der implementierten Cybersicherheitsmassnahmen, z.B. durch Audits, Penetrationstests oder Tabletop-Uebungen.',
                },
                {
                  num: 8,
                  title: 'Kryptographie und Verschluesselung',
                  desc: 'Konzepte und Verfahren fuer den Einsatz von Kryptographie und gegebenenfalls Verschluesselung zum Schutz von Daten bei der Uebertragung und Speicherung.',
                },
                {
                  num: 9,
                  title: 'Personalsicherheit und Schulungen',
                  desc: 'Sicherheit des Personals, Zugriffskontrollkonzepte und Management von Anlagenwerten. Dazu gehoeren regelmaessige Cybersicherheitsschulungen fuer alle Mitarbeiter und insbesondere fuer die Geschaeftsleitung.',
                },
                {
                  num: 10,
                  title: 'Multi-Faktor-Authentifizierung und Zugangskontrolle',
                  desc: 'Verwendung von Multi-Faktor-Authentifizierung (MFA), gesicherten Kommunikationsloesungen und ggf. gesicherten Notfallkommunikationssystemen.',
                },
              ].map((item) => (
                <div key={item.num} className="flex gap-4 bg-white rounded-xl p-5 border border-slate-200 hover:border-primary-200 hover:shadow-md transition-all">
                  <div className="flex-shrink-0 w-10 h-10 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-sm">
                    {item.num}
                  </div>
                  <div className="flex-1">
                    <h3 className="text-lg font-semibold text-slate-900 mb-1">{item.title}</h3>
                    <p className="text-slate-600 text-sm leading-relaxed">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* Section 5 */}
          <section id="meldepflichten" className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-6">
              5. Meldepflichten
            </h2>
            <p className="text-lg text-slate-600 leading-relaxed mb-8">
              Bei erheblichen Sicherheitsvorfaellen muessen betroffene Einrichtungen einen gestuften Meldeprozess einhalten. Die Meldungen gehen in Deutschland an das BSI (Bundesamt fuer Sicherheit in der Informationstechnik):
            </p>
            <div className="space-y-6">
              {[
                {
                  time: '24 Stunden',
                  title: 'Fruehwarnung',
                  desc: 'Innerhalb von 24 Stunden nach Kenntnisnahme eines erheblichen Sicherheitsvorfalls muss eine Fruehwarnung an die zustaendige Behoerde (BSI) erfolgen. Diese soll angeben, ob der Vorfall vermutlich auf rechtswidriges oder boesartiges Handeln zurueckzufuehren ist und ob grenzueberschreitende Auswirkungen moeglich sind.',
                  color: 'bg-red-50 border-red-200',
                  badge: 'bg-red-100 text-red-800',
                },
                {
                  time: '72 Stunden',
                  title: 'Meldung des Vorfalls',
                  desc: 'Innerhalb von 72 Stunden muss eine ausfuehrliche Meldung des Vorfalls erfolgen. Diese aktualisiert die Fruehwarnung und enthaelt eine erste Bewertung des Vorfalls, einschliesslich Schweregrad, Auswirkungen sowie gegebenenfalls Indikatoren fuer eine Kompromittierung (IoCs).',
                  color: 'bg-amber-50 border-amber-200',
                  badge: 'bg-amber-100 text-amber-800',
                },
                {
                  time: '1 Monat',
                  title: 'Abschlussbericht',
                  desc: 'Spaetestens einen Monat nach Einreichung der Vorfallsmeldung ist ein Abschlussbericht vorzulegen. Dieser enthaelt eine ausfuehrliche Beschreibung des Vorfalls einschliesslich Schweregrad und Auswirkungen, die Art der Bedrohung, Grundursachen, ergriffene und laufende Abhilfemassnahmen sowie ggf. grenzueberschreitende Auswirkungen.',
                  color: 'bg-green-50 border-green-200',
                  badge: 'bg-green-100 text-green-800',
                },
              ].map((step) => (
                <div key={step.time} className={`rounded-xl p-6 border ${step.color}`}>
                  <div className="flex items-center gap-3 mb-3">
                    <span className={`inline-flex px-3 py-1 rounded-full text-sm font-bold ${step.badge}`}>
                      {step.time}
                    </span>
                    <h3 className="text-lg font-semibold text-slate-900">{step.title}</h3>
                  </div>
                  <p className="text-slate-600 text-sm leading-relaxed">{step.desc}</p>
                </div>
              ))}
            </div>
          </section>

          {/* Section 6 */}
          <section id="strafen" className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-6">
              6. Strafen und Bussgelder
            </h2>
            <p className="text-lg text-slate-600 leading-relaxed mb-8">
              Die NIS2-Richtlinie sieht empfindliche Sanktionen bei Verstoessen vor. Erstmals werden auch persoenliche Haftungsregelungen fuer die Geschaeftsleitung eingefuehrt:
            </p>
            <div className="grid sm:grid-cols-2 gap-6">
              <div className="bg-primary-50 rounded-xl p-6 border border-primary-200">
                <h3 className="text-lg font-bold text-primary-900 mb-3">Wesentliche Einrichtungen</h3>
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <span className="text-2xl font-bold text-primary-700">10 Mio. EUR</span>
                  </div>
                  <p className="text-sm text-primary-800">
                    oder <strong>2% des weltweiten Jahresumsatzes</strong> &ndash; je nachdem, welcher Betrag hoeher ist.
                  </p>
                </div>
              </div>
              <div className="bg-accent-50 rounded-xl p-6 border border-accent-200">
                <h3 className="text-lg font-bold text-accent-900 mb-3">Wichtige Einrichtungen</h3>
                <div className="space-y-3">
                  <div className="flex items-center gap-2">
                    <span className="text-2xl font-bold text-accent-700">7 Mio. EUR</span>
                  </div>
                  <p className="text-sm text-accent-800">
                    oder <strong>1,4% des weltweiten Jahresumsatzes</strong> &ndash; je nachdem, welcher Betrag hoeher ist.
                  </p>
                </div>
              </div>
            </div>
            <div className="bg-red-50 border border-red-200 rounded-xl p-5 mt-6">
              <p className="text-red-800 text-sm font-medium">
                Neu: Die Geschaeftsleitung kann persoenlich haftbar gemacht werden, wenn sie ihren Aufsichtspflichten nicht nachkommt. Geschaeftsfuehrer und Vorstaende muessen die Cybersicherheitsmassnahmen billigen und deren Umsetzung ueberwachen. Sie sind zudem verpflichtet, an Cybersicherheitsschulungen teilzunehmen.
              </p>
            </div>
          </section>

          {/* Section 7 */}
          <section id="checkliste" className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-6">
              7. Checkliste: In 5 Schritten NIS2-konform
            </h2>
            <p className="text-lg text-slate-600 leading-relaxed mb-8">
              Nutzen Sie diese Schritt-fuer-Schritt-Anleitung, um Ihre NIS2-Konformitaet systematisch aufzubauen:
            </p>
            <div className="space-y-8">
              {/* Step 1 */}
              <div className="relative">
                <div className="flex gap-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
                    1
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-semibold text-slate-900 mb-4">Betroffenheit pruefen</h3>
                    <div className="space-y-2">
                      {[
                        'Gehoert Ihr Unternehmen zu einem der 18 NIS2-Sektoren (Anhang I oder II)?',
                        'Erfuellen Sie die Schwellenwerte (Mitarbeiterzahl, Umsatz, Bilanzsumme)?',
                        'Fallen Sie unter eine der Sonderregelungen (z.B. DNS, TLD, Vertrauensdienste)?',
                        'Klaeren Sie, ob Sie als wesentliche oder wichtige Einrichtung gelten.',
                      ].map((item) => (
                        <label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
                          <input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
                          <span className="text-sm text-slate-700">{item}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                </div>
              </div>

              {/* Step 2 */}
              <div className="relative">
                <div className="flex gap-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
                    2
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-semibold text-slate-900 mb-4">Gap-Analyse durchfuehren</h3>
                    <div className="space-y-2">
                      {[
                        'Bestandsaufnahme der vorhandenen Sicherheitsmassnahmen machen.',
                        'Abgleich mit den 10 Mindestanforderungen aus Art. 21 NIS2.',
                        'Luecken (Gaps) identifizieren und priorisieren.',
                        'Bestehende Zertifizierungen (ISO 27001, BSI Grundschutz) als Basis nutzen.',
                      ].map((item) => (
                        <label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
                          <input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
                          <span className="text-sm text-slate-700">{item}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                </div>
              </div>

              {/* Step 3 */}
              <div className="relative">
                <div className="flex gap-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
                    3
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-semibold text-slate-900 mb-4">Governance und Verantwortlichkeiten definieren</h3>
                    <div className="space-y-2">
                      {[
                        'Geschaeftsleitung in die Verantwortung nehmen (Billigungspflicht).',
                        'CISO oder IT-Sicherheitsbeauftragten benennen.',
                        'Cybersicherheitsschulungen fuer die Geschaeftsleitung planen.',
                        'Berichtswege und Eskalationspfade festlegen.',
                        'Budget fuer Cybersicherheitsmassnahmen freigeben.',
                      ].map((item) => (
                        <label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
                          <input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
                          <span className="text-sm text-slate-700">{item}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                </div>
              </div>

              {/* Step 4 */}
              <div className="relative">
                <div className="flex gap-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
                    4
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-semibold text-slate-900 mb-4">Technische und organisatorische Massnahmen umsetzen</h3>
                    <div className="space-y-2">
                      {[
                        'ISMS (Information Security Management System) aufbauen oder erweitern.',
                        'Incident-Response-Plan erstellen und testen.',
                        'Business-Continuity-Plan und Disaster-Recovery-Konzept implementieren.',
                        'Lieferketten-Risikomanagement etablieren.',
                        'MFA (Multi-Faktor-Authentifizierung) flaechendeckend einfuehren.',
                        'Verschluesselungskonzepte fuer Daten at rest und in transit umsetzen.',
                        'Regelmaessige Schwachstellen-Scans und Penetrationstests einfuehren.',
                      ].map((item) => (
                        <label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
                          <input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
                          <span className="text-sm text-slate-700">{item}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                </div>
              </div>

              {/* Step 5 */}
              <div className="relative">
                <div className="flex gap-4">
                  <div className="flex-shrink-0 w-12 h-12 bg-primary-600 text-white rounded-full flex items-center justify-center font-bold text-lg">
                    5
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-semibold text-slate-900 mb-4">Meldeprozesse und Dokumentation einrichten</h3>
                    <div className="space-y-2">
                      {[
                        'Meldeprozess fuer Sicherheitsvorfaelle definieren (24h/72h/1 Monat).',
                        'Kontaktdaten beim BSI hinterlegen (Registrierungspflicht).',
                        'Interne Meldestrukturen und Kommunikationswege festlegen.',
                        'Dokumentation aller Massnahmen sicherstellen (Nachweispflicht).',
                        'Regelmaessige Audits und Reviews planen.',
                      ].map((item) => (
                        <label key={item} className="flex items-start gap-3 p-2 rounded-lg hover:bg-slate-50 cursor-pointer">
                          <input type="checkbox" className="mt-1 h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500" />
                          <span className="text-sm text-slate-700">{item}</span>
                        </label>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>

          {/* Section 8 */}
          <section id="breakpilot-comply" className="mb-16">
            <h2 className="text-3xl font-bold text-slate-900 mb-6">
              8. BreakPilot Comply und NIS2
            </h2>
            <div className="bg-gradient-to-br from-primary-50 to-accent-50 rounded-2xl p-8 border border-primary-200">
              <p className="text-lg text-slate-700 leading-relaxed mb-6">
                BreakPilot Comply unterstuetzt Sie bei der systematischen Umsetzung der NIS2-Anforderungen. Unsere Plattform bietet Ihnen strukturierte Workflows fuer Risikoanalysen, Massnahmen-Tracking, Incident-Management und die erforderliche Dokumentation &ndash; alles an einem Ort.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Link
                  href="/blog"
                  className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-primary-600 text-white font-medium hover:bg-primary-700 transition-all"
                >
                  Mehr erfahren
                </Link>
                <Link
                  href="/blog/glossar"
                  className="inline-flex items-center justify-center px-6 py-3 rounded-xl bg-white text-slate-700 font-medium hover:bg-slate-100 transition-all border border-slate-200"
                >
                  Compliance-Glossar
                </Link>
              </div>
            </div>
          </section>

        </div>
      </article>

      {/* Back to Blog */}
      <section className="py-8 px-4 sm:px-6 lg:px-8 border-t border-slate-100">
        <div className="max-w-3xl mx-auto">
          <Link href="/blog" className="inline-flex items-center gap-2 text-primary-600 hover:text-primary-800 transition-colors text-sm font-medium">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            Zurueck zum Blog
          </Link>
        </div>
      </section>

    </div>
  )
}
