'use client'

import { motion } from 'framer-motion'

const principles = [
  {
    title: 'Langfristige Neugier',
    text: 'Technologie verändert sich ständig. Das Interesse daran nicht. Wer 1984 mit Programmieren begonnen hat, hat viele Paradigmenwechsel erlebt – und überlebt.',
  },
  {
    title: 'Handwerkliche Sorgfalt',
    text: 'Code ist keine Einwegware. Lesbarkeit, Wartbarkeit, Einfachheit – das sind keine Nice-to-haves, sondern Grundanforderungen.',
  },
  {
    title: 'Systeme verstehen',
    text: 'Nicht nur nutzen, sondern begreifen. Vom Kernel bis zum Compiler. Nur wer versteht, wie Dinge zusammenhängen, kann sie wirklich beherrschen.',
  },
  {
    title: 'KI als Werkzeug',
    text: 'Künstliche Intelligenz ist kein Hype, sondern ein ernsthaftes Werkzeug. Es verändert, wie wir programmieren – aber nicht warum.',
  },
]

export function PhilosophySection() {
  return (
    <section id="philosophie" className="py-24 lg:py-32 bg-secondary/30">
      <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-20"
        >
          <span className="font-mono text-xs tracking-wider text-accent uppercase">
            Prinzipien
          </span>
          <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl mt-4 text-balance">
            Philosophie
          </h2>
        </motion.div>

        {/* Principles Grid */}
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-x-16 lg:gap-y-14">
          {principles.map((principle, index) => (
            <motion.article
              key={principle.title}
              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"
            >
              {/* Decorative number */}
              <span className="absolute -left-2 lg:-left-8 top-0 font-mono text-6xl lg:text-7xl font-bold text-border/50 select-none">
                {String(index + 1).padStart(2, '0')}
              </span>
              
              <div className="relative pl-8 lg:pl-0">
                <h3 className="font-serif text-xl lg:text-2xl mb-4">
                  {principle.title}
                </h3>
                <p className="text-muted-foreground leading-relaxed">
                  {principle.text}
                </p>
              </div>
            </motion.article>
          ))}
        </div>

        {/* Closing statement */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.4 }}
          className="mt-20 pt-12 border-t border-border"
        >
          <blockquote className="font-serif text-xl lg:text-2xl text-center max-w-3xl mx-auto text-balance">
            &ldquo;Der beste Code ist der, den man in zehn Jahren noch versteht – 
            geschrieben von jemandem, der in zehn Jahren noch lernt.&rdquo;
          </blockquote>
        </motion.div>
      </div>
    </section>
  )
}