/* ============================================================
app.jsx — Nav, Footer, App shell (smooth-scroll, tweaks)
============================================================ */
function smoothScrollTo(id) {
const el = document.getElementById(id);
if (!el) return;
const top = el.getBoundingClientRect().top + window.scrollY - 64;
window.scrollTo({ top: id === "top" ? 0 : top, behavior: "smooth" });
}
function Nav({ heroVariant, accent }) {
const [scrolled, setScrolled] = React.useState(false);
const [active, setActive] = React.useState("top");
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
React.useEffect(() => {
const ids = NAV.map((n) => n.id);
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); });
}, { rootMargin: "-45% 0px -50% 0px" });
ids.forEach((id) => { const el = document.getElementById(id); if (el) io.observe(el); });
return () => io.disconnect();
}, []);
// dark hero at top → light nav text until scrolled
const lightText = heroVariant === "immersive" && !scrolled;
const onNav = (e, id) => { e.preventDefault(); setOpen(false); smoothScrollTo(id); };
return (
);
}
function Footer() {
const onNav = (e, id) => { e.preventDefault(); smoothScrollTo(id); };
return (
);
}
/* ---------------- App ---------------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroStyle": "immersive",
"accent": "#d98a3d",
"grain": true,
"motion": true
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// apply accent + accent-derived shades
React.useEffect(() => {
const root = document.documentElement;
root.style.setProperty("--accent", t.accent);
root.style.setProperty("--accent-deep", shade(t.accent, -0.16));
root.style.setProperty("--accent-soft", shade(t.accent, 0.22));
}, [t.accent]);
React.useEffect(() => {
document.body.classList.toggle("no-grain", !t.grain);
document.body.classList.toggle("no-motion", !t.motion);
}, [t.grain, t.motion]);
// Failsafe: if hero entrance animations don't play (offscreen/throttled
// iframe, reduced-motion), force the visible end-state so content is never
// stuck at opacity:0. Re-armed whenever the hero style changes.
React.useEffect(() => {
const root = document.documentElement;
root.classList.remove("anim-done");
const id = setTimeout(() => root.classList.add("anim-done"), 1600);
return () => clearTimeout(id);
}, [t.heroStyle]);
const onNav = (e, id) => { e.preventDefault(); smoothScrollTo(id); };
return (
<>
{t.grain && }
setTweak("heroStyle", v)}
/>
setTweak("accent", v)}
/>
setTweak("grain", v)} />
setTweak("motion", v)} />
);
}
// lighten/darken a hex color by amount (-1..1)
function shade(hex, amt) {
const c = hex.replace("#", "");
let r = parseInt(c.substring(0,2),16), g = parseInt(c.substring(2,4),16), b = parseInt(c.substring(4,6),16);
const f = (v) => Math.max(0, Math.min(255, Math.round(amt < 0 ? v * (1+amt) : v + (255-v)*amt)));
const h = (v) => f(v).toString(16).padStart(2,"0");
return `#${h(r)}${h(g)}${h(b)}`;
}
ReactDOM.createRoot(document.getElementById("root")).render();