// Hero — fullscreen, centered. Только портрет + основной заголовок, с анимацией появления.
(function () {
  const PHOTO = "../../assets/arthurs-photo-col.JPG";

  // Печатающий эффект (по мотивам React Bits <TextType/>): печатает фразу, держит
  // паузу, стирает и печатает следующую. Курсор мигает через CSS (без gsap-зависимости).
  // words — массив { text, hl }, где hl — подстрока, выделяемая синим (var(--signal)).
  // brAt — подстрока, перед которой принудительно вставляется перенос строки.
  function renderTyped(full, hl, typed, brAt) {
    const n = typed.length;
    const hlStart = hl ? full.indexOf(hl) : -1;
    const hlEnd = hlStart >= 0 ? hlStart + hl.length : -1;
    const brIdx = brAt ? full.indexOf(brAt) : -1;
    const nodes = [];
    let i = 0, key = 0;
    while (i < n) {
      if (i === brIdx && i > 0) nodes.push(<br key={"br" + key++} />);
      const inHl = hlStart >= 0 && i >= hlStart && i < hlEnd;
      let runEnd = n;
      [hlStart, hlEnd, brIdx].forEach((b) => { if (b > i && b < runEnd) runEnd = b; });
      nodes.push(
        <span key={key++} className={inHl ? "w-type__hl" : "w-type__text"}>{full.slice(i, runEnd)}</span>
      );
      i = runEnd;
    }
    return <React.Fragment>{nodes}</React.Fragment>;
  }

  function TypeType({ words, typingSpeed = 80, deletingSpeed = 40, pauseDuration = 2200, initialDelay = 450 }) {
    const [wi, setWi] = React.useState(0);
    const [del, setDel] = React.useState(false);
    const [n, setN] = React.useState(0);
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const cur = words[wi];

    React.useEffect(() => {
      if (reduce) return;
      let t;
      if (!del && n < cur.text.length) {
        t = setTimeout(() => setN(n + 1), n === 0 ? initialDelay : typingSpeed);
      } else if (!del && n === cur.text.length) {
        t = setTimeout(() => setDel(true), pauseDuration);
      } else if (del && n > 0) {
        t = setTimeout(() => setN(n - 1), deletingSpeed);
      } else {
        setDel(false);
        setWi((v) => (v + 1) % words.length);
      }
      return () => clearTimeout(t);
    }, [n, del, wi, reduce]);

    const typed = reduce ? cur.text : cur.text.slice(0, n);

    return (
      <span className="w-type">
        {renderTyped(cur.text, cur.hl, typed, cur.brAt)}
        <span className="w-type__cursor" aria-hidden="true">|</span>
      </span>
    );
  }

  function Hero() {
    const [open, setOpen] = React.useState(false);
    const [scrolled, setScrolled] = React.useState(false);
    React.useEffect(() => {
      if (!open) return;
      const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, [open]);
    // Указатель «Листай» прячется, как только пользователь начал скроллить.
    React.useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 24);
      onScroll();
      window.addEventListener("scroll", onScroll, { passive: true });
      return () => window.removeEventListener("scroll", onScroll);
    }, []);

    return (
      <header className="w-band w-band--dark w-hero--portrait" id="top"
        style={{ minHeight: "100vh", display: "flex", alignItems: "center", position: "relative", overflow: "hidden",
                 paddingTop: "var(--band-pad-hero)", paddingBottom: "var(--band-pad-hero)" }}>
        <div className="w-inner" style={{ width: "100%", position: "relative", zIndex: 1 }}>
          <div className="w-hero--center">
            <button type="button" className="w-hero__avatar" onClick={() => setOpen(true)}
                    aria-label="Открыть фото в полном размере">
              <img src={PHOTO} alt="Артур Демченко" />
              <span className="w-grain" aria-hidden="true" />
            </button>
            <h1 className="w-hero__headline w-hero__headline--oneline">
              Юрист, <TypeType words={[
                { text: "возраст которого — преимущество", hl: "преимущество" },
                { text: "который отличает токен от монеты", hl: "токен от монеты" },
                { text: "который говорит с вами на одном языке", hl: "на одном языке", brAt: "одном языке" },
                { text: "который отличает суброгацию и регресс", hl: "отличает" },
                { text: "который использует ИИ осознанно", hl: "осознанно" },
              ]} />
            </h1>
          </div>
        </div>

        <a href="#about" className={"w-scrolldown" + (scrolled ? " w-scrolldown--hide" : "")}
           aria-label="Листайте вниз">
          <span className="w-scrolldown__label">Листайте</span>
          <span className="w-scrolldown__arrow" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
          </span>
        </a>

        {open && (
          <div className="w-lightbox" onClick={() => setOpen(false)} role="dialog" aria-modal="true">
            <button type="button" className="w-lightbox__close" aria-label="Закрыть"
                    onClick={() => setOpen(false)}>
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
            <img className="w-lightbox__img" src={PHOTO} alt="Артур Демченко"
                 onClick={(e) => e.stopPropagation()} />
          </div>
        )}
      </header>
    );
  }
  window.Hero = Hero;
})();