// Hero — fullscreen, centered. Только основной заголовок + подпись + кнопки, с анимацией появления.
(function () {
  const { Button } = window.ArthurDemchenkoBrandSystem_fe6514;

  const HeroArrow = () => (
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17 17 7M9 7h8v8"/></svg>
  );

  // Слово в конце заголовка само листается: больше → лучше → глубже.
  const WORDS = ["больше", "лучше", "глубже"];

  function Hero() {
    const [i, setI] = React.useState(0);
    React.useEffect(() => {
      if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
      const id = setInterval(() => setI((v) => (v + 1) % WORDS.length), 2200);
      return () => clearInterval(id);
    }, []);
    const prev = (i - 1 + WORDS.length) % WORDS.length;

    return (
      <header className="w-band w-band--dark" id="top"
        style={{ minHeight: "100vh", display: "flex", alignItems: "center",
                 paddingTop: "var(--band-pad-hero)", paddingBottom: "var(--band-pad-hero)" }}>
        <div className="w-inner" style={{ width: "100%" }}>
          <div className="w-hero--center">
            <h1 className="w-hero__headline">
              Юрист, который видит<br/>и чувствует{" "}
              <span className="w-rotate">
                <span className="w-rotate__sizer" aria-hidden="true">глубже</span>
                {WORDS.map((w, idx) => {
                  const state = idx === i ? "in" : (idx === prev ? "out" : "wait");
                  return (
                    <span key={w} className={"w-rotate__word w-rotate__word--" + state}>{w}</span>
                  );
                })}
              </span>
            </h1>
            <div className="w-hero__cta">
              <Button variant="primary" href="#contact">Давай знакомиться</Button>
              <Button variant="outline" tone="dark" href="#writing" iconRight={<HeroArrow/>}>Читать блог</Button>
            </div>
          </div>
        </div>
      </header>
    );
  }
  window.Hero = Hero;
})();