'use client'

import { motion } from 'framer-motion'
import Link from 'next/link'
import { FaSearch, FaServer, FaUserTie, FaShieldAlt, FaDollarSign, FaBolt, FaLock, FaChartLine, FaHandshake, FaClipboardCheck } from 'react-icons/fa'
import AnimatedIcon from '@/components/AnimatedIcon'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'

export default function Unternehmen() {
  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>IT-Schulungen für Unternehmen</h1>
            <p className="page-hero-subtitle">
              Stärken Sie Ihr Team mit maßgeschneiderten IT-Schulungen
            </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>Unser Prozess: Von der Analyse bis zum internen Experten</h2>
              <p>
                Wir begleiten Sie in drei klaren Schritten zu mehr IT-Kompetenz in Ihrem Unternehmen.
              </p>
            </motion.div>

            <div className="features-grid">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.1 }}
                className="feature-card"
              >
                <div className="feature-number">1</div>
                <h3>Analyse Ihrer IT</h3>
                <p>
                  Wir analysieren Ihre bestehende IT-Infrastruktur umfassend. Dabei identifizieren wir 
                  Schwachstellen, Optimierungspotenziale und den konkreten Schulungsbedarf Ihrer 
                  Mitarbeiter. Sie erhalten eine detaillierte IST-Dokumentation, einen 
                  Schwachstellenbericht und konkrete Handlungsempfehlungen.
                </p>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.2 }}
                className="feature-card"
              >
                <div className="feature-number">2</div>
                <h3>Maßgeschneiderte Schulungskonzepte</h3>
                <p>
                  Basierend auf der Analyse entwickeln wir individuelle Schulungskonzepte, die genau 
                  auf Ihre IT-Infrastruktur, Ihre Branche und Ihre Ziele zugeschnitten sind. Ihre 
                  Mitarbeiter lernen direkt an Ihrer eigenen IT – praxisnah und sofort anwendbar.
                </p>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.3 }}
                className="feature-card"
              >
                <div className="feature-number">3</div>
                <h3>Aufbau interner Experten</h3>
                <p>
                  Durch unsere Schulungen entwickeln Sie eigene IT-Experten im Haus. Das reduziert 
                  langfristig externe Kosten, erhöht die IT-Sicherheit und ermöglicht schnellere 
                  Reaktionszeiten bei Problemen. Sie werden unabhängiger und stärker.
                </p>
              </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>Ihre Vorteile</h2>
              <p>
                Mit unseren maßgeschneiderten IT-Schulungen erreichen Sie mehr Sicherheit, Effizienz 
                und Kostensenkung in Ihrem Unternehmen.
              </p>
            </motion.div>

            <div className="features-grid">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.1 }}
                className="feature-card"
              >
                <AnimatedIcon delay={0.1}>
                  <FaSearch size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>IT-Analyse</h3>
                <p>
                  Wir analysieren Ihre bestehende IT-Infrastruktur und identifizieren 
                  Schulungsbedarfe. So wissen wir genau, wo wir ansetzen müssen.
                </p>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.2 }}
                className="feature-card"
              >
                <AnimatedIcon delay={0.2}>
                  <FaServer size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Schulung auf Ihrer Infrastruktur</h3>
                <p>
                  Ihre Mitarbeiter lernen direkt auf Ihrer eigenen IT-Infrastruktur. 
                  Keine abstrakten Beispiele – praxisnah und sofort anwendbar.
                </p>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.3 }}
                className="feature-card"
              >
                <AnimatedIcon delay={0.3}>
                  <FaUserTie size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Interne Experten aufbauen</h3>
                <p>
                  Entwickeln Sie Ihre eigenen IT-Experten im Haus. Reduzieren Sie 
                  Abhängigkeiten und stärken Sie Ihr Team nachhaltig.
                </p>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.4 }}
                className="feature-card"
              >
                <AnimatedIcon delay={0.4}>
                  <FaShieldAlt size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>IT-Sensibilisierung</h3>
                <p>
                  Wir schulen Ihre Mitarbeiter in generellen IT-Themen als Sensibilisierung 
                  für verschiedenste Bereiche. Von Sicherheit bis Cloud-Computing.
                </p>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.5 }}
                className="feature-card"
              >
                <AnimatedIcon delay={0.5}>
                  <FaDollarSign size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Kosteneinsparung</h3>
                <p>
                  Reduzieren Sie langfristig externe IT-Kosten durch qualifizierte 
                  interne Mitarbeiter.
                </p>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.6 }}
                className="feature-card"
              >
                <AnimatedIcon delay={0.6}>
                  <FaBolt size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Schnellere Reaktionszeiten</h3>
                <p>
                  Interne Experten können Probleme schneller lösen, ohne auf externe 
                  Unterstützung warten zu müssen.
                </p>
              </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>Interaktive Tools</h2>
              <p>
                Nutzen Sie unsere interaktiven Tools, um eine erste Einschätzung zu erhalten:
              </p>
            </motion.div>

            <div className="features-grid">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.1 }}
                className="feature-card"
              >
                <AnimatedIcon delay={0.1}>
                  <FaClipboardCheck size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>IT-Checkliste</h3>
                <p>Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit</p>
                <Link href="/unternehmen/tools/it-checkliste" className="btn btn-primary" style={{ marginTop: '20px', display: 'inline-block' }}>
                  Tool öffnen
                </Link>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.2 }}
                className="feature-card"
              >
                <AnimatedIcon delay={0.2}>
                  <FaCalculator size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Schulungsbedarfs-Rechner</h3>
                <p>Schätzen Sie den Umfang Ihrer IT-Schulung</p>
                <Link href="/unternehmen/tools/schulungsbedarf" className="btn btn-primary" style={{ marginTop: '20px', display: 'inline-block' }}>
                  Tool öffnen
                </Link>
              </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>Bereit für die IT-Analyse?</h2>
              <p>Kontaktieren Sie uns und lassen Sie uns gemeinsam Ihre IT-Weiterbildung planen</p>
              <Link href="/kontakt" className="btn btn-primary btn-large">
                IT-Analyse anfordern
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}