breakpilot-lehrer/website/app/ki-konzept/page.tsx

'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: () => (
    <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
    </svg>
  ),
  book: () => (
    <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
    </svg>
  ),
  shield: () => (
    <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
    </svg>
  ),
  globe: () => (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
  building: () => (
    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
    </svg>
  ),
  check: () => (
    <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
    </svg>
  ),
  x: () => (
    <svg className="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
    </svg>
  ),
  chevronDown: () => (
    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
    </svg>
  ),
}

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<number | null>(null)
  const [activeTab, setActiveTab] = useState<'marketing' | 'technical'>('marketing')

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-white">
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-md border-b border-slate-200 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <Link href="/" className="flex items-center gap-2">
              <span className="text-2xl font-bold text-primary-600">BreakPilot</span>
            </Link>
            <div className="flex items-center gap-4">
              <Link href="/" className="text-slate-600 hover:text-slate-900">
                Startseite
              </Link>
              <Link href="/datenschutz" className="text-slate-600 hover:text-slate-900">
                Datenschutz
              </Link>
              <Link
                href="/kontakt"
                className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors"
              >
                Kontakt
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero */}
      <section className="pt-32 pb-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-green-100 text-green-800 rounded-full text-sm font-medium mb-6">
            <Icons.shield />
            DSGVO-konform
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
            {kiKonzept.hero.headline}
          </h1>
          <p className="text-xl text-slate-600 mb-4">
            {kiKonzept.hero.subheadline}
          </p>
          <p className="text-lg text-slate-500 max-w-2xl mx-auto">
            {kiKonzept.hero.description}
          </p>

          {/* Toggle für Marketing/Technisch */}
          <div className="mt-10 inline-flex bg-slate-100 rounded-lg p-1">
            <button
              onClick={() => setActiveTab('marketing')}
              className={`px-6 py-2 rounded-md text-sm font-medium transition-colors ${
                activeTab === 'marketing'
                  ? 'bg-white text-slate-900 shadow'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              Allgemeine Informationen
            </button>
            <button
              onClick={() => setActiveTab('technical')}
              className={`px-6 py-2 rounded-md text-sm font-medium transition-colors ${
                activeTab === 'technical'
                  ? 'bg-white text-slate-900 shadow'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              Technische Details (DSB)
            </button>
          </div>
        </div>
      </section>

      {/* Architecture Diagram */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-slate-900 mb-4">
              {kiKonzept.architecture.title}
            </h2>
            <p className="text-lg text-slate-600">
              {kiKonzept.architecture.description}
            </p>
          </div>

          <div className="relative">
            {/* Architecture Layers */}
            <div className="space-y-4">
              {kiKonzept.architecture.layers.map((layer, index) => {
                const colors = getLayerColor(layer.color)
                const IconComponent = Icons[layer.icon as keyof typeof Icons] || Icons.brain

                return (
                  <div
                    key={layer.name}
                    className={`${colors.bg} border-l-4 ${colors.border} rounded-lg p-6 transform transition-all hover:scale-[1.02]`}
                  >
                    <div className="flex items-start gap-4">
                      <div className={`${colors.icon} flex-shrink-0`}>
                        <IconComponent />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-3 mb-2">
                          <span className="text-xs font-medium text-slate-500 uppercase tracking-wide">
                            Schicht {index + 1}
                          </span>
                          <span className={`px-2 py-0.5 ${colors.bg} ${colors.text} text-xs rounded-full font-medium`}>
                            {layer.type === 'foundation' ? 'Basis' : layer.type === 'knowledge' ? 'Wissen' : 'Isoliert'}
                          </span>
                        </div>
                        <h3 className={`text-xl font-semibold ${colors.text} mb-2`}>
                          {layer.name}
                        </h3>
                        <p className="text-slate-600 mb-2">{layer.description}</p>
                        <p className="text-sm text-slate-500">{layer.details}</p>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>

            {/* Connection Lines */}
            <div className="absolute left-12 top-24 bottom-24 w-0.5 bg-gradient-to-b from-blue-300 via-green-300 to-purple-300 hidden md:block" />
          </div>
        </div>
      </section>

      {/* Data Sources */}
      <section className="py-16 px-4 bg-slate-50">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-slate-900 mb-4">
              {kiKonzept.dataSources.title}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {kiKonzept.dataSources.sections.map((section) => (
              <div key={section.id} className="bg-white rounded-xl shadow-lg overflow-hidden">
                <div className={`p-6 ${section.color === 'green' ? 'bg-green-50' : 'bg-purple-50'}`}>
                  <div className="flex items-center gap-3 mb-2">
                    {section.color === 'green' ? <Icons.globe /> : <Icons.building />}
                    <h3 className="text-xl font-semibold text-slate-900">{section.title}</h3>
                  </div>
                  <p className="text-sm text-slate-600">{section.subtitle}</p>
                </div>

                <div className="p-6">
                  {section.sources && (
                    <div className="space-y-4 mb-6">
                      {section.sources.map((source) => (
                        <div key={source.name} className="flex items-start gap-3">
                          <Icons.check />
                          <div>
                            <div className="font-medium text-slate-900">{source.name}</div>
                            <div className="text-sm text-slate-500">{source.description}</div>
                            <div className="text-xs text-slate-400 mt-1">
                              Lizenz: {source.license}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}

                  {section.examples && (
                    <div className="space-y-4 mb-6">
                      {section.examples.map((example) => (
                        <div key={example.type} className="flex items-start gap-3">
                          <Icons.check />
                          <div>
                            <div className="font-medium text-slate-900">{example.type}</div>
                            <div className="text-sm text-slate-500">{example.description}</div>
                            <div className="text-xs text-purple-600 mt-1">{example.privacy}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}

                  {activeTab === 'technical' && section.technicalDetails && (
                    <div className="mt-4 p-4 bg-slate-50 rounded-lg">
                      <h4 className="text-sm font-semibold text-slate-700 mb-2">Technische Details</h4>
                      <dl className="space-y-1 text-sm">
                        {Object.entries(section.technicalDetails).map(([key, value]) => (
                          <div key={key} className="flex justify-between">
                            <dt className="text-slate-500 capitalize">{key.replace(/([A-Z])/g, ' $1')}</dt>
                            <dd className="font-mono text-slate-700">{value}</dd>
                          </div>
                        ))}
                      </dl>
                    </div>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Privacy Principles */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-slate-900 mb-4">
              {kiKonzept.privacy.title}
            </h2>
            <p className="text-lg text-slate-600">
              {kiKonzept.privacy.subtitle}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {kiKonzept.privacy.principles.map((principle) => (
              <div key={principle.title} className="bg-slate-50 rounded-xl p-6 text-center">
                <div className="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <Icons.shield />
                </div>
                <h3 className="font-semibold text-slate-900 mb-2">{principle.title}</h3>
                <p className="text-sm text-slate-600">{principle.description}</p>
              </div>
            ))}
          </div>

          {activeTab === 'technical' && (
            <div className="mt-12 bg-slate-50 rounded-xl p-8">
              <h3 className="text-xl font-semibold text-slate-900 mb-6">
                {kiKonzept.privacy.legalBasis.title}
              </h3>
              <div className="grid md:grid-cols-3 gap-6">
                {kiKonzept.privacy.legalBasis.items.map((item) => (
                  <div key={item.article} className="bg-white rounded-lg p-4 border border-slate-200">
                    <div className="font-mono text-sm text-primary-600 mb-2">{item.article}</div>
                    <div className="font-medium text-slate-900 mb-1">{item.description}</div>
                    <div className="text-sm text-slate-500">{item.applies}</div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Workflow */}
      <section className="py-16 px-4 bg-gradient-to-b from-slate-50 to-white">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-slate-900 mb-4">
              {kiKonzept.workflow.title}
            </h2>
            <p className="text-lg text-slate-600">
              {kiKonzept.workflow.subtitle}
            </p>
          </div>

          <div className="relative">
            {kiKonzept.workflow.steps.map((step, index) => (
              <div key={step.step} className="flex gap-6 mb-8 last:mb-0">
                {/* Step Number */}
                <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">
                  {step.step}
                </div>

                {/* Content */}
                <div className="flex-1 bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                  <h3 className="font-semibold text-slate-900 mb-2">{step.title}</h3>
                  <p className="text-slate-600 mb-3">{step.description}</p>
                  {activeTab === 'technical' && (
                    <div className="text-xs font-mono text-slate-400 bg-slate-50 px-3 py-2 rounded">
                      {step.technical}
                    </div>
                  )}
                </div>

                {/* Connection Line */}
                {index < kiKonzept.workflow.steps.length - 1 && (
                  <div className="absolute left-6 mt-12 w-0.5 h-8 bg-primary-200" style={{ top: `${index * 120 + 48}px` }} />
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What We Don't Do */}
      <section className="py-16 px-4 bg-red-50">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-slate-900 mb-4">
              {kiKonzept.notUsed.title}
            </h2>
            <p className="text-lg text-slate-600">
              {kiKonzept.notUsed.subtitle}
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            {kiKonzept.notUsed.items.map((item) => (
              <div key={item.title} className="bg-white rounded-xl p-6 border border-red-100">
                <div className="flex items-start gap-3">
                  <Icons.x />
                  <div>
                    <h3 className="font-semibold text-slate-900 mb-1">{item.title}</h3>
                    <p className="text-sm text-slate-600">{item.description}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Technical Details for DSB */}
      {activeTab === 'technical' && (
        <section className="py-16 px-4 bg-slate-900 text-white">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold mb-4">
                {kiKonzept.technical.title}
              </h2>
              <p className="text-lg text-slate-400">
                {kiKonzept.technical.subtitle}
              </p>
            </div>

            <div className="space-y-6">
              {kiKonzept.technical.sections.map((section) => (
                <div key={section.title} className="bg-slate-800 rounded-xl p-6">
                  <h3 className="font-semibold text-white mb-4">{section.title}</h3>
                  <pre className="text-sm text-slate-300 whitespace-pre-wrap font-mono bg-slate-900 p-4 rounded-lg overflow-x-auto">
                    {section.content}
                  </pre>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* FAQ */}
      <section className="py-16 px-4 bg-white">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-slate-900 mb-4">
              {kiKonzept.faq.title}
            </h2>
          </div>

          <div className="space-y-4">
            {kiKonzept.faq.questions.map((faq, index) => (
              <div key={index} className="border border-slate-200 rounded-xl overflow-hidden">
                <button
                  onClick={() => setOpenFaq(openFaq === index ? null : index)}
                  className="w-full flex items-center justify-between p-6 text-left hover:bg-slate-50 transition-colors"
                >
                  <span className="font-medium text-slate-900">{faq.question}</span>
                  <span className={`transform transition-transform ${openFaq === index ? 'rotate-180' : ''}`}>
                    <Icons.chevronDown />
                  </span>
                </button>
                {openFaq === index && (
                  <div className="px-6 pb-6 text-slate-600">
                    {faq.answer}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 px-4 bg-primary-600">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl font-bold text-white mb-4">
            {kiKonzept.cta.title}
          </h2>
          <p className="text-lg text-primary-100 mb-8">
            {kiKonzept.cta.description}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              href={kiKonzept.cta.primaryButton.href}
              className="px-8 py-3 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition-colors"
            >
              {kiKonzept.cta.primaryButton.text}
            </Link>
            <Link
              href={kiKonzept.cta.secondaryButton.href}
              className="px-8 py-3 border border-white text-white rounded-lg font-medium hover:bg-white/10 transition-colors"
            >
              {kiKonzept.cta.secondaryButton.text}
            </Link>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-8 px-4 bg-slate-900 text-slate-400">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="text-sm">
            Version {kiKonzept.meta.version} | Letzte Aktualisierung: {kiKonzept.meta.lastUpdated}
          </div>
          <div className="flex gap-6 text-sm">
            <Link href="/impressum" className="hover:text-white">Impressum</Link>
            <Link href="/datenschutz" className="hover:text-white">Datenschutz</Link>
            <Link href="/kontakt" className="hover:text-white">Kontakt</Link>
          </div>
        </div>
      </footer>
    </div>
  )
}