const { useEffect: useHeroEffect, useState: useHeroState, useRef: useHeroRef } = React;

const heroStyles = {
  section: {
    position: 'relative',
    minHeight: '100vh',
    width: '100%',
    overflow: 'hidden',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    background: '#000',
  },
  spotlight: {
    position: 'absolute',
    inset: 0,
    pointerEvents: 'none',
    transition: 'opacity 600ms ease',
    zIndex: 1,
  },
  vignette: {
    position: 'absolute',
    inset: 0,
    background:
      'radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 75%, #000 100%)',
    pointerEvents: 'none',
  },
  grid: {
    position: 'absolute',
    inset: 0,
    backgroundImage:
      'linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),' +
      'linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)',
    backgroundSize: '120px 120px',
    maskImage:
      'radial-gradient(ellipse at 50% 50%, #000 20%, transparent 70%)',
    WebkitMaskImage:
      'radial-gradient(ellipse at 50% 50%, #000 20%, transparent 70%)',
    pointerEvents: 'none',
  },
  content: {
    position: 'relative',
    zIndex: 2,
    textAlign: 'center',
    padding: '0 24px',
    width: '100%',
  },
  eyebrow: {
    fontFamily: "'Inter', sans-serif",
    fontSize: 11,
    fontWeight: 400,
    letterSpacing: '0.5em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.4)',
    marginBottom: 48,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 18,
  },
  eyebrowLine: {
    display: 'inline-block',
    width: 40,
    height: 1,
    background: 'rgba(255,255,255,0.25)',
  },
  display: {
    display: 'block',
    width: 'min(78vw, 1100px)',
    height: 'auto',
    margin: '0 auto',
    filter: 'drop-shadow(0 4px 80px rgba(255,255,255,0.05))',
  },
  meta: {
    marginTop: 64,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 28,
  },
  trackLine: {
    fontFamily: "'Inter', sans-serif",
    fontSize: 12,
    fontWeight: 400,
    letterSpacing: '0.45em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.75)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 18,
  },
  trackLineLine: {
    display: 'inline-block',
    width: 32,
    height: 1,
    background: 'rgba(255,255,255,0.3)',
  },
  cta: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 16,
    padding: '16px 28px',
    border: '1px solid rgba(255,255,255,0.5)',
    background: 'transparent',
    color: '#fff',
    cursor: 'pointer',
    fontFamily: "'Oswald', sans-serif",
    fontSize: 13,
    fontWeight: 500,
    letterSpacing: '0.4em',
    textTransform: 'uppercase',
    transition: 'all 260ms ease',
  },
  scroll: {
    position: 'absolute',
    bottom: 32,
    left: '50%',
    transform: 'translateX(-50%)',
    fontFamily: "'Inter', sans-serif",
    fontSize: 10,
    letterSpacing: '0.4em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.35)',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 14,
  },
  scrollLine: {
    width: 1,
    height: 48,
    background: 'linear-gradient(to bottom, rgba(255,255,255,0.4), transparent)',
    position: 'relative',
    overflow: 'hidden',
  },
  scrollPulse: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 16,
    background: 'linear-gradient(to bottom, #fff, transparent)',
    animation: 'scrollPulse 2.2s ease-in-out infinite',
  },
};

function Hero() {
  const [mouse, setMouse] = useHeroState({ x: 0, y: 0 });
  const [spot, setSpot] = useHeroState({ x: 0, y: 0, visible: false });
  const [ctaHover, setCtaHover] = useHeroState(false);
  const ref = useHeroRef(null);
  const targetRef = useHeroRef({ x: 0, y: 0 });
  const currentRef = useHeroRef({ x: 0, y: 0 });
  const rafRef = useHeroRef(null);
  const visibleRef = useHeroRef(false);

  useHeroEffect(() => {
    const onMove = (e) => {
      const cx = window.innerWidth / 2;
      const cy = window.innerHeight / 2;
      setMouse({
        x: (e.clientX - cx) / cx,
        y: (e.clientY - cy) / cy,
      });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  useHeroEffect(() => {
    const el = ref.current;
    if (!el) return;

    const onMove = (e) => {
      const rect = el.getBoundingClientRect();
      targetRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top };
      visibleRef.current = true;
    };
    const onEnter = (e) => {
      const rect = el.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      targetRef.current = { x, y };
      currentRef.current = { x, y };
      visibleRef.current = true;
    };
    const onLeave = () => { visibleRef.current = false; };

    const animate = () => {
      const t = targetRef.current;
      const c = currentRef.current;
      const lerpFactor = 0.1;
      const nx = c.x + (t.x - c.x) * lerpFactor;
      const ny = c.y + (t.y - c.y) * lerpFactor;
      currentRef.current = { x: nx, y: ny };
      setSpot({ x: nx, y: ny, visible: visibleRef.current });
      rafRef.current = requestAnimationFrame(animate);
    };
    rafRef.current = requestAnimationFrame(animate);

    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseenter', onEnter);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      cancelAnimationFrame(rafRef.current);
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseenter', onEnter);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  const parallax = (amt) => ({
    transform: `translate3d(${mouse.x * amt}px, ${mouse.y * amt}px, 0)`,
  });

  return (
    <section id="top" ref={ref} style={heroStyles.section}>
      <style>{`
        @keyframes scrollPulse {
          0%   { transform: translateY(-100%); }
          100% { transform: translateY(300%); }
        }
        @keyframes heroFadeUp {
          from { opacity: 0; transform: translateY(24px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes heroFade {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        .hero-eyebrow { animation: heroFade 1200ms ease 200ms both; }
        .hero-title   { animation: heroFadeUp 1400ms cubic-bezier(.2,.7,.2,1) 400ms both; }
        .hero-meta    { animation: heroFade 1200ms ease 900ms both; }
        .hero-scroll  { animation: heroFade 1200ms ease 1300ms both; }
      `}</style>

      <div style={{ ...heroStyles.grid, ...parallax(-10) }} />
      <div
        style={{
          ...heroStyles.spotlight,
          opacity: spot.visible ? 1 : 0,
          background: `radial-gradient(circle 500px at ${spot.x}px ${spot.y}px, rgba(255,245,230,0.22) 0%, rgba(255,240,220,0.12) 30%, rgba(255,235,210,0.05) 60%, transparent 80%)`,
        }}
      />
      <div style={heroStyles.vignette} />

      <div style={heroStyles.content}>
        <h1 className="hero-title" style={{ margin: 0, ...parallax(6) }}>
          <img
            src="assets/logo-white.png"
            alt="Eshwar"
            style={heroStyles.display}
          />
        </h1>

        <div className="hero-meta" style={heroStyles.meta}>
          <div style={heroStyles.trackLine}>
            <span style={heroStyles.trackLineLine} />
            <span>Always and Forever</span>
            <span style={heroStyles.trackLineLine} />
          </div>
          <a
            href="#listen"
            onMouseEnter={() => setCtaHover(true)}
            onMouseLeave={() => setCtaHover(false)}
            style={{
              ...heroStyles.cta,
              background: ctaHover ? '#fff' : 'transparent',
              color: ctaHover ? '#000' : '#fff',
              borderColor: ctaHover ? '#fff' : 'rgba(255,255,255,0.5)',
            }}
          >
            <span>Listen Now</span>
            <window.IconArrow size={14} />
          </a>
        </div>
      </div>

      <div className="hero-scroll" style={heroStyles.scroll}>
        <span>Scroll</span>
        <span style={heroStyles.scrollLine}>
          <span style={heroStyles.scrollPulse} />
        </span>
      </div>
    </section>
  );
}

window.Hero = Hero;