import { useState, useRef, useEffect } from 'react'

const TESTIMONIALS = [
  { name: 'Manu Arora', quote: 'Fantastic AI, highly recommend it.', position: 'top-20 -left-10', rotate: '-20deg', side: 'left' },
  { name: 'Tyler Durden', quote: 'AI revolutionized my business model.', position: 'top-1/2 -left-10 -translate-y-1/2', rotate: '-10deg', side: 'left' },
  { name: 'Alice Johnson', quote: 'Transformed the way I work!', position: 'top-20 -right-10', rotate: '20deg', side: 'right' },
  { name: 'Bob Smith', quote: 'Absolutely revolutionary, a game-changer.', position: 'bottom-20 -left-10', rotate: '-10deg', side: 'left' },
  { name: 'Cathy Lee', quote: 'Improved my work efficiency and daily life.', position: 'bottom-1/2 -right-10 -translate-y-1/2', rotate: '10deg', side: 'right' },
  { name: 'David Wright', quote: "It's like having a superpower!", position: 'bottom-20 -right-10', rotate: '20deg', side: 'right' },
]

// Scroll-Fortschritt 0..1: wie weit die Hero-Section nach oben weggescrollt ist → Karten bewegen sich im Bogen nach unten
function useScrollBow(heroRef) {
  const [progress, setProgress] = useState(0)
  useEffect(() => {
    const hero = heroRef?.current
    if (!hero) return
    const onScroll = () => {
      const rect = hero.getBoundingClientRect()
      const h = rect.height
      if (h <= 0) return
      const p = Math.max(0, Math.min(1, -rect.top / h))
      setProgress(p)
    }
    onScroll()
    window.addEventListener('scroll', onScroll, { passive: true })
    return () => window.removeEventListener('scroll', onScroll)
  }, [heroRef])
  return progress
}

const EMAIL_LOGO = '/logo.png'

function TestimonialCard({ name, quote, position, rotate, side, scrollProgress }) {
  const dropY = scrollProgress * 80
  const flyOutX = scrollProgress * 600
  const moveX = side === 'left' ? -flyOutX : flyOutX
  const transform = `translate(${moveX}px, ${dropY}px) rotate(${rotate})`
  const opacity = Math.max(0, 1 - scrollProgress * 1.2)
  const visibility = opacity <= 0 ? 'hidden' : 'visible'
  return (
    <div
      className={`hero-edge-card absolute z-20 flex items-center gap-2 rounded-md bg-white p-4 shadow-lg dark:bg-neutral-800 ${position} hidden md:flex transition-all duration-200 ease-out`}
      style={{ transform, opacity, visibility }}
    >
      <img alt="E-Mail" width={50} height={50} className="size-12 shrink-0 object-contain" src={EMAIL_LOGO} />
      <div className="max-w-[180px]">
        <h3 className="text-xs text-neutral-800 md:text-base dark:text-neutral-200">{name}</h3>
        <p className="text-[10px] text-neutral-600 md:text-sm dark:text-neutral-400">{quote}</p>
      </div>
    </div>
  )
}

function HeroSection() {
  const heroRef = useRef(null)
  const scrollProgress = useScrollBow(heroRef)

  return (
    <div
      ref={heroRef}
      className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-50 px-4 md:px-8 dark:bg-neutral-900 animate-gradient-bg"
    >
      {/* Rand: Testimonial-Karten – bewegen sich beim Scrollen in einem Bogen nach unten */}
      {TESTIMONIALS.map((t) => (
        <TestimonialCard key={t.name} {...t} scrollProgress={scrollProgress} />
      ))}

      {/* Dezentes animiertes Grid im Hintergrund (nur auf md+) */}
      <div
        className="absolute inset-0 z-10 hidden md:block opacity-40 animate-grid-pulse bg-[length:24px_24px] bg-[linear-gradient(to_right,#8881_1px,transparent_1px),linear-gradient(to_bottom,#8881_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#fff1_1px,transparent_1px),linear-gradient(to_bottom,#fff1_1px,transparent_1px)]"
        aria-hidden
      />
      {/* Overlay: auf Mobile sichtbar, ab md ausgeblendet */}
      <div className="absolute inset-0 z-30 h-full w-full bg-white opacity-80 md:opacity-0 dark:bg-neutral-900 pointer-events-none" aria-hidden />
    </div>
  )
}

export default HeroSection
