// icons.jsx — reusable SVG icons and brand glyphs for the ForestStore ad.
// Brand color palette from Arboreal Native
const FS = {
surface: '#fcf9f1',
surfaceLow: '#f6f3eb',
surfaceMid: '#f1eee6',
surfaceHigh: '#ebe8e0',
surfaceDeep: '#e5e2db',
ink: '#1c1c17',
inkSoft: '#414844',
outline: '#717974',
outlineLight: '#c1c8c3',
primary: '#000b06', // soil
primaryDark: '#00261a',
primaryMid: '#0f3d2e', // soil-deep
secondary: '#166c46',
sapling: '#a3f4c3', // sapling-mint
saplingDim: '#88d7a8',
inverseGreen: '#a8cfbc',
error: '#ba1a1a',
white: '#ffffff',
};
// ── Sapling: stylized 3-leaf sapling, the brand mark ────────────────────────
function Sapling({ size = 200, color = FS.primaryMid, accent = FS.sapling, progress = 1 }) {
// progress 0..1 controls how much has grown
const p = Math.max(0, Math.min(1, progress));
// Stem: 0..0.5 draws stem; 0.5..1 draws leaves
const stemP = Math.min(1, p / 0.5);
const leavesP = Math.max(0, (p - 0.45) / 0.55);
const stemY = 100 - 60 * stemP; // grows from 100 up to 40
return (
);
}
// ── Tree: a slightly fuller, taller version of the sapling ──────────────────
function Tree({ size = 220, color = FS.primaryMid, accent = FS.sapling, progress = 1 }) {
const p = Math.max(0, Math.min(1, progress));
// multiple layers of leaves grow in stages
const stem = Math.min(1, p / 0.4);
const layer1 = Math.max(0, Math.min(1, (p - 0.35) / 0.25));
const layer2 = Math.max(0, Math.min(1, (p - 0.55) / 0.25));
const layer3 = Math.max(0, Math.min(1, (p - 0.75) / 0.25));
return (
);
}
// ── Receipt / invoice glyph used in problem scene ───────────────────────────
function Receipt({ width = 220, height = 280, label = 'INVOICE', amount = 'LKR 150,000', subtitle = 'Setup fee', color = FS.ink, accent = FS.error }) {
return (
);
}
// ── Phone frame with a simple storefront screen ─────────────────────────────
function PhoneStorefront({ width = 360, height = 720, fillProgress = 1 }) {
const p = Math.max(0, Math.min(1, fillProgress));
return (
);
}
// ── Website storefront: browser window with a clean storefront page ─────────
function WebsiteStorefront({ width = 760, height = 880, fillProgress = 1 }) {
const p = Math.max(0, Math.min(1, fillProgress));
const W = width, H = height;
return (
);
}
function FeatureIcon({ kind, size = 28, color = FS.primaryMid }) {
const s = size;
switch (kind) {
case 'admin':
return (
);
case 'ai':
return (
);
case 'marketplace':
return (
);
case 'seo':
return (
);
case 'email':
return (
);
case 'inventory':
return (
);
case 'courier':
return (
);
case 'support':
return (
);
case 'app':
return (
);
case 'web':
return (
);
case 'check':
return (
);
default:
return null;
}
}
// ── Pill chip ────────────────────────────────────────────────────────────────
function Pill({ children, bg = FS.surfaceMid, color = FS.ink, mono = false, size = 14 }) {
return (
{children}
);
}
Object.assign(window, { FS, Sapling, Tree, Receipt, PhoneStorefront, WebsiteStorefront, FeatureIcon, Pill });