'use client'

import { motion } from 'framer-motion'

const focusAreas = [
  {
    category: 'Sprachen',
    items: [
      { name: 'Python', detail: 'Haupt-Sprache für KI und Automatisierung' },
      { name: 'Rust', detail: 'Für performante Systemtools' },
      { name: 'Shell/Bash', detail: 'Tägliches Werkzeug' },
    ],
  },
  {
    category: 'Systeme',
    items: [
      { name: 'Linux', detail: 'Arch, Debian, NixOS' },
      { name: 'Self-Hosting', detail: 'Eigene Infrastruktur' },
      { name: 'Containers', detail: 'Docker, Podman' },
    ],
  },
  {
    category: 'KI & ML',
    items: [
      { name: 'LLMs', detail: 'GPT, Claude, lokale Modelle' },
      { name: 'KI-Tools', detail: 'Cursor, Copilot, Aider' },
      { name: 'ML Ops', detail: 'Training, Deployment' },
    ],
  },
  {
    category: 'Interessen',
    items: [
      { name: 'Automatisierung', detail: 'Workflows, Pipelines' },
      { name: 'CLI Tools', detail: 'Terminal-first' },
      { name: 'Open Source', detail: 'Nutzung & Beteiligung' },
    ],
  },
]

export function FocusSection() {
  return (
    <section id="fokus" 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"
        >
          <span className="font-mono text-xs tracking-wider text-accent uppercase">
            Aktuell
          </span>
          <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl mt-4 text-balance">
            Technologien & Fokus
          </h2>
          <p className="mt-6 text-lg text-muted-foreground max-w-2xl">
            Die Werkzeuge und Themen, mit denen ich aktuell arbeite. 
            Kein Buzzword-Bingo, sondern tägliche Praxis.
          </p>
        </motion.div>

        {/* Focus Grid */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-6">
          {focusAreas.map((area, areaIndex) => (
            <motion.div
              key={area.category}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-50px' }}
              transition={{ duration: 0.5, delay: areaIndex * 0.1 }}
            >
              <h3 className="font-mono text-sm text-accent mb-6 pb-3 border-b border-border">
                {area.category}
              </h3>
              <ul className="space-y-4">
                {area.items.map((item, itemIndex) => (
                  <motion.li
                    key={item.name}
                    initial={{ opacity: 0, x: -10 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.3, delay: areaIndex * 0.1 + itemIndex * 0.05 }}
                    className="group"
                  >
                    <span className="block font-medium text-foreground group-hover:text-accent transition-colors">
                      {item.name}
                    </span>
                    <span className="block text-sm text-muted-foreground mt-0.5">
                      {item.detail}
                    </span>
                  </motion.li>
                ))}
              </ul>
            </motion.div>
          ))}
        </div>

        {/* Secondary visual element */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.4 }}
          className="mt-20 pt-12 border-t border-border"
        >
          <div className="flex flex-wrap gap-3">
            {['vim', 'git', 'tmux', 'ssh', 'systemd', 'nginx', 'PostgreSQL', 'Redis', 'FastAPI', 'PyTorch', 'Transformers', 'tiktoken'].map((tool) => (
              <span
                key={tool}
                className="font-mono text-xs px-3 py-1.5 border border-border rounded text-muted-foreground hover:text-foreground hover:border-accent/50 transition-colors cursor-default"
              >
                {tool}
              </span>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  )
}