'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 Home() {
  return (
    <>
      <Navigation />
      <main>
        {/* Hero Section */}
        <section className="hero">
          <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>
            <div className="hero-buttons">
              <Link href="/quereinsteiger" className="btn btn-primary">
                Jetzt durchstarten
              </Link>
              <Link href="/unternehmen" className="btn btn-secondary">
                IT-Analyse anfordern
              </Link>
            </div>
          </motion.div>
        </section>

        {/* Features 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>Warum doing-it?</h2>
              <p>Individuell, niveaubasiert, zertifiziert – mit Experten-Support</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-icon">🎯</div>
                <h3>Individuell</h3>
                <p>Maßgeschneiderte Schulungen auf Ihre Bedürfnisse zugeschnitten</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-icon">📚</div>
                <h3>Stufenweise</h3>
                <p>Niveaubasierte Freischaltung von Inhalten für optimalen Lernerfolg</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-icon">💼</div>
                <h3>Zertifiziert</h3>
                <p>Anerkannte Zertifizierungen für Ihre Karriere</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"
              >
                <div className="feature-icon">👥</div>
                <h3>Experten-Support</h3>
                <p>Livetrainings und Chats mit IT-Experten bei Fragen</p>
              </motion.div>
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="cta-hero">
          <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>Bereit für den nächsten Schritt?</h2>
              <p>Kontaktieren Sie uns und lassen Sie uns gemeinsam Ihre IT-Weiterbildung planen</p>
              <div className="hero-buttons">
                <Link href="/kontakt" className="btn btn-primary">
                  Jetzt Kontakt aufnehmen
                </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>
      </main>
      <Footer />
    </>
  )
}