// Hero background: isometric city grid in LIGHT MODE
// Top faces: cream. Side faces: warm grey. Single amber route glows on top.
function HeroGrid({ accent = "#c98a2a", density = 18 }) {
const cols = density;
const rows = density;
const tileW = 56;
const tileH = 28;
const heightFor = (x, y) => {
const s = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
const r = s - Math.floor(s);
return 8 + Math.pow(r, 2.2) * 70;
};
const route = React.useMemo(() => {
const pts = [];
let x = 2, y = 14;
const moves = [
[3, 0], [0, -3], [4, 0], [0, -2], [2, 0], [0, -3], [3, 0], [0, -2], [2, 0], [0, -2]
];
pts.push([x, y]);
for (const [dx, dy] of moves) {
const steps = Math.max(Math.abs(dx), Math.abs(dy));
const sx = Math.sign(dx), sy = Math.sign(dy);
for (let i = 0; i < steps; i++) {
x += sx; y += sy;
pts.push([x, y]);
}
}
return pts;
}, []);
const project = (gx, gy, gz = 0) => {
const px = (gx - gy) * (tileW / 2);
const py = (gx + gy) * (tileH / 2) - gz;
return [px, py];
};
const blocks = [];
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
blocks.push({ x, y, h: heightFor(x, y) });
}
}
blocks.sort((a, b) => (a.x + a.y) - (b.x + b.y));
const routeSet = new Set(route.map(([x, y]) => `${x},${y}`));
const renderBlock = ({ x, y, h }) => {
const isRoute = routeSet.has(`${x},${y}`);
const [tx, ty] = project(x, y, h);
const [rx, ry] = project(x + 1, y, 0);
const [lx, ly] = project(x, y + 1, 0);
const [trx, tryy] = project(x + 1, y, h);
const [tlx, tlyy] = project(x, y + 1, h);
const [topR, topRy] = project(x + 1, y + 1, h);
const [botR, botRy] = project(x + 1, y + 1, 0);
// light-mode palette: warm off-whites and warm greys
const topFill = isRoute ? "#f6efe0" : "#ecebe5";
const leftFill = isRoute ? "#e8dcc0" : "#d6d2c5";
const rightFill = isRoute ? "#d4c399" : "#bdb8ab";
const edge = "#a39e92";
return (
);
};
const routePath = route.map(([gx, gy], i) => {
const h = heightFor(gx, gy) + 4;
const [px, py] = project(gx + 0.5, gy + 0.5, h);
return `${i === 0 ? "M" : "L"}${px},${py}`;
}).join(" ");
const minX = project(0, rows - 1)[0] - 40;
const maxX = project(cols - 1, 0)[0] + tileW + 40;
const width = maxX - minX;
const height = (cols + rows) * tileH / 2 + 200;
return (
);
}
window.HeroGrid = HeroGrid;