/* global React, useIsMobile */
const { useEffect, useRef, useState } = React;

function ParallaxBand() {
  const isMobile = useIsMobile();
  const bandRef = useRef(null);
  const [offset, setOffset] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      if (!bandRef.current) return;
      const rect = bandRef.current.getBoundingClientRect();
      setOffset(rect.top * -0.28);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div ref={bandRef} style={{ height: isMobile ? 260 : 460, position: 'relative', overflow: 'hidden' }}>

      <div style={{
        position: 'absolute',
        top: '-20%', bottom: '-20%', left: 0, right: 0,
        backgroundImage: 'url(assets/interior-consultorio.png)',
        backgroundSize: 'cover',
        backgroundPosition: isMobile ? 'center 35%' : 'center 25%',
        transform: `translateY(${offset}px)`,
        willChange: 'transform',
      }} />

      <div style={{
        position: 'absolute', inset: 0,
        background: 'rgba(0, 55, 80, 0.38)',
      }} />

      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 12,
        textAlign: 'center', padding: '0 24px',
      }}>
        <div style={{ width: 40, height: 2, background: 'var(--brand-teal)', borderRadius: 2 }} />
        <p style={{
          fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: isMobile ? 22 : 32,
          lineHeight: 1.2, letterSpacing: '-.015em',
          color: '#fff', margin: 0, maxWidth: 560,
        }}>
          O lugar ideal para você <span style={{ color: 'var(--brand-teal)', whiteSpace: 'nowrap' }}>cuidar dos seus olhos.</span>
        </p>
        <div style={{ width: 40, height: 2, background: 'var(--brand-teal)', borderRadius: 2 }} />
      </div>

      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(to bottom, var(--bg-page) 0%, transparent 18%, transparent 82%, var(--bg-page) 100%)',
      }} />

    </div>
  );
}

Object.assign(window, { ParallaxBand });