'use client'

import { motion } from 'framer-motion'
import Link from 'next/link'
import Image from 'next/image'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'

export default function UeberUns() {
  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>Über uns</h1>
            <p className="page-hero-subtitle">
              IT für alle verständlich machen
            </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>Unsere Mission</h2>
              <p>
                Wir möchten IT für alle verständlich machen. Unser Fokus liegt auf praktischen, verständlichen und realistischen Schulungsangeboten für Quereinsteiger und Unternehmen. Dabei setzen wir auf Erfahrung, Ehrlichkeit und moderne Lernmethoden.
              </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 }}
              style={{ 
                maxWidth: '800px', 
                margin: '80px auto', 
                textAlign: 'center',
                position: 'relative',
                zIndex: 1
              }}
            >
              <Image 
                src="/motorrad.png" 
                alt="Motorradfahren" 
                width={800} 
                height={600}
                style={{ 
                  width: '100%', 
                  height: 'auto', 
                  display: 'block',
                  borderRadius: '20px',
                  border: '1px solid rgba(255, 255, 255, 0.1)'
                }}
              />
              <p style={{ 
                marginTop: '30px', 
                fontSize: '19px', 
                color: 'var(--color-text-secondary)',
                lineHeight: '1.7'
              }}>
                Neben der IT teilen wir beide die Leidenschaft für das Motorradfahren.
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="cta-section"
            >
              <h2>Kontaktieren Sie uns</h2>
              <p>Haben Sie Fragen oder möchten Sie mehr über unsere Angebote erfahren?</p>
              <Link href="/kontakt" className="btn btn-primary btn-large">
                Jetzt Kontakt aufnehmen
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}