'use client'

import { motion } from 'framer-motion'
import { ShieldCheck, Eye, Hand, Scissors, AlertTriangle, Users } from 'lucide-react'
import { SafetyTip } from '@/components/SafetyTip'

const rules = [
  { icon: Users, title: 'Immer mit Erwachsenen', text: 'Bei Saegen, Bohren und Schnitzen muss immer ein Erwachsener dabei sein.' },
  { icon: Hand, title: 'Vom Koerper weg', text: 'Schnitze, saege und schneide immer vom Koerper weg. So kannst du dich nicht verletzen.' },
  { icon: Eye, title: 'Schutzbrille tragen', text: 'Beim Saegen und Schleifen fliegen Spaene — eine Schutzbrille schuetzt deine Augen.' },
  { icon: Scissors, title: 'Werkzeug richtig halten', text: 'Greife Werkzeuge immer am Griff. Trage Messer und Saegen mit der Spitze nach unten.' },
  { icon: AlertTriangle, title: 'Aufgeraeumter Arbeitsplatz', text: 'Raeume Werkzeug nach dem Benutzen weg. Ein ordentlicher Platz ist ein sicherer Platz!' },
  { icon: ShieldCheck, title: 'Scharfes Werkzeug', text: 'Klingt komisch, aber: Scharfe Messer sind sicherer als stumpfe, weil du weniger Kraft brauchst.' },
]

const toolGuides = [
  { name: 'Schnitzmesser', age: 'Ab 6 Jahren (mit Hilfe)', tips: ['Immer vom Koerper weg schnitzen', 'Nach dem Benutzen zuklappen', 'Weiches Holz (Linde) verwenden'] },
  { name: 'Handsaege', age: 'Ab 7 Jahren (mit Hilfe)', tips: ['Holz immer fest einspannen', 'Langsam und gleichmaessig saegen', 'Nicht auf die Klinge druecken'] },
  { name: 'Hammer', age: 'Ab 5 Jahren', tips: ['Leichten Kinderhammer verwenden', 'Naegel mit Zange halten, nie mit Fingern', 'Auf stabile Unterlage achten'] },
  { name: 'Schleifpapier', age: 'Ab 5 Jahren', tips: ['Immer in eine Richtung schleifen', 'Staub nicht einatmen', 'Erst grob, dann fein'] },
  { name: 'Holzleim', age: 'Ab 5 Jahren', tips: ['Nicht giftig, aber nicht essen', 'Duenn auftragen reicht', 'Mindestens 1 Stunde trocknen lassen'] },
]

export default function SicherheitPage() {
  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"
      >
        <div className="w-16 h-16 bg-warning/10 rounded-2xl flex items-center justify-center mx-auto mb-4">
          <ShieldCheck className="w-8 h-8 text-warning" />
        </div>
        <h1 className="font-heading font-bold text-4xl mb-3">Sicherheit geht vor!</h1>
        <p className="text-dark/60 text-lg max-w-2xl mx-auto">
          Holzarbeiten macht riesig Spass — aber nur, wenn du sicher arbeitest.
          Hier findest du die wichtigsten Regeln.
        </p>
      </motion.div>

      {/* Rules Grid */}
      <section className="mb-16">
        <h2 className="font-heading font-bold text-2xl mb-6">Die goldenen Regeln</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          {rules.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.05 }}
            >
              <div className="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center flex-shrink-0">
                <r.icon className="w-5 h-5 text-warning" />
              </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>
      </section>

      {/* Tool Guides */}
      <section className="mb-16">
        <h2 className="font-heading font-bold text-2xl mb-6">Werkzeug-Guide</h2>
        <div className="space-y-4">
          {toolGuides.map((tool) => (
            <div key={tool.name} className="bg-white rounded-2xl p-5 border border-primary/5">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-heading font-bold text-lg">{tool.name}</h3>
                <span className="text-xs font-semibold bg-accent/10 text-accent px-2.5 py-1 rounded-full">{tool.age}</span>
              </div>
              <ul className="space-y-1.5">
                {tool.tips.map((tip) => (
                  <li key={tip} className="flex items-center gap-2 text-sm text-dark/70">
                    <span className="w-1.5 h-1.5 rounded-full bg-primary flex-shrink-0" />
                    {tip}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* Parents */}
      <section>
        <h2 className="font-heading font-bold text-2xl mb-4">Hinweise fuer Eltern</h2>
        <div className="space-y-3">
          <SafetyTip>Beaufsichtigen Sie Ihr Kind bei allen Projekten — besonders beim Umgang mit Schneidwerkzeugen.</SafetyTip>
          <SafetyTip>Stellen Sie altersgerechtes Werkzeug bereit. Kinderschnitzmesser haben abgerundete Spitzen.</SafetyTip>
          <SafetyTip>Richten Sie einen festen Arbeitsplatz ein — idealerweise auf einer stabilen Werkbank oder einem alten Tisch.</SafetyTip>
          <SafetyTip>Leinoel und Acrylfarben sind fuer Kinder unbedenklich. Vermeiden Sie Lacke mit Loesungsmitteln.</SafetyTip>
        </div>
      </section>
    </div>
  )
}