import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'

const GOLD = '#CD9E53'
const NAVY = '#032340'
const EASE = [0.22, 1, 0.36, 1] as const

export default function SpreadFeatures() {
  const [isMobile, setIsMobile] = useState(false)

  useEffect(() => {
    const mq = window.matchMedia('(max-width: 767px)')
    const update = () => setIsMobile(mq.matches)
    update()
    mq.addEventListener('change', update)
    return () => mq.removeEventListener('change', update)
  }, [])

  return (
    <div style={{ height: '100vh', position: 'relative', marginTop: isMobile ? -60 : -68 }}>
      {/* navy fallback — visible until video blob is ready */}
      <div style={{ position: 'sticky', top: 0, height: '100vh', overflow: 'hidden', background: NAVY }}>

        {/* full-bleed video — native streaming via HTTP range requests */}
        <video
          src="/hero-bg.mp4"
          autoPlay muted loop playsInline preload="auto"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center',
            display: 'block', zIndex: 0,
          }}
        />

        {/* full-width gradient: solid navy on right → transparent on left */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
          background: 'linear-gradient(to left, rgba(3,35,64,0.96) 0%, rgba(3,35,64,0.85) 25%, rgba(3,35,64,0.4) 55%, transparent 80%)',
        }} />

        {/* title — far right */}
        <div style={{
          position: 'absolute',
          top: 0, right: 0,
          width: isMobile ? '100%' : '48%',
          height: '100%',
          display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
          direction: 'rtl',
          padding: isMobile ? '0 24px' : '0 5vw 0 0',
          zIndex: 2,
        }}>
          <motion.h2
            initial={{ y: 24, opacity: 0, filter: 'blur(10px)' }}
            animate={{ y: 0, opacity: 1, filter: 'blur(0px)' }}
            transition={{ duration: 0.6, ease: EASE }}
            style={{
              direction: 'rtl', textAlign: 'right',
              fontSize: 'clamp(28px, 4vw, 62px)', fontWeight: 900,
              color: GOLD, lineHeight: 1.2, margin: 0,
            }}
          >
            <span style={{ display: 'block' }}>بینشی نو برای</span>
            <span style={{ display: 'block' }}>توسعه صنعتی</span>
          </motion.h2>
        </div>
      </div>
    </div>
  )
}
