// Hero: split editorial display "BUILDING / VISIONS" with center photo
function Hero({ onNavigate }) {
  const ref = useReveal(0.05);
  const [scroll, setScroll] = useState(0);
  useEffect(() => {
    const onS = () => setScroll(window.scrollY);
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);
  // parallax: bg moves slower than scroll
  const parallax = Math.min(scroll, 600);
  return (
    <section className="de-hero" ref={ref}>
      <div className="de-hero__bg" style={{ transform: `translate3d(0, ${parallax * 0.18}px, 0) scale(${1 + parallax * 0.0002})` }}>
        <img src="assets/imagery/villa-sunset-exterior.png" alt="A Digit Estate villa at golden hour" />
        <div className="de-hero__bg-overlay"></div>
      </div>

      <div className="de-hero__inner">
        <div className="de-hero__eyebrow de-reveal de-reveal-2 is-in">
          A Portfolio of Considered Residences · Est. 2026
        </div>

        <h1 className="de-hero__display">
          <span className="de-hero__word de-reveal is-in">Building</span>
          <span className="de-hero__center">
            <img src="assets/imagery/marble-brass-texture.png" alt="" />
          </span>
          <span className="de-hero__word de-hero__word--italic de-reveal de-reveal-3 is-in">visions</span>
        </h1>

        <p className="de-hero__lead de-reveal de-reveal-4 is-in">
          Visionary residences across the Emirates, blending global craft with local insight,
          and transforming spaces through architecture, interiors and meticulous execution.
        </p>

        <div className="de-hero__actions de-reveal de-reveal-4 is-in">
          <a className="de-btn de-btn--accent" onClick={() => onNavigate('portfolio')}>
            View Portfolio <span className="arrow"></span>
          </a>
          <a className="de-btn de-btn--ghost-light" onClick={() => onNavigate('contact')}>
            Contact Us
          </a>
        </div>
      </div>

      <div className="de-hero__scroll">
        <span>SCROLL TO EXPLORE</span>
        <div className="de-hero__scroll-dot"></div>
      </div>

      <div className="de-hero__corner">
        <div className="de-hero__corner-mini">
          <img src="assets/imagery/penthouse-skyline.png" alt=""/>
        </div>
        <div className="de-hero__corner-mini">
          <img src="assets/imagery/living-fireplace.png" alt=""/>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;