'use client'

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

export default function Hero() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    const resizeCanvas = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }
    resizeCanvas()
    window.addEventListener('resize', resizeCanvas)

    // Rain drops
    const drops: { x: number; y: number; length: number; speed: number; opacity: number }[] = []
    const dropCount = 90

    for (let i = 0; i < dropCount; i++) {
      drops.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        length: Math.random() * 30 + 10,
        speed: Math.random() * 2 + 0.6,
        opacity: Math.random() * 0.08 + 0.03
      })
    }

    let animationId = 0
    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

      drops.forEach(drop => {
        ctx.beginPath()
        ctx.moveTo(drop.x, drop.y)
        ctx.lineTo(drop.x + 0.5, drop.y + drop.length)
        ctx.strokeStyle = `rgba(180, 190, 200, ${drop.opacity})`
        ctx.lineWidth = 1
        ctx.stroke()

        drop.y += drop.speed
        drop.x += 0.2 // slight angle

        if (drop.y > canvas.height) {
          drop.y = -drop.length
          drop.x = Math.random() * canvas.width
        }
      })

      animationId = requestAnimationFrame(animate)
    }

    animationId = requestAnimationFrame(animate)

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

  return (
    <section className={styles.hero}>
      <canvas ref={canvasRef} className={styles.rain} />

      <div className={styles.background}>
        <div className={styles.orb1}></div>
        <div className={styles.orb2}></div>
        <div className={styles.orb3}></div>
      </div>
      <div className={styles.vignette}></div>

      <div className={styles.content}>
        <h1 className={styles.title}>
          <span className="text-gradient">PRIME</span>
        </h1>
        <div className={styles.tagline}>NOT STRONGER. DIFFERENT.</div>
        <p className={styles.subtitle}>
          You&apos;re not here to be noticed.<br />
          You&apos;re here to be undeniable.
        </p>
        <div className={styles.micro}>
          The edge is earned.
        </div>
        <div className={styles.actions}>
          <a href="#forge" className="btn btn-primary">
            Reveal PRIME
          </a>
          <a href="#about" className="btn btn-secondary">
            The Standard
          </a>
        </div>
      </div>

      <div className={styles.scrollIndicator}>
        <div className={styles.mouse}>
          <div className={styles.wheel}></div>
        </div>
        <span>Scroll</span>
      </div>
    </section>
  )
}