'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 CaseStudies() {
  const caseStudies = [
    {
      title: 'IT-Sicherheit für mittelständisches Unternehmen',
      company: 'Musterfirma GmbH',
      industry: 'Produktion',
      challenge: 'Das Unternehmen hatte wiederkehrende IT-Sicherheitsvorfälle und war stark von externen IT-Dienstleistern abhängig. Die Mitarbeiter hatten wenig IT-Wissen und konnten einfache Probleme nicht selbst lösen.',
      solution: 'Wir führten eine umfassende IT-Infrastrukturanalyse durch, identifizierten kritische Schwachstellen und entwickelten ein maßgeschneidertes Schulungskonzept. Die Mitarbeiter wurden in IT-Sicherheitsgrundlagen, Systemadministration und Notfallmaßnahmen geschult.',
      results: [
        '40% Reduzierung externer IT-Kosten',
        '60% weniger IT-Sicherheitsvorfälle',
        '3 interne IT-Experten aufgebaut',
        'Durchschnittliche Reaktionszeit bei Problemen von 4 Stunden auf 30 Minuten reduziert',
      ],
    },
    {
      title: 'Cloud-Migration und Schulung',
      company: 'TechSolutions AG',
      industry: 'IT-Dienstleistungen',
      challenge: 'Das Unternehmen wollte von lokalen Servern auf Cloud-Lösungen migrieren, hatte aber keine internen Experten für Cloud-Technologien. Die Mitarbeiter waren mit den neuen Systemen überfordert.',
      solution: 'Wir analysierten die bestehende Infrastruktur, entwickelten eine Migrationsstrategie und schulten das gesamte Team in Cloud-Technologien. Die Schulungen erfolgten parallel zur Migration, sodass die Mitarbeiter direkt an den neuen Systemen lernen konnten.',
      results: [
        'Erfolgreiche Migration ohne Ausfallzeiten',
        '5 Mitarbeiter zu Cloud-Experten zertifiziert',
        '30% Kosteneinsparung durch optimierte Cloud-Nutzung',
        '100% der Mitarbeiter können die neuen Systeme selbstständig nutzen',
      ],
    },
    {
      title: 'DSGVO-Compliance Schulung',
      company: 'Service GmbH',
      industry: 'Dienstleistungen',
      challenge: 'Das Unternehmen musste DSGVO-konform werden, hatte aber keine Expertise im Datenschutz. Die Mitarbeiter wussten nicht, wie sie mit personenbezogenen Daten umgehen sollten.',
      solution: 'Wir führten eine Datenschutzanalyse durch, identifizierten Compliance-Lücken und entwickelten ein umfassendes Schulungsprogramm zu DSGVO-Grundlagen, Datenschutzbestimmungen und korrektem Umgang mit personenbezogenen Daten.',
      results: [
        'Vollständige DSGVO-Compliance erreicht',
        '2 Datenschutzbeauftragte intern ausgebildet',
        'Keine Datenschutzverstöße mehr',
        'Zertifizierung nach ISO 27001 vorbereitet',
      ],
    },
  ]

  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>Fallstudien</h1>
            <p className="page-hero-subtitle">
              Erfolgreiche Projekte im Detail
            </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>Von der Herausforderung zum Erfolg</h2>
              <p>
                Erfahren Sie, wie wir Unternehmen dabei geholfen haben, ihre IT-Kompetenzen 
                zu stärken und messbare Ergebnisse zu erzielen.
              </p>
            </motion.div>

            <div style={{ marginTop: '80px' }}>
              {caseStudies.map((study, 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.2 }}
                  className="feature-card-large"
                  style={{ marginBottom: '60px', textAlign: 'left' }}
                >
                  <h2 style={{ fontSize: '32px', marginBottom: '10px' }}>{study.title}</h2>
                  <p style={{ color: 'var(--color-text-secondary)', marginBottom: '30px' }}>
                    {study.company} • {study.industry}
                  </p>

                  <h3 style={{ fontSize: '24px', marginTop: '30px', marginBottom: '15px' }}>Ausgangssituation</h3>
                  <p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '30px' }}>
                    {study.challenge}
                  </p>

                  <h3 style={{ fontSize: '24px', marginTop: '30px', marginBottom: '15px' }}>Unsere Lösung</h3>
                  <p style={{ fontSize: '17px', lineHeight: '1.7', marginBottom: '30px' }}>
                    {study.solution}
                  </p>

                  <h3 style={{ fontSize: '24px', marginTop: '30px', marginBottom: '15px' }}>Erzielte Ergebnisse</h3>
                  <ul style={{ fontSize: '17px', lineHeight: '1.7', paddingLeft: '20px' }}>
                    {study.results.map((result, i) => (
                      <li key={i} style={{ marginBottom: '10px', color: 'var(--color-text-secondary)' }}>
                        {result}
                      </li>
                    ))}
                  </ul>
                </motion.div>
              ))}
            </div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="cta-section"
            >
              <h2>Ihr Erfolg könnte der nächste sein</h2>
              <p>Lassen Sie uns gemeinsam Ihre IT-Herausforderungen lösen</p>
              <Link href="/kontakt" className="btn btn-primary">
                Jetzt Beratung anfragen
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}