// Hero — full-bleed territorio photo + lockup animado. Logo entra al mount,
// "CELTIS" se devela conforme el usuario scrollea.
function Hero() {
  const [t, setT] = React.useState(0);
  const [reveal, setReveal] = React.useState(0);
  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const y = window.scrollY;
        setT(Math.max(0, Math.min(1, y / 900)));
        setReveal(Math.max(0, Math.min(1, y / 120)));
        raf = 0;
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const photoStyle = { transform: `translate3d(0, ${t * 60}px, 0) scale(${1 + t * 0.04})` };
  const textWrapStyle = { opacity: reveal };
  const textInnerStyle = {
    clipPath: `inset(0 0 ${(1 - reveal) * 100}% 0)`,
    WebkitClipPath: `inset(0 0 ${(1 - reveal) * 100}% 0)`,
    transform: `translate3d(0, ${(1 - reveal) * -18}px, 0)`,
  };
  return (
    <section className="hero">
      <div className="hero-photo" aria-hidden="true" style={photoStyle}>
        <img src="../assets/celtis-leaves-web.jpg" alt="" className="hero-photo-img is-active" fetchpriority="high" decoding="async" loading="eager"/>
        <div className="hero-scrim"></div>
      </div>
      <div className="hero-tag hero-tag-solo">
        <div className="hero-mark hero-mark-cream">
          <span className="hero-mark-logo" aria-label="celtis">
            <span className="hero-mark-logo-glass"></span>
            <svg className="hero-mark-logo-stroke" viewBox="0 0 348 282" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
              <defs>
                <linearGradient id="logo-rim" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stopColor="rgb(255,255,255)" stopOpacity="0.7"/>
                  <stop offset="0.5" stopColor="rgb(28,27,27)" stopOpacity="0.55"/>
                  <stop offset="1" stopColor="rgb(28,27,27)" stopOpacity="0.35"/>
                </linearGradient>
              </defs>
              <path d="M86.9429 0H203.196L300.235 94.3881L331.609 124.897C336.975 130.115 342.763 135.563 348 140.868V141.183L282.261 141.212C265.717 141.212 248.783 141.396 232.268 141.185C236.069 145.55 239.96 150.452 243.659 154.949L264.021 179.704L319.91 247.648C329.196 258.936 338.597 270.647 348 281.798V282C342.641 280.897 336.639 279.299 331.256 277.988L302.138 270.914C278.126 265.082 256.059 259.913 232.519 252.347C164.379 230.389 100.909 196.563 45.2065 152.52C29.4998 140.044 14.4138 126.846 0 112.972L0 112.732C2.97399 109.228 6.7938 103.945 9.657 100.232L29.0826 75.0404L86.9429 0Z" fill="none" stroke="url(#logo-rim)" strokeWidth="1.5" vectorEffect="non-scaling-stroke"/>
            </svg>
          </span>
          <span className="hero-mark-text" style={textWrapStyle}>
            <span className="hero-mark-text-stack" style={textInnerStyle}>
              <span className="hero-mark-text-glass"></span>
              <svg className="hero-mark-text-stroke" viewBox="0 0 600 132" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                <defs>
                  <linearGradient id="celtis-rim" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0" stopColor="rgb(255,255,255)" stopOpacity="0.7"/>
                    <stop offset="0.5" stopColor="rgb(28,27,27)" stopOpacity="0.55"/>
                    <stop offset="1" stopColor="rgb(28,27,27)" stopOpacity="0.35"/>
                  </linearGradient>
                </defs>
                <text x="300" y="106" textAnchor="middle" fontFamily="sans-serif" fontWeight="300" fontSize="128" letterSpacing="-1" textRendering="geometricPrecision" fontKerning="normal" fill="none" stroke="url(#celtis-rim)" strokeWidth="1" vectorEffect="non-scaling-stroke">CELTIS</text>
              </svg>
            </span>
          </span>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;