'use client'

import { motion } from 'framer-motion'
import { Hammer, TreePine, ShieldCheck } from 'lucide-react'
import { HeroSection } from '@/components/HeroSection'
import { ProjectCard } from '@/components/ProjectCard'
import { projects } from '@/lib/projects'

const features = [
  {
    icon: Hammer,
    title: 'Schnitzen',
    description: 'Lerne mit Schnitzmesser und Holz umzugehen und forme eigene Figuren.',
    color: 'bg-primary/10 text-primary',
  },
  {
    icon: TreePine,
    title: 'Bauen',
    description: 'Saege, leime und nagle — baue nuetzliche Dinge aus Holz!',
    color: 'bg-secondary/10 text-secondary',
  },
  {
    icon: ShieldCheck,
    title: 'Sicherheit',
    description: 'Jedes Projekt zeigt dir, wie du sicher mit Werkzeug arbeitest.',
    color: 'bg-accent/10 text-accent',
  },
]

export default function HomePage() {
  const featured = projects.slice(0, 4)

  return (
    <>
      <HeroSection />

      {/* Features */}
      <section className="max-w-6xl mx-auto px-4 py-16">
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
          {features.map((f, i) => (
            <motion.div
              key={f.title}
              className="bg-white rounded-2xl p-6 shadow-sm border border-primary/5 text-center"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: i * 0.1 }}
            >
              <div className={`w-14 h-14 rounded-xl ${f.color} flex items-center justify-center mx-auto mb-4`}>
                <f.icon className="w-7 h-7" />
              </div>
              <h3 className="font-heading font-bold text-lg mb-2">{f.title}</h3>
              <p className="text-sm text-dark/60">{f.description}</p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* Popular Projects */}
      <section className="max-w-6xl mx-auto px-4 pb-16">
        <h2 className="font-heading font-bold text-3xl text-center mb-8">
          Beliebte Projekte
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {featured.map((p) => (
            <ProjectCard key={p.slug} project={p} />
          ))}
        </div>
      </section>
    </>
  )
}