// Makeup · Technique · Sculpted Base — L3 app (COMBINED page)

function SculptedBaseApp() {
  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/technique/">Technique</a>
        <span className="sl">/</span>
        <span className="cur">Sculpted Base</span>
      </nav>

      <div className="l2" data-screen-label="Sculpted Base L3">
        <SculptedBaseSidebar activeId="sculpted-base" />
        <main className="l2-main">
          <SculptedBaseHero />
          <TypeRail />

          {/* Combined-page anchor nav — before EditorIntro */}
          <nav className="l3-anchor-nav" aria-label="On this page">
            <a href="#strobe">Strobing</a>
            <a href="#sculpt">Sculpting</a>
            <a href="#underpaint">Underpainting</a>
          </nav>

          <EditorIntro />

          <SectionHead n="I." eyebrow="Definitions · Plain English" h={<>What we mean by <em>sculpted base.</em></>} />
          <QuickFacts />

          <SectionHead n="II." eyebrow="If sculpted base 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 />

          <h3 id="strobe" style={{ marginTop: "2.5rem", marginBottom: "0.75rem" }}>Strobing</h3>
          <p style={{ marginBottom: "2rem", maxWidth: "52ch", lineHeight: 1.7, fontSize: "1rem" }}>
            Strobing was sculpting in reverse. The principle is placement of a lighter tone at the highest planes — the bridge of the nose, the top of the cheekbone, the brow bone, the cupid's bow — so that light catches there first. No shadow required. The effect is dimension without the contour step.
          </p>

          <h3 id="sculpt" style={{ marginTop: "2.5rem", marginBottom: "0.75rem" }}>Sculpting</h3>
          <p style={{ marginBottom: "2rem", maxWidth: "52ch", lineHeight: 1.7, fontSize: "1rem" }}>
            Sculpting works from the shadow end: a deeper tone placed beneath the cheekbone, along the temples, and under the jaw. It recedes planes that catch light too broadly. The tone should be cool enough to read as shadow, not warm enough to read as bronzer. The difference between the two is the entire technique.
          </p>

          <h3 id="underpaint" style={{ marginTop: "2.5rem", marginBottom: "0.75rem" }}>Underpainting</h3>
          <p style={{ marginBottom: "2rem", maxWidth: "52ch", lineHeight: 1.7, fontSize: "1rem" }}>
            Underpainting applies colour correctors and contour tones before foundation, not after. The base sits on top and the dimension reads through it as a shift in depth rather than a visible product. It requires more initial time and yields a more integrated result. Photographers have used it for decades; it's slower to reach the general technique conversation because it asks for patience before a single layer of coverage goes on.
          </p>

          <SectionHead n="IV." eyebrow="Texture · Use case" h={<>Choosing an <em>approach.</em></>} />
          <FormatGuide />

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

          <SectionHead n="VI." eyebrow="Other techniques" h={<>If you're working on <em>something else.</em></>} link="By technique" />
          <TypeCrosslinks />

          <SculptedBaseNext />
        </main>
      </div>

      <NellyTop3 category="sculpted base makeup" />
      <Newsletter />
      <Footer />
    </>
  );
}

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