'use client'

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

interface ClosingProps {
  onEnter?: () => void
}

export default function Closing({ onEnter }: ClosingProps) {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
        }
      },
      { threshold: 0.3 }
    )

    if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

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

  const handleEnter = () => {
    if (onEnter) {
      onEnter()
    } else {
      const forgeSection = document.getElementById('forge')
      if (forgeSection) {
        forgeSection.scrollIntoView({ behavior: 'smooth' })
      }
    }
  }

  return (
    <section className={styles.closing} ref={sectionRef}>
      <div className={styles.grain} />
      <div className={styles.oilShimmer} />

      <div className={`${styles.container} ${isVisible ? styles.visible : ''}`}>
        <p className={styles.line}>No permission required.</p>
        <p className={styles.emphasis}>You already paid the cost.</p>

        <button onClick={handleEnter} className={styles.enterBtn}>
          REVEAL YOUR PRIME
        </button>
      </div>

      <footer className={styles.footer}>
        <p className={styles.mark}>PRIME</p>
      </footer>
    </section>
  )
}