"use client"

import { useEffect, useState } from "react"

export function HeroSection() {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePosition({
        x: (e.clientX / window.innerWidth - 0.5) * 20,
        y: (e.clientY / window.innerHeight - 0.5) * 20,
      })
    }

    window.addEventListener("mousemove", handleMouseMove)
    return () => window.removeEventListener("mousemove", handleMouseMove)
  }, [])

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden px-6">
      {/* Animated background elements */}
      <div className="absolute inset-0 overflow-hidden opacity-20">
        <div
          className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-primary blur-[120px] animate-float"
          style={{
            transform: `translate(${mousePosition.x}px, ${mousePosition.y}px)`,
            transition: "transform 0.3s ease-out",
          }}
        />
        <div
          className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-accent blur-[120px]"
          style={{
            transform: `translate(${-mousePosition.x}px, ${-mousePosition.y}px)`,
            transition: "transform 0.3s ease-out",
            animationDelay: "2s",
          }}
        />
      </div>

      {/* Content */}
      <div className="relative z-10 max-w-5xl text-center">
        <div className="mb-6 inline-block">
          <span className="text-sm font-mono text-muted-foreground border border-border px-4 py-2 rounded-full">
            {"{ Token Engineering & Regenerative Economics }"}
          </span>
        </div>

        <p className="text-xl md:text-2xl text-muted-foreground mb-2">Hi, I'm</p>
        <h1 className="text-6xl md:text-8xl font-bold mb-6 text-balance leading-tight">Jeff Emmett</h1>

        <p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-3xl mx-auto text-balance leading-relaxed">
          Token engineering researcher exploring bonding curves, Web3 economies, and mycoeconomics. Building tools for
          regenerative communities and commons-based governance.
        </p>

        <div className="flex flex-wrap gap-4 justify-center">
          <a
            href="#work"
            className="group relative px-8 py-4 bg-primary text-primary-foreground rounded-lg font-medium overflow-hidden transition-all hover:scale-105"
          >
            <span className="relative z-10">View Research</span>
            <div className="absolute inset-0 bg-accent opacity-0 group-hover:opacity-100 transition-opacity" />
          </a>
          <a
            href="https://slides.jeffemmett.com"
            className="px-8 py-4 bg-secondary text-secondary-foreground rounded-lg font-medium transition-all hover:scale-105 hover:bg-secondary/80"
          >
            Presentations
          </a>
          <a
            href="#contact"
            className="px-8 py-4 bg-secondary text-secondary-foreground rounded-lg font-medium transition-all hover:scale-105 hover:bg-secondary/80"
          >
            Get in Touch
          </a>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-12 left-1/2 -translate-x-1/2 animate-bounce">
        <div className="h-12 w-8 rounded-full border-2 border-muted-foreground/30 flex items-start justify-center p-2">
          <div className="h-2 w-1 bg-muted-foreground/50 rounded-full animate-pulse" />
        </div>
      </div>
    </section>
  )
}