'use client'

import { motion } from 'framer-motion'

const timeline = [
  {
    era: '1984',
    title: 'Der Anfang',
    description: 'Erste Programme in Fortran IV. Lochkarten, Großrechner, Batch-Verarbeitung. Die Grundlagen des algorithmischen Denkens.',
    tech: ['Fortran IV'],
  },
  {
    era: '1986',
    title: 'Systemnahe Programmierung',
    description: 'C und 68000-Assembler auf dem Atari ST. Direkte Hardware-Ansteuerung, Interrupt-Routinen, Speicherverwaltung von Hand.',
    tech: ['C', '68000 ASM', 'GFA Basic'],
  },
  {
    era: '1990',
    title: 'Unix an der Universität',
    description: 'SunOS, HP-UX, BSD. Die Philosophie kleiner, zusammenarbeitender Programme. Shell-Scripting als Werkzeug.',
    tech: ['Unix', 'Shell', 'vi'],
  },
  {
    era: '1994',
    title: 'Linux entdeckt',
    description: 'Slackware auf 40 Disketten. Der Beginn einer dauerhaften Begeisterung für offene Systeme und Selbstbestimmung.',
    tech: ['Linux', 'GNU Tools', 'X11'],
  },
  {
    era: '2000er',
    title: 'Professionelle Entwicklung',
    description: 'Verschiedene Sprachen, verschiedene Domänen. Server-Administration, Automatisierung, Web-Entwicklung.',
    tech: ['Perl', 'PHP', 'Bash', 'Python'],
  },
  {
    era: '2022',
    title: 'KI-Fokus',
    description: 'Seit Ende 2022 intensive Beschäftigung mit KI-Tools und KI-Programmierung. LLMs als Arbeitswerkzeug und Forschungsgegenstand.',
    tech: ['Python', 'Rust', 'LLMs', 'ML'],
  },
]

export function AboutSection() {
  return (
    <section id="ueber" className="py-24 lg:py-32">
      <div className="max-w-6xl mx-auto px-6 lg:px-8">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="mb-16 lg:mb-24"
        >
          <span className="font-mono text-xs tracking-wider text-accent uppercase">
            Hintergrund
          </span>
          <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl mt-4 text-balance">
            Vier Jahrzehnte Programmierung
          </h2>
          <p className="mt-6 text-lg text-muted-foreground max-w-2xl">
            Eine Reise durch die Evolution der Software-Entwicklung – 
            von Lochkarten bis zu Large Language Models.
          </p>
        </motion.div>

        {/* Timeline */}
        <div className="relative">
          {/* Vertical line */}
          <div className="absolute left-0 lg:left-1/2 top-0 bottom-0 w-px bg-border lg:-translate-x-px hidden sm:block" />

          <div className="space-y-12 lg:space-y-16">
            {timeline.map((item, index) => (
              <motion.div
                key={item.era}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-50px' }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className={`relative grid lg:grid-cols-2 gap-8 lg:gap-16 ${
                  index % 2 === 0 ? '' : 'lg:direction-rtl'
                }`}
              >
                {/* Timeline dot */}
                <div className="absolute left-0 lg:left-1/2 top-0 -translate-x-1/2 hidden sm:block">
                  <div className="size-3 rounded-full bg-background border-2 border-accent" />
                </div>

                {/* Content */}
                <div className={`pl-8 sm:pl-12 lg:pl-0 ${index % 2 === 0 ? 'lg:pr-16 lg:text-right' : 'lg:col-start-2 lg:pl-16'}`}>
                  <div className={`lg:direction-ltr ${index % 2 === 0 ? 'lg:ml-auto lg:max-w-md' : 'lg:max-w-md'}`}>
                    <span className="font-mono text-sm text-accent">{item.era}</span>
                    <h3 className="font-serif text-xl lg:text-2xl mt-2">{item.title}</h3>
                    <p className="mt-3 text-muted-foreground leading-relaxed">
                      {item.description}
                    </p>
                    <div className={`mt-4 flex flex-wrap gap-2 ${index % 2 === 0 ? 'lg:justify-end' : ''}`}>
                      {item.tech.map((tech) => (
                        <span
                          key={tech}
                          className="font-mono text-xs px-2 py-1 bg-secondary text-secondary-foreground rounded"
                        >
                          {tech}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Spacer for alternating layout */}
                {index % 2 !== 0 && <div className="hidden lg:block" />}
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}