import { useEffect, useRef } from 'react'
import { useLang } from '@/context/LangContext'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const T = {
  fa: {
    tag: 'اندیشکده‌ فولاد آینده',
    h1: 'جایی که آینده به تصمیم تبدیل می‌شود',
    sub: 'تحلیل روندها، فناوری‌ها و سناریوهای آینده صنعت فولاد ایران و جهان',
  },
  en: {
    tag: 'Steel Policy Institute',
    h1: 'Where the Future Becomes Decision',
    sub: 'Analyzing trends, technologies and future scenarios of the global steel industry',
  },
}

export default function HeroSection() {
  const { lang } = useLang()
  const t = T[lang]

  const sectionRef = useRef<HTMLElement>(null)
  const videoRef   = useRef<HTMLVideoElement>(null)
  const overlayRef = useRef<HTMLDivElement>(null)
  const textRef    = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const el      = textRef.current
    const video   = videoRef.current
    const overlay = overlayRef.current
    if (!el || !video || !overlay) return

    video.playbackRate = 1.5

    // entrance
    const tl = gsap.timeline()
    tl.fromTo(el, { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 1, ease: 'power3.out' })

    // scroll parallax — scrub keeps it reversible
    ScrollTrigger.create({
      trigger: sectionRef.current,
      start: 'top top',
      end: 'bottom top',
      scrub: 1,
      onUpdate: (self) => {
        const p = self.progress
        gsap.set(video,   { scale: 1 + p * 0.12 })
        gsap.set(overlay, { opacity: 0.15 + p * 0.55 })
        gsap.set(el,      { y: p * -60, opacity: 1 - p * 1.6 })
      },
    })

    return () => {
      tl.kill()
      ScrollTrigger.getAll().forEach(t => t.kill())
    }
  }, [])

  return (
    <section
      ref={sectionRef}
      style={{
        position:    'relative',
        background:  'var(--ink)',
        borderBottom:'3px solid var(--red)',
        overflow:    'hidden',
        height:      '100vh',
        display:     'flex',
        alignItems:  'center',
        justifyContent: 'center',
      }}
    >
      {/* Background video */}
      <video
        ref={videoRef}
        aria-hidden="true"
        autoPlay muted loop playsInline disablePictureInPicture
        controlsList="nofullscreen nodownload noremoteplayback"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0, transformOrigin: 'center center' }}
        src="/hero-bg.mp4#t=2"
      />
      {/* Dark overlay */}
      <div ref={overlayRef} aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'rgba(7,29,73,0.60)', zIndex: 1 }} />
      {/* Vignette */}
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 90% 80% at 50% 50%, transparent 40%, rgba(7,29,73,0.75) 100%)', zIndex: 2 }} />

      {/* Content block */}
      <div
        ref={textRef}
        className="max-md:!left-4 max-md:!right-4 max-md:!max-w-full max-md:!top-1/2 max-md:text-center"
        style={{
          position:  'absolute',
          top:       '38%',
          right:     lang === 'fa' ? 48 : 'auto',
          left:      lang === 'en' ? 48 : 'auto',
          transform: 'translateY(-50%)',
          zIndex:    3,
          textAlign: lang === 'fa' ? 'right' : 'left',
          direction: lang === 'fa' ? 'rtl' : 'ltr',
          maxWidth:  520,
          padding:   '0 24px',
        }}
      >
        {/* Headline */}
        <h1
          className="max-md:!whitespace-normal max-md:!text-2xl"
          style={{
            fontSize:      'clamp(22px, 2.2vw, 34px)',
            fontWeight:    900,
            lineHeight:    1.2,
            letterSpacing: '-0.5px',
            color:         'var(--paper)',
            marginBottom:  20,
            whiteSpace:    'nowrap',
          }}
        >
          {t.h1}
        </h1>

        {/* Subtitle */}
        <p
          className="max-md:!border-0 max-md:!px-0"
          style={{
            fontSize:     15,
            lineHeight:   1.8,
            color:        'rgba(255,255,255,0.65)',
            borderRight:  lang === 'fa' ? '2px solid var(--red)' : 'none',
            borderLeft:   lang === 'en' ? '2px solid var(--red)' : 'none',
            paddingRight: lang === 'fa' ? 14 : 0,
            paddingLeft:  lang === 'en' ? 14 : 0,
          }}
        >
          {t.sub}
        </p>
      </div>
    </section>
  )
}
