// Hero.jsx — full-bleed image with subtle parallax, headline overlay, dual CTAs
const { useEffect: useEffectHero, useState: useStateHero, useRef: useRefHero } = React;

function Hero() {
  const ref = useRefHero(null);
  const [y, setY] = useStateHero(0);

  useEffectHero(() => {
    const onScroll = () => {
      const sy = window.scrollY;
      if (sy < 900) setY(sy * 0.18);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero" ref={ref} id="top">
      <div className="hero-img" style={{ transform: `translate3d(0, ${y}px, 0)` }} />
      <div className="hero-shade" />
      <div className="hero-content reveal-on-load">
        <span className="eyebrow hero-eyebrow">Custom Media Walls · Southern California</span>
        <h1 className="hero-h1">Custom Media Walls,<br/>Built Around Your Space.</h1>
        <p className="hero-sub">We design and build modern TV feature walls, fireplace walls, and built-in entertainment walls for homes across Southern California. Custom builds from $2,000.</p>
        <div className="hero-actions">
          <a href="#contact" className="btn btn-primary">Request an Estimate</a>
          <a href="#work" className="btn btn-ghost-light">View Our Work</a>
        </div>
      </div>
      <a href="#intro" className="scroll-cue" aria-label="Scroll">
        <span>SCROLL</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><polyline points="6 9 12 15 18 9"/></svg>
      </a>
    </section>
  );
}

window.Hero = Hero;