'use client'

import { motion } from 'framer-motion'
import Link from 'next/link'
import { ArrowRight } from 'lucide-react'
import { Logo } from './Logo'

export function HeroSection() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-cream via-white to-primary/5 py-16 sm:py-24">
      <div className="max-w-6xl mx-auto px-4 flex flex-col lg:flex-row items-center gap-12">
        <motion.div
          className="flex-1 text-center lg:text-left"
          initial={{ opacity: 0, x: -30 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.6 }}
        >
          <div className="flex justify-center lg:justify-start mb-6">
            <Logo size={64} />
          </div>
          <h1 className="font-heading font-bold text-4xl sm:text-5xl text-dark mb-4 text-balance">
            Willkommen in der{' '}
            <span className="text-primary">Holzwerkstatt</span>!
          </h1>
          <p className="text-lg text-dark/70 mb-8 max-w-lg mx-auto lg:mx-0">
            Hier lernst du, wie man aus Holz tolle Sachen baut und schnitzt.
            Vom Zauberstab bis zum Vogelhaus — fuer jeden ist etwas dabei!
          </p>
          <Link
            href="/projekte"
            className="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-white font-bold px-8 py-4 rounded-2xl text-lg transition-colors shadow-lg shadow-primary/20"
          >
            Entdecke Projekte <ArrowRight className="w-5 h-5" />
          </Link>
        </motion.div>

        <motion.div
          className="flex-1 flex justify-center"
          initial={{ opacity: 0, scale: 0.8 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          <HeroIllustration />
        </motion.div>
      </div>
    </section>
  )
}

function HeroIllustration() {
  return (
    <svg width="320" height="280" viewBox="0 0 320 280" fill="none" xmlns="http://www.w3.org/2000/svg">
      {/* Workbench */}
      <rect x="40" y="180" width="240" height="12" rx="4" fill="#D4915C" />
      <rect x="60" y="192" width="12" height="60" rx="2" fill="#C4814C" />
      <rect x="248" y="192" width="12" height="60" rx="2" fill="#C4814C" />
      <rect x="50" y="248" width="32" height="8" rx="2" fill="#C4814C" />
      <rect x="238" y="248" width="32" height="8" rx="2" fill="#C4814C" />

      {/* Wood pieces on bench */}
      <rect x="80" y="164" width="60" height="16" rx="3" fill="#E8A96C" />
      <rect x="85" y="168" width="50" height="2" rx="1" fill="#D4915C" opacity="0.3" />

      {/* Small boat */}
      <path d="M180 170 Q200 155 220 170 Q200 178 180 170Z" fill="#E8A96C" />
      <line x1="200" y1="148" x2="200" y2="170" stroke="#8B6F47" strokeWidth="2" />
      <path d="M200 148 L215 158 L200 165Z" fill="#FF6B6B" opacity="0.8" />

      {/* Hammer */}
      <rect x="240" y="155" width="4" height="25" rx="1" fill="#8B6F47" transform="rotate(-20 240 155)" />
      <rect x="232" y="148" width="20" height="10" rx="2" fill="#888" transform="rotate(-20 240 155)" />

      {/* Tree background */}
      <circle cx="60" cy="100" r="35" fill="#4CAF50" opacity="0.3" />
      <circle cx="50" cy="85" r="25" fill="#4CAF50" opacity="0.4" />
      <circle cx="70" cy="90" r="28" fill="#4CAF50" opacity="0.35" />
      <rect x="56" y="120" width="8" height="60" rx="2" fill="#8B6F47" opacity="0.4" />

      {/* Tree right */}
      <circle cx="270" cy="110" r="30" fill="#4CAF50" opacity="0.25" />
      <circle cx="280" cy="95" r="22" fill="#4CAF50" opacity="0.35" />
      <rect x="268" y="130" width="6" height="50" rx="2" fill="#8B6F47" opacity="0.3" />

      {/* Sun */}
      <circle cx="280" cy="40" r="20" fill="#F5A623" opacity="0.3" />
      <circle cx="280" cy="40" r="14" fill="#F5A623" opacity="0.5" />

      {/* Sawdust particles */}
      <circle cx="120" cy="175" r="1.5" fill="#D4915C" opacity="0.5" />
      <circle cx="130" cy="172" r="1" fill="#D4915C" opacity="0.4" />
      <circle cx="115" cy="178" r="1.2" fill="#D4915C" opacity="0.3" />
      <circle cx="135" cy="176" r="0.8" fill="#D4915C" opacity="0.6" />
    </svg>
  )
}