'use client'

import { motion } from 'framer-motion'
import Link from 'next/link'
import { FaSearch, FaShieldAlt, FaChartBar, FaMapMarkerAlt, FaComments, FaNetworkWired, FaFileAlt } from 'react-icons/fa'
import AnimatedIcon from '@/components/AnimatedIcon'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'

export default function ITInfrastrukturanalyse() {
  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-Infrastrukturanalyse</h1>
            <p className="page-hero-subtitle">
              Der erste Schritt zu mehr IT-Kompetenz
            </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>Was wird untersucht?</h2>
              <p>
                Unsere umfassende IT-Infrastrukturanalyse gibt Ihnen Klarheit über den aktuellen 
                Zustand Ihrer IT und zeigt konkrete Handlungsfelder auf.
              </p>
            </motion.div>

            <div className="features-grid" style={{ marginTop: '60px' }}>
              <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-large"
              >
                <AnimatedIcon delay={0.1}>
                  <FaSearch size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Infrastruktur-Erfassung</h3>
                <p>
                  Wir dokumentieren Ihre gesamte IT-Landschaft: Server, Netzwerke, 
                  Software-Landschaft, Cloud-Services und Endgeräte. Dabei erstellen wir eine 
                  vollständige IST-Dokumentation Ihrer IT-Infrastruktur.
                </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-large"
              >
                <AnimatedIcon delay={0.2}>
                  <FaShieldAlt size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Sicherheitsanalyse</h3>
                <p>
                  Wir identifizieren Sicherheitslücken, veraltete Systeme und 
                  Compliance-Probleme. Unser Schwachstellenbericht zeigt Ihnen genau, wo 
                  Handlungsbedarf besteht.
                </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-large"
              >
                <AnimatedIcon delay={0.3}>
                  <FaChartBar size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Schulungsbedarfs-Analyse</h3>
                <p>
                  Wir ermitteln den konkreten Schulungsbedarf Ihrer Mitarbeiter. Welche 
                  Kompetenzen fehlen? Wo gibt es Wissenslücken? Diese Analyse bildet die Basis 
                  für maßgeschneiderte Schulungskonzepte.
                </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>Welche Methoden werden eingesetzt?</h2>
              <p>
                Wir nutzen bewährte Methoden und Tools für eine gründliche Analyse:
              </p>
            </motion.div>

            <div className="features-grid" style={{ marginTop: '40px' }}>
              <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}>
                  <FaMapMarkerAlt size={28} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Vor-Ort-Begehungen</h3>
                <p>Persönliche Inspektion Ihrer IT-Infrastruktur</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}>
                  <FaComments size={28} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Interviews mit Mitarbeitern</h3>
                <p>Gespräche zur Ermittlung des Wissensstands</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}>
                  <FaNetworkWired size={28} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Technische Scans</h3>
                <p>Automatisierte Analyse von Systemen und Netzwerken</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}>
                  <FaFileAlt size={28} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Dokumentenanalyse</h3>
                <p>Auswertung bestehender Dokumentationen</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>Konkrete Ergebnisse</h2>
              <p>
                Nach der Analyse erhalten Sie:
              </p>
            </motion.div>

            <div className="features-grid" style={{ marginTop: '40px', gridTemplateColumns: '1fr' }}>
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
                className="feature-card-large"
                style={{ textAlign: 'left' }}
              >
                <h3 style={{ marginBottom: '20px' }}>IST-Dokumentation</h3>
                <p style={{ fontSize: '17px', lineHeight: '1.7' }}>
                  Eine vollständige Dokumentation Ihrer aktuellen IT-Infrastruktur mit allen 
                  Systemen, Komponenten und Abhängigkeiten. Diese Dokumentation dient als Basis 
                  für alle weiteren Schritte.
                </p>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
                className="feature-card-large"
                style={{ textAlign: 'left' }}
              >
                <h3 style={{ marginBottom: '20px' }}>Schwachstellenbericht</h3>
                <p style={{ fontSize: '17px', lineHeight: '1.7' }}>
                  Ein detaillierter Bericht über identifizierte Sicherheitslücken, veraltete 
                  Systeme und Risiken. Jede Schwachstelle wird mit Priorität und Handlungsempfehlung 
                  versehen.
                </p>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6 }}
                className="feature-card-large"
                style={{ textAlign: 'left' }}
              >
                <h3 style={{ marginBottom: '20px' }}>Handlungsempfehlungen</h3>
                <p style={{ fontSize: '17px', lineHeight: '1.7' }}>
                  Konkrete, priorisierte Empfehlungen für die nächsten Schritte. Diese umfassen 
                  sowohl technische Maßnahmen als auch Schulungsbedarfe für Ihre Mitarbeiter.
                </p>
              </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>Starten Sie mit der Analyse</h2>
              <p>Kontaktieren Sie uns für eine unverbindliche Beratung</p>
              <Link href="/kontakt" className="btn btn-primary btn-large">
                IT-Analyse anfordern
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}