// L5 How-to leaf — app

function HowToApp() {
  React.useEffect(() => {
    document.body.classList.add("ht-page");
    document.body.classList.add("fp-playfair-dmsans");
    document.body.classList.add("ac-coral");
    return () => {
      document.body.classList.remove("ht-page");
      document.body.classList.remove("fp-playfair-dmsans");
      document.body.classList.remove("ac-coral");
    };
  }, []);

  // Reading progress bar
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = (h.scrollHeight - h.clientHeight) || 1;
      setProgress(Math.min(1, Math.max(0, h.scrollTop / max)));
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, []);

  return (
    <>
      <div className="ht-progress" style={{ transform: `scaleX(${progress})` }} aria-hidden="true" />

      <Header onDark={false} />

      <nav className="crumb" aria-label="Breadcrumb">
        <a href="Landing Page.html">Home</a>
        <span className="sl">/</span>
        <a href="Skin.html">Skin</a>
        <span className="sl">/</span>
        <a href="Moisturising.html">Moisturising</a>
        <span className="sl">/</span>
        <a href="Oily Skin.html">Oily skin</a>
        <span className="sl">/</span>
        <span className="cur">Without the mid-day slick</span>
      </nav>

      <div className="ht-shell">
        <HtMast />
        <HtHero />
        <HtStrip />
        <HtBody />
        <HtSimilar />
      </div>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HowToApp />);