'use client'
import React, { useEffect, useMemo, useState } from "react"
import { motion } from "framer-motion"
import { Check, Star, BadgeCheck, Sparkles, Play, Mail, Phone, Calendar, Building2, ShieldCheck, Clock4, Users2, Zap, Award, Heart } from "lucide-react"
import Image from 'next/image'
import { 
  FadeUp, 
  StaggerContainer, 
  StaggerItem, 
  ScaleIn, 
  SlideInLeft, 
  SlideInRight, 
  HoverCard, 
  MagneticButton,
  CountUp,
  ParallaxElement
} from '@/components/ScrollAnimations'
import { AnimatedFAQ } from '@/components/AnimatedFAQ'
import { VideoPlayer } from '@/components/VideoPlayer'

// ---- Main Component ----
export default function MagicianLandingPage() {
  const [active, setActive] = useState("home")

  // Simple scroll function
  const scrollToSection = (sectionId: string) => {
    console.log('Scrolling to:', sectionId) // Debug log
    const element = document.getElementById(sectionId)
    if (element) {
      const headerOffset = 100
      const elementPosition = element.getBoundingClientRect().top
      const offsetPosition = elementPosition + window.pageYOffset - headerOffset
      
      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      })
    } else {
      console.log('Element not found:', sectionId) // Debug log
    }
  }

  // Observe sections to highlight active link
  useEffect(() => {
    const ids = ["home", "proof", "showreel", "acts", "usecases", "testimonials", "about", "faq", "contact"]
    const obs = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((e) => e.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]
        if (visible) setActive(visible.target.id)
      },
      { rootMargin: "-50% 0px -45% 0px", threshold: [0.15, 0.35, 0.6] }
    )

    ids.forEach((id) => {
      const el = document.getElementById(id)
      if (el) obs.observe(el)
    })

    return () => obs.disconnect()
  }, [])

  // Data
  const proof = useMemo(
    () => ({
      rating: 5,
      reviews: 12,
      bookings: 20,
      travel: ">1000 km",
      logos: ["SAT.1", "WDR", "ZDF", "Amazon Prime Video"],
      clients: [
        "Mercedes-Benz AG",
        "Materna TMT", 
        "VIVA Cruises",
        "AMADA",
        "IHK",
        "Lexus",
      ],
    }),
    []
  )

  const acts = [
    {
      title: "Close-up Magic (Walking)",
      desc: "Hautnah am Tisch – perfekter Eisbrecher & Gesprächszünder für Empfänge und Dinner.",
      points: ["Interaktiv mit Gästen", "Flexibel zwischen den Gängen", "Keine Technik nötig"],
      icon: <Sparkles className="w-8 h-8 text-blue-300" />,
      gradient: "from-blue-500/20 to-purple-500/20"
    },
    {
      title: "Bühnenshow",
      desc: "Humorvoll, modern und gemeinschaftsstiftend – ideal für Kickoffs, Galas & Weihnachtsfeiern.",
      points: ["20–40 Minuten", "Publikumsbeteiligung", "Skalierbar für kleine & große Bühnen"],
      icon: <Zap className="w-8 h-8 text-yellow-300" />,
      gradient: "from-yellow-500/20 to-orange-500/20"
    },
    {
      title: "Taschendieb-Act",
      desc: "Respektvoll, sicher und spektakulär: scheinbarer Diebstahl von Uhr, Krawatte oder Handy – mit Lerneffekt.",
      points: ["Publikum lacht & lernt", "Immer mit Einverständnis", "Sofortige Wow-Momente"],
      icon: <Award className="w-8 h-8 text-green-300" />,
      gradient: "from-green-500/20 to-emerald-500/20"
    },
    {
      title: "Signature: Gabelbiegen",
      desc: "Metall wird zur Erinnerung – bleibende Souvenirs für Ihre Gäste.",
      points: ["Starkes visuelles Finale", "Mitnahme-Souvenir", "Perfekt für Fotos"],
      icon: <Heart className="w-8 h-8 text-pink-300" />,
      gradient: "from-pink-500/20 to-rose-500/20"
    },
  ]

  const testimonials = [
    {
      name: "Corporate Event",
      quote: "Perfekter Eisbrecher, professionell und absolut verblüffend – unsere Gäste sprechen heute noch davon.",
      avatar: "🏢"
    },
    {
      name: "Hochzeit",
      quote: "Familienfreundlich, charmant und mega eindrucksvoll. Die Fotos vom Gabelbiegen lieben wir!",
      avatar: "💒"
    },
    {
      name: "Weihnachtsfeier",
      quote: "Zero Cringe, 100% Wow. Super zuverlässig, großartige Kommunikation und pünktlich auf die Minute.",
      avatar: "🎄"
    },
  ]

  const faqs = [
    {
      q: "Welche Programmlängen sind möglich?",
      a: "Close-up 60–90 Minuten (walking/tischweise) je nach Gästezahl; Bühne 20–40 Minuten – wir planen es passend zur Agenda.",
    },
    { q: "Welche Technik wird benötigt?", a: "Close-up: keine. Bühne: Licht/PA nach Raumgröße – kann organisiert werden." },
    { q: "Wo trittst du auf?", a: "NRW, deutschlandweit und international – Reise >1000 km möglich." },
    { q: "Ist der Taschendieb-Act sicher?", a: "Ja – immer respektvoll, nur mit Einverständnis, haftpflichtversichert." },
  ]

  return (
    <div className="min-h-screen">
      <div className="site-bg" aria-hidden="true" />

      {/* NAVBAR */}
      <nav className="onepage-nav">
        <div className="onepage-nav-row">
          <motion.button 
            onClick={() => scrollToSection("home")} 
            className="onepage-brand"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            style={{ background: 'none', border: 'none', cursor: 'pointer' }}
          >
            <motion.div 
              className="onepage-brand-logo"
              whileHover={{ rotate: 360 }}
              transition={{ duration: 0.8, ease: "easeInOut" }}
            >
              <Image src="/icon.png" alt="Michael Peskov Magic Logo" width={20} height={20} />
            </motion.div>
            <span>Michael Peskov Magic</span>
          </motion.button>

          <div className="onepage-nav-links">
            {[
              ["Proof", "proof"],
              ["Showreel", "showreel"],
              ["Acts", "acts"],
              ["Use Cases", "usecases"],
              ["Testimonials", "testimonials"],
              ["About", "about"],
              ["FAQ", "faq"],
            ].map(([label, id]) => (
              <motion.button
                key={id}
                onClick={() => {
                  const element = document.getElementById(id)
                  if (element) {
                    const y = element.getBoundingClientRect().top + window.scrollY - 88
                    window.scrollTo({ top: y, behavior: "smooth" })
                  }
                }}
                className={`onepage-link ${active === id ? "active" : ""}`}
                whileHover={{ y: -2 }}
                transition={{ duration: 0.2 }}
                style={{ 
                  background: 'none', 
                  border: 'none', 
                  cursor: 'pointer',
                  color: 'inherit',
                  font: 'inherit',
                  padding: '8px 16px'
                }}
              >
                {label}
              </motion.button>
            ))}
          </div>

          <div className="onepage-nav-cta">
            <MagneticButton>
              <button
                onClick={() => {
                  const element = document.getElementById('contact')
                  if (element) {
                    const y = element.getBoundingClientRect().top + window.scrollY - 88
                    window.scrollTo({ top: y, behavior: "smooth" })
                  }
                }}
                className="onepage-btn onepage-btn--primary"
                style={{ 
                  background: 'none', 
                  border: 'none', 
                  cursor: 'pointer',
                  color: 'inherit',
                  font: 'inherit'
                }}
              >
                Verfügbarkeit prüfen
              </button>
            </MagneticButton>
          </div>
        </div>
      </nav>

      {/* HERO */}
      <section id="home" className="onepage-hero">
        <ParallaxElement speed={0.3} className="spotlight" />
        <div className="onepage-container">
          <div className="onepage-hero-grid">
            <div>
              <motion.div
                initial={{opacity:0,y:50}} 
                animate={{opacity:1,y:0}} 
                transition={{duration:0.8, ease: "easeOut"}}
              >
                <motion.span 
                  className="onepage-eyebrow"
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ delay: 0.2, duration: 0.5 }}
                >
                  Premium • Modern • Live
                </motion.span>
                <motion.h1 
                  className="onepage-h1"
                  initial={{ opacity: 0, y: 30 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.4, duration: 0.8 }}
                >
                  Moderne Magie, die Menschen verbindet.
                </motion.h1>
                <motion.p 
                  className="onepage-lead"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.6, duration: 0.6 }}
                >
                  Bekannt aus {proof.logos.join(" • ")}. <CountUp end={proof.rating} />★ bewertet, <CountUp end={proof.bookings} />+ erfolgreiche Buchungen. Europaweit im Einsatz.
                </motion.p>
                <motion.div 
                  className="onepage-flex onepage-flex-wrap onepage-gap-3 onepage-mt-6"
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: 0.8, duration: 0.6 }}
                >
                  <MagneticButton>
                    <button 
                      onClick={() => scrollToSection("contact")}
                      className="onepage-btn onepage-btn--primary"
                      style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', font: 'inherit' }}
                    >
                      Verfügbarkeit prüfen
                    </button>
                  </MagneticButton>
                  <MagneticButton>
                    <button 
                      onClick={() => scrollToSection("showreel")}
                      className="onepage-btn onepage-btn--ghost"
                      style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', font: 'inherit', display: 'flex', alignItems: 'center', gap: '8px' }}
                    >
                      <Play className="w-4 h-4"/> Showreel ansehen
                    </button>
                  </MagneticButton>
                </motion.div>
                <StaggerContainer className="onepage-flex onepage-flex-wrap onepage-gap-2 onepage-mt-6" staggerDelay={0.1}>
                  {proof.clients.map((c) => (
                    <StaggerItem key={c}>
                      <motion.span 
                        className="onepage-badge"
                        whileHover={{ scale: 1.1, y: -2 }}
                        transition={{ duration: 0.2 }}
                      >
                        <Building2 className="w-3 h-3"/> {c}
                      </motion.span>
                    </StaggerItem>
                  ))}
                </StaggerContainer>
              </motion.div>
            </div>

            <SlideInRight delay={0.4}>
              <HoverCard className="onepage-card">
                <VideoPlayer
                  posterImage="/michael-peskov-magier-taschendieb-453624.jpeg"
                  videoUrl="https://www.youtube-nocookie.com/embed/BGAXMeIzu3Q?autoplay=1"
                  title="SAT.1 Showreel"
                />
                <motion.div 
                  className="onepage-flex onepage-gap-2 onepage-mt-4 onepage-text"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 1, duration: 0.5 }}
                >
                  <Star className="w-4 h-4 text-yellow-300"/>
                  <span><CountUp end={proof.rating} />.0 / 5 · <CountUp end={proof.reviews} />+ Bewertungen · <CountUp end={proof.bookings} />+ Buchungen</span>
                </motion.div>
                <motion.div 
                  className="onepage-flex onepage-gap-2 onepage-mt-4 onepage-text"
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 1.2, duration: 0.5 }}
                >
                  <ShieldCheck className="w-4 h-4"/> <span>Haftpflicht · Vertrag · Pünktlich</span>
                </motion.div>
              </HoverCard>
            </SlideInRight>
          </div>
        </div>
      </section>

      {/* PROOF */}
      <section id="proof" className="onepage-section">
        <div className="onepage-container">
          <FadeUp>
            <span className="onepage-eyebrow">As seen on & trusted by</span>
            <h2 className="onepage-h2">TV & Marken, die Vertrauen schaffen</h2>
          </FadeUp>
          <StaggerContainer className="onepage-grid onepage-grid--3" staggerDelay={0.1}>
            {proof.logos.map((l) => (
              <StaggerItem key={l}>
                <HoverCard className="onepage-card onepage-text-center">
                  <div className="onepage-h3">{l}</div>
                </HoverCard>
              </StaggerItem>
            ))}
            {proof.clients.map((l) => (
              <StaggerItem key={l}>
                <HoverCard className="onepage-card onepage-text-center">
                  <div className="onepage-h3">{l}</div>
                </HoverCard>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* SHOWREEL */}
      <section id="showreel" className="onepage-section">
        <div className="onepage-container">
          <FadeUp>
            <span className="onepage-eyebrow">Erleben</span>
            <h2 className="onepage-h2">Showreel & Momente des Staunens</h2>
          </FadeUp>
          <ScaleIn delay={0.2}>
            <HoverCard className="onepage-card">
              <VideoPlayer
                posterImage="/michael-peskov-magier-taschendieb-453624.jpeg"
                videoUrl="https://www.youtube-nocookie.com/embed/BGAXMeIzu3Q?autoplay=1"
                title="SAT.1 Showreel"
              />
            </HoverCard>
          </ScaleIn>
          <StaggerContainer className="onepage-grid onepage-grid--3 onepage-mt-4" staggerDelay={0.1}>
            <StaggerItem>
              <motion.div 
                className="onepage-flex onepage-gap-3 onepage-text"
                whileHover={{ x: 5 }}
                transition={{ duration: 0.2 }}
              >
                <BadgeCheck className="w-5 h-5 text-blue-300"/> Eisbrecher für Gespräche
              </motion.div>
            </StaggerItem>
            <StaggerItem>
              <motion.div 
                className="onepage-flex onepage-gap-3 onepage-text"
                whileHover={{ x: 5 }}
                transition={{ duration: 0.2 }}
              >
                <BadgeCheck className="w-5 h-5 text-blue-300"/> Null Fremdscham, 100% Wow
              </motion.div>
            </StaggerItem>
            <StaggerItem>
              <motion.div 
                className="onepage-flex onepage-gap-3 onepage-text"
                whileHover={{ x: 5 }}
                transition={{ duration: 0.2 }}
              >
                <BadgeCheck className="w-5 h-5 text-blue-300"/> Planbar & professionell
              </motion.div>
            </StaggerItem>
          </StaggerContainer>
        </div>
      </section>

      {/* ACTS / PACKAGES */}
      <section id="acts" className="onepage-section">
        <div className="onepage-container">
          <FadeUp>
            <span className="onepage-eyebrow">Programme</span>
            <h2 className="onepage-h2">Acts & Pakete</h2>
          </FadeUp>
          <StaggerContainer className="onepage-grid onepage-grid--4" staggerDelay={0.15}>
            {acts.map((a, index) => (
              <StaggerItem key={a.title}>
                <HoverCard className={`onepage-card onepage-card-hover bg-gradient-to-br ${a.gradient}`}>
                  <motion.div
                    initial={{ scale: 0 }}
                    animate={{ scale: 1 }}
                    transition={{ delay: 0.5 + index * 0.1, duration: 0.5, type: "spring" }}
                    className="onepage-mb-4"
                  >
                    {a.icon}
                  </motion.div>
                  <h3 className="onepage-h3">{a.title}</h3>
                  <p className="onepage-text onepage-mb-4">{a.desc}</p>
                  <ul className="onepage-mb-6" style={{listStyle: 'none', padding: 0}}>
                    {a.points.map((p, i) => (
                      <motion.li 
                        key={p} 
                        className="onepage-flex onepage-gap-2 onepage-text" 
                        style={{marginBottom: '8px'}}
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: 0.8 + index * 0.1 + i * 0.1 }}
                      >
                        <Check className="w-4 h-4 text-blue-300 flex-shrink-0" style={{marginTop: '2px'}}/> {p}
                      </motion.li>
                    ))}
                  </ul>
                  <MagneticButton 
                    className="onepage-btn onepage-btn--ghost"
                    style={{width: '100%', justifyContent: 'center'}}
                  >
                    <button 
                      onClick={() => scrollToSection("contact")}
                      style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', font: 'inherit' }}
                    >
                      Termin anfragen
                    </button>
                  </MagneticButton>
                </HoverCard>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* USE CASES */}
      <section id="usecases" className="onepage-section">
        <div className="onepage-container">
          <FadeUp>
            <span className="onepage-eyebrow">Für welche Anlässe?</span>
            <h2 className="onepage-h2">Corporate · Hochzeit · Private Feiern</h2>
          </FadeUp>
          <StaggerContainer className="onepage-grid onepage-grid--3" staggerDelay={0.2}>
            {[{
              title: "Corporate Events",
              points: ["Kickoff, Gala, Kunden-Dinner", "Bühne + Close-up kombinierbar", "Seriös, vertraglich & pünktlich"],
              emoji: "🏢"
            }, {
              title: "Hochzeiten",
              points: ["Sektempfang & zwischen den Gängen", "Foto-Momente für das Paar", "Familienfreundlich"],
              emoji: "💒"
            }, {
              title: "Private Feiern",
              points: ["30./40./50. Geburtstag", "Packages & WhatsApp-Kontakt", "Schnelle Antwort <24h"],
              emoji: "🎉"
            }].map((u) => (
              <StaggerItem key={u.title}>
                <HoverCard className="onepage-card">
                  <motion.div 
                    className="text-4xl onepage-mb-4"
                    animate={{ rotate: [0, 10, -10, 0] }}
                    transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
                  >
                    {u.emoji}
                  </motion.div>
                  <h3 className="onepage-h3">{u.title}</h3>
                  <ul style={{listStyle: 'none', padding: 0}}>
                    {u.points.map((p) => (
                      <motion.li 
                        key={p} 
                        className="onepage-flex onepage-gap-2 onepage-text" 
                        style={{marginBottom: '8px'}}
                        whileHover={{ x: 5 }}
                        transition={{ duration: 0.2 }}
                      >
                        <Check className="w-4 h-4 text-blue-300 flex-shrink-0" style={{marginTop: '2px'}}/> {p}
                      </motion.li>
                    ))}
                  </ul>
                </HoverCard>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section id="testimonials" className="onepage-section">
        <div className="onepage-container">
          <FadeUp>
            <span className="onepage-eyebrow">Bewertungen</span>
            <h2 className="onepage-h2">Vertrauen, das man lesen kann</h2>
          </FadeUp>
          <StaggerContainer className="onepage-grid onepage-grid--3" staggerDelay={0.2}>
            {testimonials.map((t, i) => (
              <StaggerItem key={i}>
                <HoverCard className="onepage-testimonial">
                  <div className="quote">"</div>
                  <motion.div 
                    className="text-4xl onepage-mb-4"
                    animate={{ scale: [1, 1.1, 1] }}
                    transition={{ duration: 2, repeat: Infinity, delay: i * 0.5 }}
                  >
                    {t.avatar}
                  </motion.div>
                  <div className="onepage-flex onepage-gap-1 onepage-mb-4">
                    {Array.from({length:5}).map((_,j)=>(
                      <motion.div
                        key={j}
                        initial={{ opacity: 0, scale: 0 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ delay: 0.5 + j * 0.1 }}
                      >
                        <Star className="w-4 h-4 onepage-stars" fill="currentColor"/>
                      </motion.div>
                    ))}
                  </div>
                  <p className="onepage-text" style={{fontStyle: 'italic'}}>"{t.quote}"</p>
                  <div className="onepage-mt-4 onepage-text" style={{fontWeight: '600'}}>— {t.name}</div>
                </HoverCard>
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* ABOUT */}
      <section id="about" className="onepage-section">
        <div className="onepage-container">
          <FadeUp>
            <span className="onepage-eyebrow">Über Michael</span>
            <h2 className="onepage-h2">Jung, modern, TV-bekannt</h2>
          </FadeUp>
          <div className="onepage-grid onepage-grid--2">
            <SlideInLeft delay={0.2}>
              <p className="onepage-text" style={{lineHeight: '1.7'}}>
                Michael Peskov gehört zu den jüngsten professionellen Magiern Deutschlands. Seine Auftritte verbinden modernes
                Entertainment mit interaktiver Zauberei und einem einzigartigen Taschendieb-Act – immer respektvoll und sicher.
                Er ist europaweit im Einsatz ({proof.travel}) und wurde u. a. bei {proof.logos.join(", ")} gezeigt.
              </p>
            </SlideInLeft>
            <SlideInRight delay={0.4}>
              <HoverCard className="onepage-card">
                <ul style={{listStyle: 'none', padding: 0}}>
                  {[
                    { icon: <ShieldCheck className="w-4 h-4 flex-shrink-0" />, text: "Vertrag & Haftpflicht inklusive" },
                    { icon: <Clock4 className="w-4 h-4 flex-shrink-0" />, text: "Pünktlich, sauberer Ablauf" },
                    { icon: <Users2 className="w-4 h-4 flex-shrink-0" />, text: "Kleine & große Events" }
                  ].map((item, i) => (
                    <motion.li 
                      key={i}
                      className="onepage-flex onepage-gap-2 onepage-text" 
                      style={{marginBottom: '12px'}}
                      initial={{ opacity: 0, x: -20 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 0.6 + i * 0.2 }}
                      whileHover={{ x: 5, color: 'var(--primary-400)' }}
                    >
                      <motion.div style={{marginTop: '2px'}} whileHover={{ scale: 1.2 }}>
                        {item.icon}
                      </motion.div>
                      {item.text}
                    </motion.li>
                  ))}
                </ul>
              </HoverCard>
            </SlideInRight>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="onepage-section">
        <div className="onepage-container">
          <FadeUp>
            <span className="onepage-eyebrow">FAQ</span>
            <h2 className="onepage-h2">Häufige Fragen</h2>
          </FadeUp>
          <FadeUp delay={0.2}>
            <AnimatedFAQ faqs={faqs} />
          </FadeUp>
        </div>
      </section>

      {/* CONTACT / CTA */}
      <section id="contact" className="onepage-section">
        <div className="onepage-container">
          <FadeUp>
            <span className="onepage-eyebrow">Jetzt anfragen</span>
            <h2 className="onepage-h2">Verfügbarkeit & Angebot</h2>
          </FadeUp>
          <ScaleIn delay={0.3}>
            <HoverCard className="onepage-card">
              <form className="onepage-grid onepage-grid--2" onSubmit={(e)=>{e.preventDefault(); alert("Danke! Wir melden uns i. d. R. innerhalb von 24 Stunden.");}}>
                <StaggerContainer className="contents" staggerDelay={0.1}>
                  <StaggerItem className="onepage-form-group">
                    <label className="onepage-label">Datum</label>
                    <motion.input 
                      required 
                      type="date" 
                      className="onepage-input"
                      whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
                    />
                  </StaggerItem>
                  <StaggerItem className="onepage-form-group">
                    <label className="onepage-label">Ort</label>
                    <motion.input 
                      required 
                      placeholder="Stadt / Location" 
                      className="onepage-input"
                      whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
                    />
                  </StaggerItem>
                  <StaggerItem className="onepage-form-group">
                    <label className="onepage-label">Anlass</label>
                    <motion.select 
                      className="onepage-select"
                      whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
                    >
                      <option>Corporate Event</option>
                      <option>Hochzeit</option>
                      <option>Private Feier</option>
                    </motion.select>
                  </StaggerItem>
                  <StaggerItem className="onepage-form-group">
                    <label className="onepage-label">Gästezahl</label>
                    <motion.input 
                      type="number" 
                      min={1} 
                      placeholder="z. B. 120" 
                      className="onepage-input"
                      whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
                    />
                  </StaggerItem>
                  <StaggerItem className="onepage-form-group" style={{gridColumn: '1 / -1'}}>
                    <label className="onepage-label">Programm</label>
                    <div className="onepage-grid onepage-grid--2">
                      {acts.map((a)=> (
                        <motion.label 
                          key={a.title} 
                          className="onepage-flex onepage-gap-2" 
                          style={{padding: '12px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '12px', cursor: 'pointer'}}
                          whileHover={{ scale: 1.02, backgroundColor: 'rgba(255,255,255,0.08)' }}
                          whileTap={{ scale: 0.98 }}
                        >
                          <input type="checkbox" className="onepage-checkbox"/> <span className="onepage-text">{a.title}</span>
                        </motion.label>
                      ))}
                    </div>
                  </StaggerItem>
                  <StaggerItem className="onepage-form-group">
                    <label className="onepage-label">Budget (Richtwert)</label>
                    <motion.select 
                      className="onepage-select"
                      whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
                    >
                      <option>auf Anfrage</option>
                      <option>bis 1.000 €</option>
                      <option>1.000 – 2.000 €</option>
                      <option>2.000 – 4.000 €</option>
                      <option>4.000 € +</option>
                    </motion.select>
                  </StaggerItem>
                  <StaggerItem className="onepage-form-group">
                    <label className="onepage-label">Firma (optional)</label>
                    <motion.input 
                      placeholder="Firmenname" 
                      className="onepage-input"
                      whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
                    />
                  </StaggerItem>
                  <StaggerItem className="onepage-form-group">
                    <label className="onepage-label">E-Mail</label>
                    <motion.input 
                      required 
                      type="email" 
                      placeholder="name@firma.de" 
                      className="onepage-input"
                      whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
                    />
                  </StaggerItem>
                  <StaggerItem className="onepage-form-group">
                    <label className="onepage-label">Telefon / WhatsApp</label>
                    <motion.input 
                      placeholder="+49 …" 
                      className="onepage-input"
                      whileFocus={{ scale: 1.02, borderColor: 'var(--primary-400)' }}
                    />
                  </StaggerItem>
                  <StaggerItem style={{gridColumn: '1 / -1'}}>
                    <motion.label 
                      className="onepage-flex onepage-gap-2 onepage-text"
                      whileHover={{ x: 5 }}
                    >
                      <input type="checkbox" className="onepage-checkbox"/> Rückruf per WhatsApp gewünscht
                    </motion.label>
                  </StaggerItem>
                  <StaggerItem className="onepage-flex onepage-flex-wrap onepage-gap-3" style={{gridColumn: '1 / -1'}}>
                    <MagneticButton>
                      <button type="submit" className="onepage-btn onepage-btn--primary onepage-flex onepage-gap-2" style={{border: 'none', background: 'none', color: 'inherit'}}>
                        <Calendar className="w-4 h-4"/> Anfrage senden
                      </button>
                    </MagneticButton>
                    <MagneticButton>
                      <a href="mailto:booking@michaelpeskov.de" className="onepage-btn onepage-btn--ghost onepage-flex onepage-gap-2">
                        <Mail className="w-4 h-4"/> booking@michaelpeskov.de
                      </a>
                    </MagneticButton>
                    <MagneticButton>
                      <a href="tel:+491234567890" className="onepage-btn onepage-btn--ghost onepage-flex onepage-gap-2">
                        <Phone className="w-4 h-4"/> +49 123 456 7890
                      </a>
                    </MagneticButton>
                  </StaggerItem>
                </StaggerContainer>
              </form>
            </HoverCard>
          </ScaleIn>
          <FadeUp delay={0.5}>
            <p className="onepage-text" style={{fontSize: '0.75rem', marginTop: '12px', opacity: 0.7}}>
              Antwort in der Regel innerhalb von 24 Stunden. Ihre Daten werden nur zur Bearbeitung der Anfrage verwendet.
            </p>
          </FadeUp>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="onepage-footer">
        <div className="onepage-container">
          <FadeUp>
            <div className="onepage-footer-content">
              <motion.div 
                className="onepage-flex onepage-gap-2"
                whileHover={{ scale: 1.05 }}
              >
                <motion.div
                  whileHover={{ rotate: 360 }}
                  transition={{ duration: 0.8, ease: "easeInOut" }}
                >
                  <Image src="/icon.png" alt="Michael Peskov Magic Logo" width={16} height={16} />
                </motion.div>
                <span>Michael Peskov Magic</span>
              </motion.div>
              <div className="onepage-footer-text">© {new Date().getFullYear()} – All rights reserved.</div>
            </div>
          </FadeUp>
        </div>
      </footer>

      {/* JSON-LD */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Organization",
            name: "Michael Peskov Magic",
            url: "https://michaelpeskov.de",
            sameAs: ["https://instagram.com/", "https://www.youtube.com/"],
            aggregateRating: {
              "@type": "AggregateRating",
              ratingValue: proof.rating,
              reviewCount: proof.reviews,
            },
            areaServed: "Europe",
          }),
        }}
      />
    </div>
  )
}