'use client'

import { motion } from 'framer-motion'
import { TreePine, Heart, Sparkles, Users } from 'lucide-react'
import Link from 'next/link'

const reasons = [
  { icon: Sparkles, title: 'Kreativitaet', text: 'Du kannst dir selbst ausdenken, was du baust — und es dann wirklich machen!' },
  { icon: Heart, title: 'Stolz', text: 'Wenn du etwas mit deinen eigenen Haenden baust, macht dich das richtig stolz.' },
  { icon: TreePine, title: 'Natur', text: 'Holz ist ein natuerliches Material. Du lernst die Natur besser kennen.' },
  { icon: Users, title: 'Zusammen', text: 'Holzarbeiten macht zusammen mit Freunden oder der Familie am meisten Spass!' },
]

export default function UeberPage() {
  return (
    <div className="max-w-4xl mx-auto px-4 py-12">
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        className="text-center mb-12"
      >
        <h1 className="font-heading font-bold text-4xl mb-3">Ueber LEVIS Holzbau</h1>
        <p className="text-dark/60 text-lg max-w-2xl mx-auto">
          Wir zeigen dir, wie du aus einem einfachen Stueck Holz etwas Tolles machen kannst!
        </p>
      </motion.div>

      {/* Story */}
      <div className="bg-white rounded-2xl p-6 sm:p-8 border border-primary/5 mb-12">
        <h2 className="font-heading font-bold text-2xl mb-4">Was ist LEVIS Holzbau?</h2>
        <div className="space-y-4 text-dark/70 leading-relaxed">
          <p>
            LEVIS Holzbau ist deine Online-Holzwerkstatt! Hier findest du Anleitungen fuer tolle Projekte
            aus Holz — vom einfachen Zauberstab bis zum echten Vogelhaus.
          </p>
          <p>
            Jedes Projekt erklaert dir Schritt fuer Schritt, was du tun musst. Du siehst welches Werkzeug
            und Material du brauchst, und wir zeigen dir immer, worauf du bei der Sicherheit achten musst.
          </p>
          <p>
            Egal ob du 6 oder 12 Jahre alt bist — fuer jedes Alter gibt es passende Projekte.
            Faengst du gerade erst an? Dann probier den Zauberstab oder die Nagelbilder. Bist du
            schon ein Profi? Dann trau dich an den Fliegenpilz!
          </p>
        </div>
      </div>

      {/* Why woodworking */}
      <h2 className="font-heading font-bold text-2xl mb-6 text-center">Warum Holzarbeiten Spass macht</h2>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12">
        {reasons.map((r, i) => (
          <motion.div
            key={r.title}
            className="bg-white rounded-2xl p-5 border border-primary/5 flex gap-4"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.1 }}
          >
            <div className="w-10 h-10 bg-secondary/10 rounded-xl flex items-center justify-center flex-shrink-0">
              <r.icon className="w-5 h-5 text-secondary" />
            </div>
            <div>
              <h3 className="font-heading font-bold mb-1">{r.title}</h3>
              <p className="text-sm text-dark/60">{r.text}</p>
            </div>
          </motion.div>
        ))}
      </div>

      {/* CTA */}
      <div className="text-center bg-gradient-to-br from-primary/5 to-secondary/5 rounded-2xl p-8">
        <h2 className="font-heading font-bold text-2xl mb-3">Bereit loszulegen?</h2>
        <p className="text-dark/60 mb-6">Schau dir unsere Projekte an und such dir eins aus!</p>
        <Link
          href="/projekte"
          className="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white font-bold px-8 py-3 rounded-2xl transition-colors"
        >
          Zu den Projekten
        </Link>
      </div>
    </div>
  )
}