/*
  hero.jsx — Hero con parallax scroll y capa de edificios en primer plano
  ----------------------------------------------------------------------
  3 modos seleccionables vía Tweaks (classic / zoom / cinema).
  Los edificios PNG suben más rápido que el texto, "cubriendo" el título
  conforme avanza el scroll → efecto de profundidad.
*/

function Hero({ t, lang, mode = 'classic' }) {
  const [p, setP] = React.useState(0);
  const heroRef = React.useRef(null);

  React.useEffect(() => {
    let raf = null;
    const updateProgress = () => {
      const el = heroRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      // Rango de scroll usable: altura total del hero menos el viewport pinned
      const range = el.offsetHeight - window.innerHeight;
      // Cuánto hemos scrolleado DENTRO del hero (0 = arriba, 1 = abajo)
      const scrolled = -rect.top;
      const progress = range > 0 ? Math.max(0, Math.min(1, scrolled / range)) : 0;
      setP(progress);
    };
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => { updateProgress(); raf = null; });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', updateProgress);
    updateProgress();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', updateProgress);
    };
  }, []);

  // Cada elemento se mueve a distinta velocidad.
  // buildingsY: % de la altura del hero — siempre más alto que el texto
  let imgTransform, eyebrowY, titleY, btnY, buildingsY, buildingsScale, fade, imgExtend;
  switch (mode) {
    case 'cinema':
      imgExtend = '30%';
      imgTransform = `translate3d(0, ${p * 25}%, 0)`;
      eyebrowY = -p * 80;
      titleY   = -p * 140;
      btnY     = -p * 280;
      buildingsY = -p * 45;
      buildingsScale = 1 + p * 0.04;
      fade   = 1 - Math.max(0, (p - 0.55) * 2);
      break;
    case 'zoom':
      imgExtend = '4%';
      imgTransform = `scale(${1 + p * 0.22})`;
      eyebrowY = -p * 90;
      titleY   = -p * 150;
      btnY     = -p * 270;
      buildingsY = -p * 38;
      buildingsScale = 1 + p * 0.08;
      fade   = 1 - Math.max(0, (p - 0.5) * 2);
      break;
    case 'classic':
    default:
      imgExtend = '4%';
      imgTransform = `translate3d(0, ${p * 30}px, 0) scale(1.02)`;
      eyebrowY = -p * 180;
      titleY   = -p * 90;     // título sube más lento → edificios lo cubren
      btnY     = -p * 20;
      buildingsY = -p * 34;
      buildingsScale = 1 + p * 0.05;
      fade   = 1 - Math.max(0, (p - 0.6) * 2);
      break;
  }

  return (
    <section className="hero" id="hero" ref={heroRef} data-screen-label="01 Hero">
      <div className="hero-stage">
        {/* Fondo: cielo + montañas */}
        <div
          className="hero-img-layer"
          style={{
            backgroundImage: 'url(assets/gdl-1.jpg)',
            inset: `-${imgExtend} -4% -${imgExtend} -4%`,
            transform: imgTransform,
          }}
        />

        {/* Overlay (vacío por ahora) + grain */}
        <div className="hero-overlay" />
        <div className="hero-grain" />

        {/* Texto — queda DETRÁS de la capa de edificios */}
        <div className="hero-text" style={{ opacity: fade }}>
          <div className="hero-eyebrow" style={{ transform: `translate3d(0, ${eyebrowY}px, 0)` }}>
            {t.hero.eyebrow}
          </div>
          <h1 className="hero-title" style={{ transform: `translate3d(0, ${titleY}px, 0)` }}>
            {t.hero.title1} <em>{t.hero.titleEm}</em><br />
            {t.hero.title2}
          </h1>
          <a
            href="propiedades.html"
            className="hero-cta"
            style={{ transform: `translate3d(0, ${btnY}px, 0)`, backgroundColor: "rgb(52, 201, 255)" }}
          >
            {t.hero.cta}
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M2.5 8h11m0 0L9 3.5M13.5 8 9 12.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>

        {/* UI superior: tag + scroll cue */}
        <div className="hero-tag" style={{ opacity: 1 - p * 1.4 }}>
          <span className="hero-tag-dot" />
          <div>
            <small>Vista</small>
            <b>Guadalajara · Zona Financiera</b>
          </div>
        </div>
        <div className="hero-scroll-cue" style={{ opacity: 1 - p * 2 }}>
          {t.hero.scroll}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;