/* global React */
// Hand-drawn illustration accents for the Garden direction.
// All SVG, all hand-feel: imperfect lines, organic curves.
const Sprout = ({ size = 80, color = "var(--sprout)", accent = "var(--sun)" }) => (
);
const Sun = ({ size = 80, color = "var(--sun)" }) => (
);
const House = ({ size = 80, color = "var(--sprout)" }) => (
);
const Heart = ({ size = 80, color = "var(--sun)" }) => (
);
const Compass = ({ size = 80, color = "var(--sprout)", accent = "var(--sun)" }) => (
);
const Book = ({ size = 80, color = "var(--sprout)", accent = "var(--sun)" }) => (
);
const Hands = ({ size = 80, color = "var(--sprout)" }) => (
);
// A border of small hand-drawn marks — for section breaks
const GardenStrip = ({ width = 800, color = "var(--sprout-2)" }) => {
const items = [];
const step = 60;
const count = Math.floor(width / step);
for (let i = 0; i < count; i++) {
const x = i * step + 30;
const variant = i % 4;
if (variant === 0) {
items.push(
);
} else if (variant === 1) {
items.push();
} else if (variant === 2) {
items.push(
);
} else {
items.push(
);
}
}
return (
);
};
// Ground line — horizontal undulating line, suggests landscape
const GroundLine = ({ width = 800, color = "var(--sprout-2)" }) => {
let d = `M 0 12`;
const segs = Math.floor(width / 40);
for (let i = 1; i <= segs; i++) {
const x = (width / segs) * i;
const y = 12 + (i % 2 === 0 ? -3 : 3);
d += ` Q ${x - width / segs / 2} ${y} ${x} 12`;
}
return (
);
};
// Hero scene — a small garden in a row
const GardenScene = ({ width = 560, height = 240 }) => (
);
window.GardenIllos = { Sprout, Sun, House, Heart, Compass, Hands, Book, GardenStrip, GroundLine, GardenScene };