'use client'

import { motion } from 'framer-motion'
import Link from 'next/link'
import { useParams } from 'next/navigation'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'

export default function KursDetail() {
  const params = useParams()
  const courseId = parseInt(params.id as string)

  const courses = [
    {
      id: 1,
      title: 'IT-Grundlagen für Einsteiger',
      description: 'Der perfekte Einstieg in die IT-Welt. Lernen Sie die Grundlagen von Computern, Betriebssystemen, Netzwerken und IT-Sicherheit.',
      longDescription: 'Dieser Kurs ist speziell für absolute Anfänger konzipiert, die noch keine Erfahrung mit IT haben. Sie lernen Schritt für Schritt die Grundlagen kennen und werden nicht überfordert. Unser niveaubasiertes System führt Sie sicher durch alle Module.',
      duration: '4-6 Wochen',
      level: 'Anfänger',
      prerequisites: 'Keine Vorkenntnisse nötig',
      certification: 'IT-Grundlagen Zertifikat',
      modules: [
        { name: 'Computer-Grundlagen', description: 'Verstehen Sie, wie Computer funktionieren, Hardware-Komponenten und deren Zusammenwirken.' },
        { name: 'Betriebssysteme', description: 'Lernen Sie Windows, macOS und Linux kennen und verstehen Sie deren Unterschiede.' },
        { name: 'Netzwerke', description: 'Grundlagen der Netzwerktechnik, Internet, LAN, WLAN und Netzwerk-Sicherheit.' },
        { name: 'IT-Sicherheit', description: 'Grundlagen der IT-Sicherheit, Passwörter, Virenschutz und sichere Nutzung des Internets.' },
      ],
      learningGoals: [
        'Verständnis der grundlegenden IT-Konzepte',
        'Sicherer Umgang mit Betriebssystemen',
        'Grundkenntnisse in Netzwerktechnik',
        'Bewusstsein für IT-Sicherheit',
      ],
    },
    {
      id: 2,
      title: 'Python für Anfänger',
      description: 'Lernen Sie Programmieren mit Python – einer der beliebtesten und zugänglichsten Programmiersprachen. Perfekt für Einsteiger.',
      longDescription: 'Python ist die ideale Programmiersprache für Einsteiger. In diesem Kurs lernen Sie von Grund auf, wie man programmiert. Sie schreiben Ihre ersten Programme, arbeiten mit Daten und erstellen praktische Anwendungen.',
      duration: '6-8 Wochen',
      level: 'Anfänger',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'Python Basics Zertifikat',
      modules: [
        { name: 'Python-Grundlagen', description: 'Syntax, Variablen, Datentypen und erste Programme schreiben.' },
        { name: 'Datenstrukturen', description: 'Listen, Dictionaries, Tupel und Sets verstehen und anwenden.' },
        { name: 'Funktionen & Module', description: 'Eigene Funktionen erstellen, Module nutzen und Code organisieren.' },
        { name: 'Praxisprojekte', description: 'Anwendung des Gelernten in realen Projekten wie einem Taschenrechner oder einem einfachen Spiel.' },
      ],
      learningGoals: [
        'Grundlegende Python-Programmierung beherrschen',
        'Eigene Programme entwickeln können',
        'Code lesen und verstehen',
        'Probleme algorithmisch lösen',
      ],
    },
    {
      id: 3,
      title: 'IT-Security Grundlagen',
      description: 'Verstehen Sie die Grundlagen der IT-Sicherheit. Lernen Sie, wie Sie sich und andere vor Cyber-Bedrohungen schützen.',
      longDescription: 'IT-Sicherheit wird immer wichtiger. In diesem Kurs lernen Sie die Grundlagen der Cybersecurity kennen, erkennen Bedrohungen und wissen, wie Sie sich schützen können.',
      duration: '4-6 Wochen',
      level: 'Anfänger',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'IT-Security Basics Zertifikat',
      modules: [
        { name: 'Sicherheitsgrundlagen', description: 'Grundlegende Konzepte der IT-Sicherheit, Bedrohungsmodelle und Sicherheitsprinzipien.' },
        { name: 'Bedrohungen erkennen', description: 'Phishing, Malware, Social Engineering und andere Bedrohungen erkennen und verstehen.' },
        { name: 'Schutzmaßnahmen', description: 'Firewalls, Antivirus, Verschlüsselung und andere Schutzmechanismen.' },
        { name: 'Incident Response', description: 'Was tun bei einem Sicherheitsvorfall? Grundlagen des Incident Managements.' },
      ],
      learningGoals: [
        'IT-Sicherheitsbedrohungen erkennen',
        'Schutzmaßnahmen verstehen und anwenden',
        'Sicherheitsbewusstsein entwickeln',
        'Grundlagen des Incident Response',
      ],
    },
    {
      id: 4,
      title: 'Webentwicklung für Einsteiger',
      description: 'Erstellen Sie Ihre ersten Webseiten mit HTML, CSS und JavaScript. Lernen Sie die Grundlagen der modernen Webentwicklung.',
      longDescription: 'Webentwicklung ist einer der zugänglichsten Einstiege in die IT. In diesem Kurs erstellen Sie Ihre ersten Webseiten und lernen die drei Grundpfeiler der Webentwicklung kennen.',
      duration: '8-10 Wochen',
      level: 'Anfänger bis Fortgeschritten',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'Web Development Basics Zertifikat',
      modules: [
        { name: 'HTML & CSS', description: 'Struktur und Styling von Webseiten, Layouts erstellen und responsive Design.' },
        { name: 'JavaScript Grundlagen', description: 'Programmierung im Browser, DOM-Manipulation und erste interaktive Elemente.' },
        { name: 'Responsive Design', description: 'Webseiten für alle Geräte optimieren, Mobile-First-Ansatz.' },
        { name: 'Projektarbeit', description: 'Erstellen Sie Ihre eigene Webseite als Abschlussprojekt.' },
      ],
      learningGoals: [
        'HTML, CSS und JavaScript beherrschen',
        'Responsive Webseiten erstellen',
        'Moderne Webentwicklung verstehen',
        'Eigene Webprojekte umsetzen',
      ],
    },
    {
      id: 5,
      title: 'Linux für Anfänger',
      description: 'Lernen Sie Linux von Grund auf. Von der Installation bis zur Systemadministration – alles, was Sie wissen müssen.',
      longDescription: 'Linux ist das Rückgrat vieler IT-Systeme. In diesem Kurs lernen Sie Linux von Grund auf kennen und werden fit für die Systemadministration.',
      duration: '6-8 Wochen',
      level: 'Anfänger bis Fortgeschritten',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'Linux Basics Zertifikat',
      modules: [
        { name: 'Linux Installation', description: 'Linux installieren, verschiedene Distributionen kennenlernen und erste Schritte.' },
        { name: 'Command Line', description: 'Terminal beherrschen, wichtige Befehle und Shell-Scripting Grundlagen.' },
        { name: 'Systemadministration', description: 'Benutzerverwaltung, Berechtigungen, Prozesse und Dienste verwalten.' },
        { name: 'Netzwerk-Konfiguration', description: 'Netzwerke konfigurieren, Firewall einrichten und Netzwerk-Troubleshooting.' },
      ],
      learningGoals: [
        'Linux-Systeme verstehen und bedienen',
        'Command Line sicher nutzen',
        'Grundlagen der Systemadministration',
        'Linux-Netzwerke konfigurieren',
      ],
    },
    {
      id: 6,
      title: 'Datenbanken Grundlagen',
      description: 'Verstehen Sie, wie Datenbanken funktionieren. Lernen Sie SQL und die Grundlagen des Datenbankdesigns.',
      longDescription: 'Datenbanken sind das Herzstück vieler Anwendungen. In diesem Kurs lernen Sie, wie Datenbanken funktionieren und wie Sie mit SQL arbeiten.',
      duration: '5-7 Wochen',
      level: 'Anfänger bis Fortgeschritten',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'Database Basics Zertifikat',
      modules: [
        { name: 'Datenbank-Konzepte', description: 'Relationale Datenbanken, Tabellen, Beziehungen und Normalisierung verstehen.' },
        { name: 'SQL Grundlagen', description: 'SELECT, INSERT, UPDATE, DELETE und weitere wichtige SQL-Befehle.' },
        { name: 'Datenbankdesign', description: 'Eigene Datenbanken entwerfen, ER-Modelle erstellen und optimieren.' },
        { name: 'Praxisprojekte', description: 'Anwendung des Gelernten in praktischen Projekten mit echten Datenbanken.' },
      ],
      learningGoals: [
        'Datenbanken verstehen und nutzen',
        'SQL sicher beherrschen',
        'Datenbanken entwerfen können',
        'Praktische Datenbankprojekte umsetzen',
      ],
    },
    {
      id: 7,
      title: 'KI & Machine Learning Grundlagen',
      description: 'Lernen Sie die Grundlagen der Künstlichen Intelligenz und des Machine Learning. Verstehen Sie, wie moderne KI-Systeme funktionieren.',
      longDescription: 'Künstliche Intelligenz und Machine Learning sind die Zukunft der Technologie. In diesem Kurs lernen Sie die Grundlagen kennen und verstehen, wie moderne KI-Systeme funktionieren. Sie arbeiten mit praktischen Beispielen und erstellen Ihre ersten Machine-Learning-Modelle.',
      duration: '8-10 Wochen',
      level: 'Anfänger bis Fortgeschritten',
      prerequisites: 'Python-Grundlagen empfohlen',
      certification: 'AI & ML Basics Zertifikat',
      modules: [
        { name: 'KI-Grundlagen', description: 'Was ist Künstliche Intelligenz? Geschichte, Konzepte und aktuelle Anwendungen der KI.' },
        { name: 'Machine Learning Basics', description: 'Supervised Learning, Unsupervised Learning, Regression und Klassifikation verstehen.' },
        { name: 'Neuronale Netze', description: 'Einführung in neuronale Netze, Deep Learning und moderne KI-Architekturen.' },
        { name: 'Praktische Anwendungen', description: 'Eigene Machine-Learning-Modelle erstellen, trainieren und evaluieren mit Python und TensorFlow.' },
      ],
      learningGoals: [
        'Grundlagen der KI und des Machine Learning verstehen',
        'Machine-Learning-Modelle entwickeln können',
        'Neuronale Netze und Deep Learning kennenlernen',
        'Praktische KI-Anwendungen umsetzen',
      ],
    },
  ]

  const course = courses.find(c => c.id === courseId)

  if (!course) {
    return (
      <>
        <Navigation />
        <main>
          <section className="page-hero">
            <div className="container">
              <h1>Kurs nicht gefunden</h1>
              <p className="page-hero-subtitle">Der angeforderte Kurs existiert nicht.</p>
            </div>
          </section>
          <section className="page-content">
            <div className="container">
              <Link href="/quereinsteiger/kurse" className="btn btn-primary">
                Zurück zum Kurskatalog
              </Link>
            </div>
          </section>
        </main>
        <Footer />
      </>
    )
  }

  return (
    <>
      <Navigation />
      <main>
        <section className="page-hero">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="container"
          >
            <h1>{course.title}</h1>
            <p className="page-hero-subtitle">
              {course.description}
            </p>
          </motion.div>
        </section>

        <section className="page-content">
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="content-block"
              style={{ textAlign: 'left', maxWidth: '100%' }}
            >
              <h2>Kursbeschreibung</h2>
              <p style={{ fontSize: '19px', lineHeight: '1.7', marginBottom: '40px' }}>
                {course.longDescription}
              </p>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px', marginBottom: '40px' }}>
                <div className="feature-card" style={{ textAlign: 'left' }}>
                  <h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Dauer</h3>
                  <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.duration}</p>
                </div>
                <div className="feature-card" style={{ textAlign: 'left' }}>
                  <h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Niveau</h3>
                  <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.level}</p>
                </div>
                <div className="feature-card" style={{ textAlign: 'left' }}>
                  <h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Voraussetzungen</h3>
                  <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.prerequisites}</p>
                </div>
                <div className="feature-card" style={{ textAlign: 'left' }}>
                  <h3 style={{ fontSize: '20px', marginBottom: '10px' }}>Zertifizierung</h3>
                  <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)' }}>{course.certification}</p>
                </div>
              </div>

              <h2 style={{ marginTop: '60px', marginBottom: '30px' }}>Lernziele</h2>
              <ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px', marginBottom: '40px', color: 'var(--color-text-secondary)' }}>
                {course.learningGoals.map((goal, i) => (
                  <li key={i} style={{ marginBottom: '10px' }}>{goal}</li>
                ))}
              </ul>

              <h2 style={{ marginTop: '60px', marginBottom: '30px' }}>Modulplan</h2>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', marginBottom: '40px' }}>
                {course.modules.map((module, i) => (
                  <motion.div
                    key={i}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6, delay: i * 0.1 }}
                    className="feature-card"
                    style={{ textAlign: 'left' }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '10px' }}>
                      <div style={{
                        width: '40px',
                        height: '40px',
                        borderRadius: '50%',
                        background: 'var(--color-accent)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        color: 'white',
                        fontWeight: '600',
                        fontSize: '18px',
                      }}>
                        {i + 1}
                      </div>
                      <h3 style={{ fontSize: '24px', margin: 0 }}>{module.name}</h3>
                    </div>
                    <p style={{ fontSize: '17px', lineHeight: '1.7', color: 'var(--color-text-secondary)', marginLeft: '55px' }}>
                      {module.description}
                    </p>
                  </motion.div>
                ))}
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="cta-section"
            >
              <h2>Bereit für diesen Kurs?</h2>
              <p>Kontaktieren Sie uns und starten Sie Ihre IT-Weiterbildung</p>
              <div style={{ display: 'flex', gap: '15px', justifyContent: 'center', flexWrap: 'wrap' }}>
                <Link href="/kontakt" className="btn btn-primary">
                  Jetzt anmelden
                </Link>
                <Link href="/quereinsteiger/kurse" className="btn btn-secondary">
                  Zurück zum Kurskatalog
                </Link>
              </div>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}