'use client' /** * KI-Trainings- und Nutzungskonzept * * Marketing-taugliche und technisch korrekte Darstellung * unserer DSGVO-konformen KI-Architektur für: * - Interessierte Schulen und Lehrkräfte * - Datenschutzbeauftragte (DSB) * - Schulträger und Entscheider */ import { useState } from 'react' import Link from 'next/link' import kiKonzept from '@/content/ki-konzept.json' // Icon components const Icons = { brain: () => ( ), book: () => ( ), shield: () => ( ), globe: () => ( ), building: () => ( ), check: () => ( ), x: () => ( ), chevronDown: () => ( ), } const getLayerColor = (color: string) => { switch (color) { case 'blue': return { bg: 'bg-blue-100', border: 'border-blue-500', text: 'text-blue-700', icon: 'text-blue-600' } case 'green': return { bg: 'bg-green-100', border: 'border-green-500', text: 'text-green-700', icon: 'text-green-600' } case 'purple': return { bg: 'bg-purple-100', border: 'border-purple-500', text: 'text-purple-700', icon: 'text-purple-600' } default: return { bg: 'bg-gray-100', border: 'border-gray-500', text: 'text-gray-700', icon: 'text-gray-600' } } } export default function KIKonzeptPage() { const [openFaq, setOpenFaq] = useState(null) const [activeTab, setActiveTab] = useState<'marketing' | 'technical'>('marketing') return (
{/* Navigation */} {/* Hero */}
DSGVO-konform

{kiKonzept.hero.headline}

{kiKonzept.hero.subheadline}

{kiKonzept.hero.description}

{/* Toggle für Marketing/Technisch */}
{/* Architecture Diagram */}

{kiKonzept.architecture.title}

{kiKonzept.architecture.description}

{/* Architecture Layers */}
{kiKonzept.architecture.layers.map((layer, index) => { const colors = getLayerColor(layer.color) const IconComponent = Icons[layer.icon as keyof typeof Icons] || Icons.brain return (
Schicht {index + 1} {layer.type === 'foundation' ? 'Basis' : layer.type === 'knowledge' ? 'Wissen' : 'Isoliert'}

{layer.name}

{layer.description}

{layer.details}

) })}
{/* Connection Lines */}
{/* Data Sources */}

{kiKonzept.dataSources.title}

{kiKonzept.dataSources.sections.map((section) => (
{section.color === 'green' ? : }

{section.title}

{section.subtitle}

{section.sources && (
{section.sources.map((source) => (
{source.name}
{source.description}
Lizenz: {source.license}
))}
)} {section.examples && (
{section.examples.map((example) => (
{example.type}
{example.description}
{example.privacy}
))}
)} {activeTab === 'technical' && section.technicalDetails && (

Technische Details

{Object.entries(section.technicalDetails).map(([key, value]) => (
{key.replace(/([A-Z])/g, ' $1')}
{value}
))}
)}
))}
{/* Privacy Principles */}

{kiKonzept.privacy.title}

{kiKonzept.privacy.subtitle}

{kiKonzept.privacy.principles.map((principle) => (

{principle.title}

{principle.description}

))}
{activeTab === 'technical' && (

{kiKonzept.privacy.legalBasis.title}

{kiKonzept.privacy.legalBasis.items.map((item) => (
{item.article}
{item.description}
{item.applies}
))}
)}
{/* Workflow */}

{kiKonzept.workflow.title}

{kiKonzept.workflow.subtitle}

{kiKonzept.workflow.steps.map((step, index) => (
{/* Step Number */}
{step.step}
{/* Content */}

{step.title}

{step.description}

{activeTab === 'technical' && (
{step.technical}
)}
{/* Connection Line */} {index < kiKonzept.workflow.steps.length - 1 && (
)}
))}
{/* What We Don't Do */}

{kiKonzept.notUsed.title}

{kiKonzept.notUsed.subtitle}

{kiKonzept.notUsed.items.map((item) => (

{item.title}

{item.description}

))}
{/* Technical Details for DSB */} {activeTab === 'technical' && (

{kiKonzept.technical.title}

{kiKonzept.technical.subtitle}

{kiKonzept.technical.sections.map((section) => (

{section.title}

                    {section.content}
                  
))}
)} {/* FAQ */}

{kiKonzept.faq.title}

{kiKonzept.faq.questions.map((faq, index) => (
{openFaq === index && (
{faq.answer}
)}
))}
{/* CTA */}

{kiKonzept.cta.title}

{kiKonzept.cta.description}

{kiKonzept.cta.primaryButton.text} {kiKonzept.cta.secondaryButton.text}
{/* Footer */}
) }