// Makeup · Lips · Lip Liner & Overdraw — L3 app (live deploy) — COMBINED page
// Inline anchor nav before EditorIntro for #liner / #overdraw / #prep

function LipLinerOverdrawApp() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.08, rootMargin: "0px 0px -40px 0px" });
    const scan = () => {
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => io.observe(el));
    };
    const raf = requestAnimationFrame(() => requestAnimationFrame(scan));
    const mo = new MutationObserver(scan);
    mo.observe(document.body, { childList: true, subtree: true });
    return () => { cancelAnimationFrame(raf); io.disconnect(); mo.disconnect(); };
  }, []);

  React.useEffect(() => {
    const b = document.body;
    b.classList.remove("fp-playfair-dmsans", "fp-dmserif-dmsans", "fp-fraunces-inter");
    b.classList.add(`fp-${t.fontPairing}`);
    b.classList.remove("ac-coral", "ac-oxblood", "ac-champagne", "ac-terracotta", "ac-bronze", "ac-carmine");
    b.classList.add(`ac-${t.accent}`);
    b.classList.toggle("dark", !!t.dark);
    b.classList.remove("cs-editorial", "cs-rounded", "cs-framed", "cs-minimal");
    b.classList.add(`cs-${t.cardStyle || "editorial"}`);
  }, [t.fontPairing, t.accent, t.dark, t.cardStyle]);

  return (
    <>
      <Header onDark={false} />

      <nav className="crumb" aria-label="Breadcrumb">
        <a href="/">Home</a>
        <span className="sl">/</span>
        <a href="/en/makeup/">Makeup</a>
        <span className="sl">/</span>
        <a href="/en/makeup/lips/">Lips</a>
        <span className="sl">/</span>
        <span className="cur">Lip Liner &amp; Overdraw</span>
      </nav>

      <div className="l2" data-screen-label="Lip Liner & Overdraw L3">
        <LipLinerOverdrawSidebar activeId="lip-liner-overdraw" />
        <main className="l2-main">
          <LipLinerOverdrawHero />
          <TypeRail />

          {/* Inline anchor nav for combined-page sections */}
          <nav className="l3-anchor-nav" aria-label="On this page">
            <a href="#liner">Liner</a>
            <a href="#overdraw">Overdraw</a>
            <a href="#prep">Prep</a>
          </nav>

          <EditorIntro />

          <SectionHead n="I." eyebrow="Definitions · Plain English" h={<>What <em>liner</em> is actually for.</>} />
          <QuickFacts />

          <SectionHead n="II." eyebrow="If liner is new to you" h={<>The <em>beginner's</em> path.</>} link="Print as PDF" />
          <BeginnerPath />

          <SectionHead n="III." eyebrow="Trending now · Top 5 searches" h={<>What everyone's <em>reading</em> this week.</>} link="See top 100" />
          <Trending />

          <SectionHead n="IV." eyebrow="Liner type · Overdraw · Prep" h={<>Choosing a <em>liner,</em> and where to draw it.</>} />
          <FormatGuide />

          <SectionHead n="V." eyebrow={`The library · ${OILY.totalCount} how-to's`} h={<>Everything we've published on <em>liner &amp; overdraw.</em></>} link="Full index A–Z" />
          <HowToLibrary cardStyle={t.libCardStyle || "editorial"} />

          <SectionHead n="VI." eyebrow="Other lips topics" h={<>More on <em>lips.</em></>} link="All Makeup" />
          <TypeCrosslinks />

          <LipLinerOverdrawNext />
        </main>
      </div>

      <NellyTop3 category="lip liner and overdraw" />
      <Newsletter />
      <Footer />
    </>
  );
}

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