// Hair L2 — app composition
const { useEffect, useState } = React;
// Re-scans on every render so newly-mounted `.reveal` elements (e.g. when
// switching subcategory layouts via Tweaks) get observed and faded in.
function useHairReveal() {
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) => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) {
el.classList.add("in");
} else {
io.observe(el);
}
});
};
scan();
const mo = new MutationObserver(scan);
mo.observe(document.body, { childList: true, subtree: true });
return () => { io.disconnect(); mo.disconnect(); };
}, []);
}
function HairApp() {
const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
useHairReveal();
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-mahogany");
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 (
<>
Seven ways into the hair chapter.} link="Index A–Z" />
First — what kind of hair are we working with?} />
The wash-day sequence, scalp to ends.} link="Print this" />
Your hair in four seasons.} link="Read the series" />
Myth, meet fact.} />
{t.showFaq !== false && (
<>
Five honest answers.} />
)}
Everything else in this chapter.} link="Full index" />
More reading.} link="All from Nelly" />