'use client'

import { motion } from 'framer-motion'

const timeline = [
  {
    era: '1976',
    title: 'Der Anfang',
    description: 'Erste Programme in Fortran IV. Lochkarten, Großrechner, Batch-Verarbeitung. Erste Programmierkurse im Rahmen des VWL-Studiums. Die Grundlagen des algorithmischen Denkens.',
    tech: ['Fortran IV'],
  },
  {
    era: '1984',
    title: 'Der erste PC',
    description: 'Erste Programme in Basic, C und Pascal auf dem Personal Computer unter DOS. Datenbanken, Textverarbeitung, Spiele.',
    tech: ['Lotus 1-2-3', 'dBASE', 'QBasic', 'Turbo Pascal', 'Norton Commander', 'WordPerfect'],
  },
  {
    era: '1986',
    title: 'Systemnahe Programmierung',
    description: 'C und 68000-Assembler auf dem Atari ST. Direkte Hardware-Ansteuerung, Interrupt-Routinen, Speicherverwaltung von Hand. Pseudo-Multitasking. DFÜ mit Akustikkoppler. Maiboxen, FidoNet, MausNet.',
    tech: ['C', '68000 ASM', 'GFA Basic', 'TOS'],
  },
  {
    era: '1990',
    title: 'Unix an der Universität',
    description: 'AIX, HP-UX, BSD. Die Philosophie kleiner, zusammenarbeitender Programme. Shell-Scripting als Werkzeug. Internet. Sysop-Aufgaben im Uni-Rechenzentrum.',
    tech: ['Unix', 'Shell', 'vi', 'Gopher'],
  },
  {
    era: '1992',
    title: 'Linux entdeckt',
    description: 'Slackware auf 40 Disketten, Debian, SUSE Linux ... Der Beginn einer dauerhaften Begeisterung für offene Systeme und Selbstbestimmung. C, C++, Pascal, Modula, Perl, Shell-Skript. Internet per Modem. Pentesting, Hacking.',
    tech: ['Linux', 'GNU Tools', 'X11'],
  },
  {
    era: '1995 ff.',
    title: 'World Wide Web',
    description: 'Permanenter privater Internet-Zugang kommerzieller Anbieter und erste eigene Domain: linix.de. World Wide Web. Eigene Webseiten in HTML und JavaScript programmiert.',
    tech: ['WWW', 'Netscape', 'HTML', 'Java', 'JavaScript', 'Modem'],
  },
  {
    era: '2000er',
    title: 'Professionelle Entwicklung',
    description: 'Verschiedene Sprachen, verschiedene Domänen. Server-Administration, Automatisierung, Web-Entwicklung. Systemadministration, Networking. — Alles unter Linux.',
    tech: ['Perl', 'PHP', 'Bash', 'Python', 'Go', 'Proxmox', 'Docker/Podman'],
  },
  {
    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">
            Fünf 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, Vibe-Coding und agentischen KI‑Systemen.
          </p>
        </motion.div>

        {/* Motivation Section */}
        <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">
            Motivation
          </span>
          <h3 className="font-serif text-2xl sm:text-3xl lg:text-4xl mt-4 text-balance">
            Meine Faulheit hat mich zum Programmierer gemacht
          </h3>
          
          <div className="mt-8 space-y-6 text-muted-foreground leading-relaxed max-w-3xl">
            <p>
              Ich war schon immer faul – und diese Eigenschaft habe ich immer wieder mit Intelligenz zu 
              kompensieren versucht. Gern hätte ich als Schüler im Mathematik-Leistungskurs und später an 
              der Universität große, anspruchsvolle Projekte gerechnet. Doch ich war einfach zu faul dazu. 
              Erst im VWL-Studium musste ich programmieren lernen – und das war der Wendepunkt.
            </p>
            
            <p>
              Sofort faszinierte mich, was sich mit dieser Methode alles bewerkstelligen ließ: Was der 
              kybernetische Rechenknecht erledigen konnte, musste ich mir nicht mehr mühsam abringen. 
              Das wurde für mich lebenslang Motivation, immer mehr Programmiersprachen zu lernen und mich 
              mit Rechnern zu beschäftigen. Mit Systemen, bei denen sich nichts wirklich Nachhaltiges lernen 
              ließ, habe ich mich nie lange aufgehalten. Deshalb habe ich bis heute nur sehr wenig Ahnung 
              von Microsoft‑Produkten.
            </p>
            
            <p>
              Wer sein Geld damit verdient, banalen Code geheim zu halten und die Menschheit abzuzocken, 
              schrumpfte in meiner Wertschätzung auf ein Minimum. Umso größer wurde mein Enthusiasmus für 
              Open-Source‑Projekte. Dort kann man wirklich Nützliches lernen – ohne dass sich alles alle 
              zwei Jahre wieder ändert, nur weil ein Softwareverkäufer neue Kurse anbieten will.
            </p>
            
            <div className="mt-8 pt-8 border-t border-border">
              <p className="font-serif text-lg italic text-foreground">
                Und so gilt das erste Jamulix‑Gesetz:
              </p>
              <p className="font-mono text-xl lg:text-2xl text-accent mt-3">
                Je schlauer, umso Linux!
              </p>
            </div>
          </div>
        </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>
  )
}