'use client'

import { getCategoryById } from '@/lib/navigation'
import { ModuleCard } from '@/components/common/ModuleCard'
import { PagePurpose } from '@/components/common/PagePurpose'

export default function EducationPage() {
  const category = getCategoryById('education')

  if (!category) {
    return <div>Kategorie nicht gefunden</div>
  }

  return (
    <div>
      {/* Page Purpose */}
      <PagePurpose
        title={category.name}
        purpose="Diese Kategorie umfasst Module fuer Bildungsdokumente. Hier verwalten Sie Crawler fuer Lehrplaene, Erlasse und amtliche Bildungsquellen."
        audience={['Content Manager', 'Entwickler']}
        architecture={{
          services: ['edu-search-service (Go)'],
          databases: ['PostgreSQL', 'OpenSearch'],
        }}
        collapsible={true}
        defaultCollapsed={false}
      />

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-blue-600">2</div>
          <div className="text-sm text-slate-500">Aktive Crawler</div>
          <div className="text-xs text-slate-400">NiBiS, KMK</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-blue-600">16</div>
          <div className="text-sm text-slate-500">Bundeslaender</div>
          <div className="text-xs text-slate-400">Geplant</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-green-600">0</div>
          <div className="text-sm text-slate-500">Personendaten</div>
          <div className="text-xs text-green-500">Datenschutz-konform</div>
        </div>
      </div>

      {/* Modules Grid */}
      <h2 className="text-lg font-semibold text-slate-900 mb-4">Module</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {category.modules.map((module) => (
          <ModuleCard key={module.id} module={module} category={category} />
        ))}
      </div>

      {/* Info Section */}
      <div className="mt-8 bg-blue-50 border border-blue-200 rounded-xl p-6">
        <h3 className="font-semibold text-blue-800 flex items-center gap-2">
          <span>📚</span>
          Bildungsdokumente
        </h3>
        <p className="text-sm text-blue-700 mt-2">
          Das System crawlt ausschliesslich oeffentliche Bildungsdokumente (Lehrplaene, Erlasse, Beschluesse).
          <strong> Keine personenbezogenen Daten</strong> werden erfasst oder gespeichert.
          Alle Crawler respektieren robots.txt und verwenden Rate-Limiting.
        </p>
      </div>

      {/* Compliance Note */}
      <div className="mt-4 bg-green-50 border border-green-200 rounded-xl p-6">
        <h3 className="font-semibold text-green-800 flex items-center gap-2">
          <span>✅</span>
          Datenschutz-Hinweis
        </h3>
        <p className="text-sm text-green-700 mt-2">
          Dieses Modul verarbeitet <strong>keine personenbezogenen Daten</strong>.
          Es werden ausschliesslich amtliche Dokumente und Metadaten aus oeffentlichen Quellen indexiert.
        </p>
      </div>
    </div>
  )
}