'use client'

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

export default function Schulungsthemen() {
  const topics = [
    {
      title: 'IT-Security für Mitarbeiter',
      description: 'Grundlagen der IT-Sicherheit, Erkennung von Phishing-Angriffen, sicheres Passwort-Management und Umgang mit sensiblen Daten.',
      duration: '1-2 Tage',
      level: 'Grundlagen',
    },
    {
      title: 'Effizienter Umgang mit Office-Software',
      description: 'Optimierung der täglichen Arbeit mit Microsoft Office, Google Workspace oder anderen Office-Suites. Tipps und Tricks für mehr Produktivität.',
      duration: '1 Tag',
      level: 'Grundlagen bis Fortgeschritten',
    },
    {
      title: 'Datenschutz DSGVO',
      description: 'Umfassende Schulung zu Datenschutzbestimmungen, DSGVO-Compliance und korrektem Umgang mit personenbezogenen Daten.',
      duration: '2-3 Tage',
      level: 'Grundlagen bis Experte',
    },
    {
      title: 'Cloud-Computing Grundlagen',
      description: 'Einführung in Cloud-Technologien, Nutzung von AWS, Azure oder Google Cloud. Migration und Verwaltung von Cloud-Ressourcen.',
      duration: '3-5 Tage',
      level: 'Grundlagen bis Fortgeschritten',
    },
    {
      title: 'Systemadministration',
      description: 'Grundlagen der Systemadministration für Windows- und Linux-Server. Verwaltung von Benutzern, Berechtigungen und Systemen.',
      duration: '5-7 Tage',
      level: 'Fortgeschritten',
    },
    {
      title: 'Netzwerktechnik',
      description: 'Grundlagen der Netzwerktechnik, TCP/IP, Routing, Switching und Netzwerk-Troubleshooting.',
      duration: '3-5 Tage',
      level: 'Fortgeschritten',
    },
  ]

  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>Schulungsthemen</h1>
            <p className="page-hero-subtitle">
              Übersicht über mögliche Schulungsmodule
            </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"
            >
              <h2>Maßgeschneiderte Schulungsmodule</h2>
              <p>
                Wir bieten eine breite Palette an Schulungsthemen, die wir individuell auf Ihre 
                Bedürfnisse zuschneiden. Alle Schulungen erfolgen direkt an Ihrer IT-Infrastruktur 
                für maximale Praxisnähe.
              </p>
            </motion.div>

            <div className="features-grid" style={{ marginTop: '60px', gridTemplateColumns: '1fr' }}>
              {topics.map((topic, index) => (
                <motion.div
                  key={index}
                  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' }}
                >
                  <h3 style={{ fontSize: '28px', marginBottom: '15px' }}>{topic.title}</h3>
                  <p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '20px', color: 'var(--color-text-secondary)' }}>
                    {topic.description}
                  </p>
                  <div style={{ display: 'flex', gap: '20px', fontSize: '15px', color: 'var(--color-text-secondary)' }}>
                    <span><strong>Dauer:</strong> {topic.duration}</span>
                    <span><strong>Niveau:</strong> {topic.level}</span>
                  </div>
                </motion.div>
              ))}
            </div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="content-block"
              style={{ marginTop: '80px' }}
            >
              <h2>Individuelle Anpassung</h2>
              <p>
                Diese Themen sind nur Beispiele. Wir entwickeln gerne individuelle Schulungskonzepte, 
                die genau auf Ihre IT-Infrastruktur, Ihre Branche und Ihre Ziele zugeschnitten sind. 
                Kontaktieren Sie uns für eine maßgeschneiderte Lösung.
              </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>Interesse an einer Schulung?</h2>
              <p>Lassen Sie uns gemeinsam das passende Schulungskonzept entwickeln</p>
              <Link href="/kontakt" className="btn btn-primary">
                Jetzt Beratung anfragen
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}