// Hero.jsx
function Hero() {
  const { t } = window.useI18n();
  const [loaded, setLoaded] = React.useState(false);
  const [imgOk, setImgOk] = React.useState(false);
  const url = window.IMAGES.hero;

  React.useEffect(() => {
    const img = new Image();
    img.onload = () => { setImgOk(true); setLoaded(true); };
    img.onerror = () => { setImgOk(false); setLoaded(true); };
    img.src = url;
    // safety: trigger animation after a tick even if image hangs
    const tid = setTimeout(() => setLoaded(true), 1200);
    return () => clearTimeout(tid);
  }, [url]);

  const bgStyle = imgOk
    ? { backgroundImage: `url(${url})` }
    : null;

  return (
    <section className={`hero ${loaded ? "loaded" : ""}`} id="top">
      <div
        className={`hero__bg ${imgOk ? "" : "hero__bg--fallback"}`}
        style={bgStyle || undefined}
      ></div>
      <div className="hero__overlay"></div>
      <div className="container hero__inner">
        <div className="hero__eyebrow">{t.hero.eyebrow}</div>
        <h1 dangerouslySetInnerHTML={{ __html: t.hero.h1html }}></h1>
        <div className="hero__sub">
          <span>{t.hero.meta1}</span>
          <span>{t.hero.meta2}</span>
          <span>{t.hero.meta3}</span>
        </div>
        <div className="hero__cta">
          <a className="btn btn--gold" href="#register">{t.hero.cta1}</a>
          <a className="btn btn--ghost-light" href="https://t.me/yr_test_regatta_bot" target="_blank" rel="noopener">
            {t.hero.cta2}
          </a>
        </div>
      </div>
      <a href="#why" className="hero__scroll" aria-label="scroll">{t.hero.scroll}</a>
    </section>
  );
}
window.Hero = Hero;