/* HERO — Jaroun building, parallax/zoom entrance */
function Hero({ onEnter }) {
  const [loaded, setLoaded] = React.useState(false);
  const [p, setP] = React.useState(0); // pointer parallax
  React.useEffect(() => {
    const t = setTimeout(() => setLoaded(true), 60);
    return () => clearTimeout(t);
  }, []);
  function onMove(e) {
    const x = (e.clientX / window.innerWidth - 0.5);
    const y = (e.clientY / window.innerHeight - 0.5);
    setP({ x, y });
  }
  const px = p.x || 0, py = p.y || 0;

  return (
    <div className="hero" onMouseMove={onMove}>
      <div
        className={'hero-img ' + (loaded ? 'in' : '')}
        style={{
          transform: `scale(${loaded ? 1.04 : 1.18}) translate(${px * -18}px, ${py * -14}px)`,
        }}
      >
        <img src={(window.__resources && window.__resources.hero) || "assets/jaroun-hero.jpg"} alt="ساختمان جرون" />
        <div className="hero-veil" />
      </div>

      <div className="hero-frame" />

      {/* left scrim for legibility */}
      <div className={'hero-scrim ' + (loaded ? 'in' : '')} />

      {/* top labels */}
      <div className={'hero-meta tr ' + (loaded ? 'in' : '')}>
        <div className="kicker">بندرعباس · BANDAR ABBAS</div>
        <div className="kicker">UNDER&nbsp;CONSTRUCTION</div>
      </div>

      {/* left content column */}
      <div className="hero-left">
        <div className={'hero-en ' + (loaded ? 'in' : '')}>CHEGALL · DEVELOPMENT GROUP</div>
        <h1 className={'hero-title ' + (loaded ? 'in' : '')}>
          <span>ساختمان</span>
          <span className="accent">جَرون</span>
        </h1>
        <div className={'hero-line2 ' + (loaded ? 'in' : '')}>JAROUN&nbsp;BUILDING · ۷ طبقه · ۷۷ واحد</div>
        <button className={'hero-enter btn ' + (loaded ? 'in' : '')} onClick={onEnter}>
          اطلاعات سرمایه‌گذاران
          <span className="arrow">←</span>
        </button>
      </div>

      <div className={'hero-scroll ' + (loaded ? 'in' : '')}>
        <span className="kicker">ENTER</span>
        <span className="scroll-line" />
      </div>
    </div>
  );
}
window.Hero = Hero;