'use client'

import { motion } from 'framer-motion'
import Link from 'next/link'
import Image from 'next/image'
import { FaInstagram, FaYoutube, FaTiktok, FaGraduationCap, FaBuilding, FaSearch, FaGlobe, FaCheckCircle, FaCalculator } from 'react-icons/fa'
import AnimatedIcon from '@/components/AnimatedIcon'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'

export default function Home() {
  return (
    <>
      <Navigation />
      <main>
        {/* Hero Section */}
        <section className="hero hero-with-background">
          <div className="hero-background-image"></div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="hero-content"
          >
            <h1 className="hero-title">Doing-IT</h1>
            <p className="hero-subtitle">
              IT Weiterbildung und Schulungen<br />
              für Quereinsteiger und Unternehmen
            </p>
            <p style={{ fontSize: '19px', color: 'var(--color-text-secondary)', marginTop: '20px', maxWidth: '700px', marginLeft: 'auto', marginRight: 'auto', lineHeight: '1.7' }}>
              Doing-IT unterstützt Quereinsteiger und Unternehmen dabei, IT-Kompetenzen aufzubauen, Prozesse zu optimieren und digitale Sicherheit zu verbessern. Durch Schulungen, IT-Analysen, Webseiten-Checks und Social-Media-Analysen helfen wir dabei, digitale Herausforderungen einfach und verständlich zu meistern.
            </p>
            <div className="hero-buttons" style={{ marginTop: '40px' }}>
              <Link href="/quereinsteiger" className="btn btn-primary btn-large">
                Für Quereinsteiger
              </Link>
              <Link href="/unternehmen" className="btn btn-secondary btn-large">
                Für Unternehmen
              </Link>
            </div>
            
            {/* Social Media Icons */}
            <div className="social-icons">
              <a 
                href="https://www.instagram.com/doing_it_de" 
                target="_blank" 
                rel="noopener noreferrer"
                className="social-icon-link"
                aria-label="Instagram"
              >
                <FaInstagram />
              </a>
              <a 
                href="https://www.youtube.com/@doing-IT-de" 
                target="_blank" 
                rel="noopener noreferrer"
                className="social-icon-link"
                aria-label="YouTube"
              >
                <FaYoutube />
              </a>
              <a 
                href="https://www.tiktok.com/@doing_it_de" 
                target="_blank" 
                rel="noopener noreferrer"
                className="social-icon-link"
                aria-label="TikTok"
              >
                <FaTiktok />
              </a>
            </div>
          </motion.div>
        </section>

        {/* About Section */}
        <section className="features">
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="section-header"
            >
              <h2>Was ist Doing-IT?</h2>
              <p>Ein Unternehmen und Social Media Kanal rund um die Informatik</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}>
                  <FaGraduationCap size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Schulungen für Quereinsteiger</h3>
                <p>Speziell konzipierte Schulungen für den Einstieg in die Informatik. Von den Grundlagen bis zu fortgeschrittenen Themen – wir begleiten Sie auf Ihrem Weg.</p>
                <Link href="/quereinsteiger/lernpfad-finder" className="btn btn-primary">
                  Lernpfadfinder
                </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}>
                  <FaBuilding size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Optimierte Schulungen für Unternehmen</h3>
                <p>Maßgeschneiderte Schulungen angepasst an Ihre Anforderungen. Ob TISAX oder ISO Zertifizierung – wir schulen Ihre Mitarbeiter auf sensible IT-Themen.</p>
                <Link href="/unternehmen" className="btn btn-primary">
                  Mehr erfahren
                </Link>
              </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}>
                  <FaSearch size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>IT-Analyse</h3>
                <p>Umfassende Analyse Ihrer IT-Infrastruktur: Bedarf, Sicherheit, Kostenersparnis und Optimierungspotenziale. Wir identifizieren Schwachstellen und Verbesserungsmöglichkeiten.</p>
                <Link href="/unternehmen/it-infrastrukturanalyse" className="btn btn-primary">
                  IT-Analyse anfordern
                </Link>
              </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}>
                  <FaGlobe size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>Webseiten & Social Media Analysen</h3>
                <p>Professionelle Analysen Ihrer Webseite und Social Media Präsenz. Wir zeigen Ihnen Optimierungspotenziale und helfen bei der digitalen Strategie.</p>
                <Link href="/kontakt" className="btn btn-primary">
                  Analyse anfragen
                </Link>
              </motion.div>
            </div>
          </div>
        </section>

        {/* Tools Section */}
        <section className="features" style={{ background: 'transparent' }}>
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="section-header"
            >
              <h2>Unsere Tools</h2>
              <p>Praktische Hilfsmittel für Ihre IT-Planung</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}>
                  <FaCheckCircle size={32} color="var(--color-red)" />
                </AnimatedIcon>
                <h3>IT-Checkliste</h3>
                <p>Erhalten Sie eine erste Einschätzung Ihrer IT-Sicherheit und identifizieren Sie Optimierungspotenziale in Ihrer IT-Infrastruktur.</p>
                <Link href="/unternehmen/tools/it-checkliste" className="btn btn-primary">
                  Checkliste starten
                </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>Ermitteln Sie den Umfang Ihrer IT-Schulung basierend auf Mitarbeiteranzahl, Abteilungen und gewünschten Themen.</p>
                <Link href="/unternehmen/tools/schulungsbedarf" className="btn btn-primary">
                  Bedarf berechnen
                </Link>
              </motion.div>
            </div>
          </div>
        </section>

        {/* YouTube Videos Section */}
        <section className="features" style={{ background: 'transparent' }}>
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="section-header"
            >
              <h2>Aus unserem YouTube Kanal</h2>
              <p>Lernen Sie mehr über IT-Themen in unseren Videos</p>
            </motion.div>

            <div style={{ 
              display: 'grid', 
              gridTemplateColumns: '1fr', 
              gap: '40px', 
              maxWidth: '1200px', 
              margin: '0 auto' 
            }}>
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.1 }}
                style={{ 
                  position: 'relative', 
                  paddingBottom: '56.25%', 
                  height: 0, 
                  overflow: 'hidden',
                  borderRadius: '20px',
                  background: 'var(--color-card)',
                  border: '1px solid rgba(255, 255, 255, 0.1)'
                }}
              >
                <iframe
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    border: 'none'
                  }}
                  src="https://www.youtube.com/embed/TSJUu4729RE"
                  title="YouTube video player"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: 0.2 }}
                style={{ 
                  position: 'relative', 
                  paddingBottom: '56.25%', 
                  height: 0, 
                  overflow: 'hidden',
                  borderRadius: '20px',
                  background: 'var(--color-card)',
                  border: '1px solid rgba(255, 255, 255, 0.1)'
                }}
              >
                <iframe
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                    border: 'none'
                  }}
                  src="https://www.youtube.com/embed/nMREjJ6UbHY"
                  title="YouTube video player"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              </motion.div>
            </div>
          </div>
        </section>

        {/* Wiki & Resources Section */}
        <section className="cta-hero" style={{ background: 'var(--color-card)' }}>
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="cta-hero-content"
            >
              <h2>Weitere Ressourcen</h2>
              <p style={{ marginBottom: '40px' }}>
                Entdecken Sie unser Wiki mit umfassenden IT-Ressourcen und Lernmaterialien
              </p>
              <div style={{ display: 'flex', gap: '20px', justifyContent: 'center', flexWrap: 'wrap' }}>
                <a 
                  href="https://wiki.doing-it.de" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="btn btn-primary btn-large"
                >
                  Zum Wiki
                </a>
                <Link href="/quereinsteiger/lernpfad-finder" className="btn btn-secondary btn-large">
                  Lernpfadfinder
                </Link>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Partners Section */}
        <section className="partners-section">
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="partners-content"
            >
              <p style={{ fontSize: '15px', color: 'var(--color-text-secondary)', marginBottom: '20px', textTransform: 'uppercase', letterSpacing: '1px' }}>
                Partner-Projekt
              </p>
              <p style={{ fontSize: '17px', color: 'var(--color-text-secondary)', marginBottom: '30px', maxWidth: '600px', margin: '0 auto 30px' }}>
                doing-it.de ist ein gemeinsames Projekt von{' '}
                <a href="https://hoerter-tech.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}>
                  hoerter-tech.de
                </a>
                {' '}und{' '}
                <a href="https://matzefixit.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)', textDecoration: 'underline' }}>
                  matzefixit.de
                </a>
                .
              </p>
              <div style={{ display: 'flex', gap: '40px', justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center' }}>
                <a 
                  href="https://hoerter-tech.de" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  style={{ 
                    color: 'var(--color-text-secondary)', 
                    fontSize: '17px',
                    transition: 'color 0.3s ease',
                    textDecoration: 'none'
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'}
                  onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'}
                >
                  hoerter-tech.de
                </a>
                <span style={{ color: 'var(--color-text-secondary)', fontSize: '20px' }}>×</span>
                <a 
                  href="https://matzefixit.de" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  style={{ 
                    color: 'var(--color-text-secondary)', 
                    fontSize: '17px',
                    transition: 'color 0.3s ease',
                    textDecoration: 'none'
                  }}
                  onMouseEnter={(e) => e.currentTarget.style.color = 'var(--color-red)'}
                  onMouseLeave={(e) => e.currentTarget.style.color = 'var(--color-text-secondary)'}
                >
                  matzefixit.de
                </a>
              </div>
            </motion.div>
          </div>
        </section>

        {/* Über uns Section */}
        <section className="cta-hero" style={{ background: 'var(--color-card)', marginTop: '0' }}>
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="cta-hero-content"
            >
              <h2>Über uns</h2>
              <p style={{ marginBottom: '40px' }}>
                Erfahren Sie mehr über Doing-IT und unsere Mission
              </p>
              <Link href="/ueber-uns" className="btn btn-primary btn-large">
                Mehr erfahren
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}