/* IJWestern — shared SVG bits & atoms */
/* Globals: TopoLines, ArrowIcon, StatusPill, PlotOutline, MethodIcons, LandPlaceholder */
const ArrowIcon = ({ size = 11 }) => (
);
const PlusIcon = ({ size = 14 }) => (
);
const StatusPill = ({ status, dark = false, className = "" }) => {
const map = { Completed: "completed", Available: "available", "On-going": "ongoing" };
const cls = map[status] || "";
return (
{status}
);
};
/* Decorative topographic SVG — used as backdrop accent in a few sections.
These are hand-drawn-feeling concentric isoline blobs. */
const TopoLines = ({ stroke = "#857F77", opacity = 0.4, density = 18, className = "" }) => {
// generate concentric oval blobs offset
const lines = [];
const cx = 600, cy = 400;
for (let i = 0; i < density; i++) {
const r = 60 + i * 26;
// perturb the ellipse slightly per ring
const seed = i * 0.7;
const rx = r + Math.sin(seed) * 18;
const ry = r * 0.72 + Math.cos(seed * 1.3) * 22;
lines.push(
);
}
// secondary blob
const cx2 = 200, cy2 = 180;
for (let i = 0; i < Math.floor(density * 0.7); i++) {
const r = 40 + i * 22;
const seed = i * 0.5 + 3;
const rx = r + Math.sin(seed) * 12;
const ry = r * 0.8 + Math.cos(seed * 1.1) * 14;
lines.push(
);
}
return (
);
};
/* A more architectural plot-outline overlay for the New Launch visual:
site plan with plot lots, road, scale notations. */
const PlotOutline = ({ stroke = "#F7F4EF", accent = "#B8832A" }) => (
);
/* Small abstract iconography for the Method section — line drawings only */
const MethodIcons = {
see: () => (
),
walk: () => (
),
verify: () => (
),
own: () => (
),
};
/* ── LandPlaceholder ────────────────────────────────────────────
Rich on-brand SVG standing in for a photograph that does not exist yet.
Themes paint very different moods so each card reads as a unique landscape.
Pass a seed to get deterministic variation across cards. */
const LP_THEMES = {
fields: { from: "#7a8a4a", to: "#3a4c20", line: "#f7f4ef", glow: "#c8b06a" },
hills: { from: "#4d5d54", to: "#1f2c25", line: "#e9e1cf", glow: "#b8832a" },
laterite:{ from: "#a6532a", to: "#3e1f0e", line: "#f7e9d7", glow: "#e0b06e" },
paddy: { from: "#9bb46a", to: "#3f5826", line: "#f7f4ef", glow: "#d8c478" },
dawn: { from: "#c98a4a", to: "#4a2b1c", line: "#f7e6cf", glow: "#f0c878" },
forest: { from: "#3b5a3e", to: "#0e1d18", line: "#d8e8d4", glow: "#7ea882" },
mist: { from: "#8a9aa2", to: "#384148", line: "#f7f4ef", glow: "#c7b487" },
earth: { from: "#7a6a4a", to: "#2a2218", line: "#e9d9b8", glow: "#b8832a" },
};
/* Generates concentric ring patterns offset around two centres,
with a horizon-style gradient + topo isolines. */
const LandPlaceholder = ({ theme = "hills", seed = 1, label = "" }) => {
const T = LP_THEMES[theme] || LP_THEMES.hills;
// pseudo-random based on seed
const r = (n) => {
const x = Math.sin(seed * 999 + n * 13.37) * 10000;
return x - Math.floor(x);
};
const blob = (cx, cy, k) => {
const rings = [];
for (let i = 0; i < 18; i++) {
const base = 28 + i * 22;
const rx = base + r(k + i) * 30;
const ry = base * (0.55 + r(k + i + 1) * 0.4);
const rot = (r(k + i + 2) - 0.5) * 40;
const dx = cx + (r(k + i + 3) - 0.5) * 24;
const dy = cy + (r(k + i + 4) - 0.5) * 14;
rings.push(
);
}
return rings;
};
const cx1 = 200 + r(1) * 80, cy1 = 280 + r(2) * 60;
const cx2 = 520 + r(3) * 80, cy2 = 200 + r(4) * 50;
const gid = `lp-${seed}-${theme}`;
return (
);
};
/* ── Project names with a phase ────────────────────────────────────
"Blue Hills Phase 2" is one community with a qualifier, not a
four-word name, and set at one size the qualifier eats the title.
Two renderings, and the split is derived from the name itself so a
Phase 3 needs no data change:
titles — "Phase 2" small and regular after it
projectNameInline sentences and plain-text slots — "(Phase 2)",
because a size step mid-sentence reads as a typo
Leave the raw `name` in aria-labels, alt text and form values. */
const splitProjectName = (name = "") => {
const m = /^(.*?)\s+(Phase\s+\d+)$/.exec(name.trim());
return m ? { main: m[1], phase: m[2] } : { main: name, phase: null };
};
const ProjectName = ({ name }) => {
const { main, phase } = splitProjectName(name);
return phase
? <>{main}{phase}
: <>{name};
};
const projectNameInline = (name = "") => {
const { main, phase } = splitProjectName(name);
return phase ? `${main} (${phase})` : name;
};
/* Hover video for a card. Sits on top of the card's still image, which is
the video's own first frame. Plays only on hover (and keyboard focus) on
devices that can hover, fades in once frames are actually playing, and on
leave fades out, pauses and rewinds to frame 0 so the next hover starts
from the still. The video file is fetched once the card is near view. */
/* `src` takes one file; `sources` takes a list of { src, type } and lets the
browser pick the first it can play (the home cards list MP4 first, as the
smaller file and the one Safari always plays, then WebM). */
const HoverVideo = ({ src, sources }) => {
const key = src || (sources && sources.map(s => s.src).join("|"));
const ref = React.useRef(null);
React.useEffect(() => {
const v = ref.current;
const card = v && v.closest("a");
if (!v || !card) return;
const canHover = window.matchMedia("(hover: hover) and (pointer: fine)");
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
if (!canHover.matches || reduced.matches) return;
let wanted = false, stopTimer = null;
/* Never call load() once a hover has begun — it would reset playback. */
const io = new IntersectionObserver((es) => {
if (es.some(e => e.isIntersecting)) {
v.preload = "auto";
if (!wanted && v.readyState === 0) v.load();
io.disconnect();
}
}, { rootMargin: "200px" });
io.observe(card);
const isHovered = () => card.matches(":hover") || document.activeElement === card;
const play = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); };
const onPlaying = () => { if (wanted) v.classList.add("is-playing"); };
const start = () => {
wanted = true;
clearTimeout(stopTimer);
play();
if (!v.paused && v.readyState >= 3) v.classList.add("is-playing");
};
const stop = () => {
wanted = false;
v.classList.remove("is-playing");
clearTimeout(stopTimer);
stopTimer = setTimeout(() => {
// The card lifts on hover, so a stray mouseleave can fire while the
// pointer is still over it. If it is, carry on instead of stopping.
if (isHovered()) { start(); return; }
v.pause(); try { v.currentTime = 0; } catch (e) {}
}, 450);
};
// Keep looping for as long as the card is hovered, even if the browser's
// native loop stalls or the video gets paused underneath us.
const onEnded = () => { if (wanted || isHovered()) { wanted = true; v.currentTime = 0; play(); } };
const onPause = () => { if (wanted && !v.ended) play(); };
v.addEventListener("playing", onPlaying);
v.addEventListener("ended", onEnded);
v.addEventListener("pause", onPause);
card.addEventListener("mouseenter", start);
card.addEventListener("mouseleave", stop);
card.addEventListener("focus", start);
card.addEventListener("blur", stop);
return () => {
io.disconnect(); clearTimeout(stopTimer);
v.removeEventListener("playing", onPlaying);
v.removeEventListener("ended", onEnded);
v.removeEventListener("pause", onPause);
card.removeEventListener("mouseenter", start);
card.removeEventListener("mouseleave", stop);
card.removeEventListener("focus", start);
card.removeEventListener("blur", stop);
};
}, [key]);
return (
);
};
/* ── Buy now ──────────────────────────────────────────────────────
One CTA in three places (client, 3 Nov): the project hero, the home
page's project cards and the projects index cards. `BuyNowInner` is
the markup, so the hero can put it in a