'use client'

import { useRef, useEffect, useState } from 'react'
import styles from './Experience.module.css'

const statements = [
  {
    main: 'PRIME.',
    sub: ['Not stronger.', 'Different.']
  },
  {
    main: "You're not here to be noticed.",
    sub: ["You're here to be undeniable."]
  },
  {
    main: "The past didn't soften you.",
    sub: ['It set the standard.']
  }
]

export default function Experience() {
  const containerRef = useRef<HTMLDivElement>(null)
  const videoRef = useRef<HTMLVideoElement>(null)
  const [mousePos, setMousePos] = useState({ x: 0.5, y: 0.5 })
  const [visibleStatements, setVisibleStatements] = useState<Set<number>>(new Set())
  const [showVideo, setShowVideo] = useState(false)

  // Delay video playback
  useEffect(() => {
    const timer = setTimeout(() => {
      setShowVideo(true)
      videoRef.current?.play()
    }, 3000) // 3 second delay
    return () => clearTimeout(timer)
  }, [])

  // Gentle cursor tracking for aura
  useEffect(() => {
    let targetX = 0.5
    let targetY = 0.5
    let currentX = 0.5
    let currentY = 0.5

    const handleMouseMove = (e: MouseEvent) => {
      targetX = e.clientX / window.innerWidth
      targetY = e.clientY / window.innerHeight
    }

    // Smooth interpolation - moves slowly, like heat distortion
    let animationId = 0
    const animate = () => {
      currentX += (targetX - currentX) * 0.02
      currentY += (targetY - currentY) * 0.02
      setMousePos({ x: currentX, y: currentY })
      animationId = requestAnimationFrame(animate)
    }

    window.addEventListener('mousemove', handleMouseMove)
    animationId = requestAnimationFrame(animate)

    return () => {
      window.removeEventListener('mousemove', handleMouseMove)
      cancelAnimationFrame(animationId)
    }
  }, [])

  // Scroll-triggered reveals
  useEffect(() => {
    const observers: IntersectionObserver[] = []

    const statementEls = containerRef.current?.querySelectorAll('[data-statement]')
    statementEls?.forEach((el, index) => {
      const observer = new IntersectionObserver(
        ([entry]) => {
          if (entry.isIntersecting) {
            setVisibleStatements(prev => new Set([...prev, index]))
          }
        },
        { threshold: 0.4, rootMargin: '-10% 0px -10% 0px' }
      )
      observer.observe(el)
      observers.push(observer)
    })

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

  const auraStyle = {
    '--aura-x': `${mousePos.x * 100}%`,
    '--aura-y': `${mousePos.y * 100}%`,
  } as React.CSSProperties

  return (
    <section id="experience" className={styles.experience} ref={containerRef} style={auraStyle}>
      {/* Rain video background - delayed start */}
      <video
        ref={videoRef}
        className={`${styles.rainVideo} ${showVideo ? styles.videoVisible : ''}`}
        loop
        muted
        playsInline
      >
        <source src="/rain.mp4" type="video/mp4" />
      </video>

      {/* Background aura - follows cursor gently */}
      <div className={styles.aura} />
      <div className={styles.lightning} />
      <div className={styles.grain} />

      {/* Statements - each one breathes */}
      <div className={styles.statements}>
        {statements.map((statement, index) => (
          <div
            key={index}
            className={`${styles.statement} ${visibleStatements.has(index) ? styles.visible : ''}`}
            data-statement={index}
          >
            <h2 className={styles.main}>{statement.main}</h2>
            <div className={styles.sub}>
              {statement.sub.map((line, i) => (
                <p
                  key={i}
                  style={{ transitionDelay: `${0.3 + i * 0.2}s` }}
                >
                  {line}
                </p>
              ))}
            </div>
          </div>
        ))}

      </div>
    </section>
  )
}