'use client'

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

export default function Kurse() {
  const [searchTerm, setSearchTerm] = useState('')
  const [selectedLevel, setSelectedLevel] = useState<string>('all')

  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.',
      duration: '4-6 Wochen',
      level: 'Anfänger',
      prerequisites: 'Keine Vorkenntnisse nötig',
      certification: 'IT-Grundlagen Zertifikat',
      modules: ['Computer-Grundlagen', 'Betriebssysteme', 'Netzwerke', '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.',
      duration: '6-8 Wochen',
      level: 'Anfänger',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'Python Basics Zertifikat',
      modules: ['Python-Grundlagen', 'Datenstrukturen', 'Funktionen & Module', 'Praxisprojekte'],
    },
    {
      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.',
      duration: '4-6 Wochen',
      level: 'Anfänger',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'IT-Security Basics Zertifikat',
      modules: ['Sicherheitsgrundlagen', 'Bedrohungen erkennen', 'Schutzmaßnahmen', '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.',
      duration: '8-10 Wochen',
      level: 'Anfänger bis Fortgeschritten',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'Web Development Basics Zertifikat',
      modules: ['HTML & CSS', 'JavaScript Grundlagen', 'Responsive Design', 'Projektarbeit'],
    },
    {
      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.',
      duration: '6-8 Wochen',
      level: 'Anfänger bis Fortgeschritten',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'Linux Basics Zertifikat',
      modules: ['Linux Installation', 'Command Line', 'Systemadministration', 'Netzwerk-Konfiguration'],
    },
    {
      id: 6,
      title: 'Datenbanken Grundlagen',
      description: 'Verstehen Sie, wie Datenbanken funktionieren. Lernen Sie SQL und die Grundlagen des Datenbankdesigns.',
      duration: '5-7 Wochen',
      level: 'Anfänger bis Fortgeschritten',
      prerequisites: 'IT-Grundlagen empfohlen',
      certification: 'Database Basics Zertifikat',
      modules: ['Datenbank-Konzepte', 'SQL Grundlagen', 'Datenbankdesign', 'Praxisprojekte'],
    },
    {
      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.',
      duration: '8-10 Wochen',
      level: 'Anfänger bis Fortgeschritten',
      prerequisites: 'Python-Grundlagen empfohlen',
      certification: 'AI & ML Basics Zertifikat',
      modules: ['KI-Grundlagen', 'Machine Learning Basics', 'Neuronale Netze', 'Praktische Anwendungen'],
    },
  ]

  const filteredCourses = courses.filter(course => {
    const matchesSearch = course.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      course.description.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesLevel = selectedLevel === 'all' || course.level.toLowerCase().includes(selectedLevel.toLowerCase())
    return matchesSearch && matchesLevel
  })

  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>Kurskatalog</h1>
            <p className="page-hero-subtitle">
              Finden Sie den passenden Kurs für Ihren Einstieg in die IT
            </p>
          </motion.div>
        </section>

        <section className="page-content">
          <div className="container">
            {/* Search and Filter */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              style={{ marginBottom: '60px' }}
            >
              <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '800px', margin: '0 auto' }}>
                <input
                  type="text"
                  placeholder="Kurse durchsuchen..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  style={{
                    padding: '12px 16px',
                    fontSize: '17px',
                    background: 'rgba(255, 255, 255, 0.05)',
                    border: '1px solid rgba(255, 255, 255, 0.1)',
                    borderRadius: '10px',
                    color: 'var(--color-text)',
                    fontFamily: 'var(--font-primary)',
                  }}
                />
                <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                  <button
                    onClick={() => setSelectedLevel('all')}
                    className={selectedLevel === 'all' ? 'btn btn-primary' : 'btn btn-secondary'}
                    style={{ fontSize: '14px', padding: '8px 16px' }}
                  >
                    Alle
                  </button>
                  <button
                    onClick={() => setSelectedLevel('anfänger')}
                    className={selectedLevel === 'anfänger' ? 'btn btn-primary' : 'btn btn-secondary'}
                    style={{ fontSize: '14px', padding: '8px 16px' }}
                  >
                    Anfänger
                  </button>
                  <button
                    onClick={() => setSelectedLevel('fortgeschritten')}
                    className={selectedLevel === 'fortgeschritten' ? 'btn btn-primary' : 'btn btn-secondary'}
                    style={{ fontSize: '14px', padding: '8px 16px' }}
                  >
                    Fortgeschritten
                  </button>
                </div>
              </div>
            </motion.div>

            {/* Course List */}
            <div className="features-grid" style={{ gridTemplateColumns: '1fr', gap: '40px' }}>
              {filteredCourses.map((course, index) => (
                <motion.div
                  key={course.id}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  className="feature-card-large"
                  style={{ textAlign: 'left' }}
                >
                  <h2 style={{ fontSize: '32px', marginBottom: '15px' }}>{course.title}</h2>
                  <p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '25px', color: 'var(--color-text-secondary)' }}>
                    {course.description}
                  </p>

                  <div style={{ marginBottom: '25px' }}>
                    <h3 style={{ fontSize: '20px', marginBottom: '15px' }}>Kursdetails</h3>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '15px', fontSize: '15px', color: 'var(--color-text-secondary)' }}>
                      <div>
                        <strong>Dauer:</strong> {course.duration}
                      </div>
                      <div>
                        <strong>Niveau:</strong> {course.level}
                      </div>
                      <div>
                        <strong>Voraussetzungen:</strong> {course.prerequisites}
                      </div>
                      <div>
                        <strong>Zertifizierung:</strong> {course.certification}
                      </div>
                    </div>
                  </div>

                  <div style={{ marginBottom: '25px' }}>
                    <h3 style={{ fontSize: '20px', marginBottom: '15px' }}>Modulplan</h3>
                    <ul style={{ fontSize: '15px', lineHeight: '1.7', paddingLeft: '20px', color: 'var(--color-text-secondary)' }}>
                      {course.modules.map((module, i) => (
                        <li key={i} style={{ marginBottom: '8px' }}>{module}</li>
                      ))}
                    </ul>
                  </div>

                  <Link href={`/quereinsteiger/kurse/${course.id}`} className="btn btn-primary" style={{ display: 'inline-block' }}>
                    Mehr erfahren
                  </Link>
                </motion.div>
              ))}
            </div>

            {filteredCourses.length === 0 && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                className="content-block"
              >
                <p>Keine Kurse gefunden. Bitte passen Sie Ihre Suchkriterien an.</p>
              </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>Nicht den passenden Kurs gefunden?</h2>
              <p>Kontaktieren Sie uns und wir finden gemeinsam den richtigen Weg für Sie</p>
              <Link href="/kontakt" className="btn btn-primary">
                Jetzt Kontakt aufnehmen
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}