/* IJWestern — shared page shell.
Globals: TopBar, Footer
Extracted in step 4b. These two components were defined three times
over — once each in app.jsx, west-mount.jsx and project.jsx — so a nav
or contact change had to be made in three places and inevitably drifted.
One `home` flag covers the only real difference between the two
contexts: the home page navigates by in-page anchor, every other page
has to prefix those anchors with index.html. Pass `onSchedule` when the
host page wants the button to run a handler (the home page smooth-
scrolls to its form); omit it and the button becomes a plain link. */
const IJW_CONTACT = {
phone: "+91 91485 21696",
phoneHref: "tel:+919148521696",
whatsapp: "https://wa.me/919148521696",
instagram: "https://www.instagram.com/ijwestern_realtors",
email: "visits@ijwestern.com",
address1: "9A, BLM Towers",
address2: "West Yakkara, Palakkad 678001",
hours: "09:00–21:00",
coords: "10.7867° N · 76.6557° E",
};
function ScheduleButton({ onSchedule, href, className = "btn btn-primary btn-glass btn-compact" }) {
const inner = (
<>
Schedule a visit
);
return onSchedule
?
: {inner};
}
/* `page` names which nav link is the current one on a page that is not
the home page. It defaults to "projects", which is what every caller
before step 8 relied on: the projects index and the five project
pages all light Projects. about.html passes "about" and, from step 9,
contact.html passes "contact". */
function TopBar({ home = false, page = "projects", activeSection = null, onSchedule = null }) {
const [onDark, setOnDark] = React.useState(false);
const [condensed, setCondensed] = React.useState(false);
const [navOpen, setNavOpen] = React.useState(false);
const barRef = React.useRef(null);
// The header floats over whatever is scrolling beneath it, and its
// three pieces are light glass. Over an ink band they read as light
// stickers laid on the page. Watch for a [data-ground="dark"] section
// crossing the header's own band and flip the glass, not the layout,
// so nothing shifts at the boundary.
React.useEffect(() => {
const darks = Array.from(document.querySelectorAll('[data-ground="dark"]'));
let raf = null;
const read = () => {
raf = null;
// Past the first screenful the three pills collapse to coins, so
// the header stops sitting on the content it floats over.
setCondensed(window.scrollY > 80);
const bar = barRef.current;
if (!bar || !darks.length) return;
const b = bar.getBoundingClientRect();
const line = b.top + b.height / 2;
setOnDark(darks.some((el) => {
const r = el.getBoundingClientRect();
return r.top <= line && r.bottom >= line;
}));
};
const queue = () => { if (raf === null) raf = requestAnimationFrame(read); };
read();
window.addEventListener("scroll", queue, { passive: true });
window.addEventListener("resize", queue);
return () => {
window.removeEventListener("scroll", queue);
window.removeEventListener("resize", queue);
if (raf !== null) cancelAnimationFrame(raf);
};
}, []);
// Close if the viewport crosses out of the menu range, so a resize
// or a rotation cannot leave the panel hanging over a desktop layout.
// 901 since step 9, and it has to stay in step with the media query in
// styles.css that turns the pill into a coin.
React.useEffect(() => {
if (!window.matchMedia) return;
const mq = window.matchMedia("(min-width: 901px)");
const onChange = (e) => { if (e.matches) setNavOpen(false); };
mq.addEventListener("change", onChange);
return () => mq.removeEventListener("change", onChange);
}, []);
// Tapped open, it has to be dismissable: a tap outside or Escape.
// Hover and focus close themselves, so this only matters for touch.
React.useEffect(() => {
if (!navOpen) return;
const away = (e) => { if (!e.target.closest(".nav")) setNavOpen(false); };
const key = (e) => { if (e.key === "Escape") setNavOpen(false); };
document.addEventListener("pointerdown", away);
document.addEventListener("keydown", key);
return () => {
document.removeEventListener("pointerdown", away);
document.removeEventListener("keydown", key);
};
}, [navOpen]);
const to = (hash) => (home ? hash : `index.html${hash}`);
// Every link in the bar is a page now, so what is lit is simply which
// page you are on. The in-page anchors — Method and Visit — came out
// of the nav after step 9 at the client's request; `to()` still builds
// the CTA's href, and `activeSection` is still accepted because the
// home page passes it, but nothing in the bar lights from the scroll
// spy any more.
const pageCls = (id) => `nav-link${!home && page === id ? " active" : ""}`;
return (
{/* Mobile only. Behind the panel, in front of the page. */}
