// illustrations.jsx — Bold, chunky SVG illustrations + iconography.
// All shapes use currentColor for "ink" stroke + named CSS vars for fills.
/* ───────────── HERO ───────────── */
function HeroIllustration() {
return (
);
}
/* ───────────── PROFILE ICONS (5 yetkinlik) ───────────── */
function ProfileIcon({ name, color = 'var(--coral)' }) {
const stroke = { fill: 'none', stroke: 'var(--line)', strokeWidth: 2.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
const inner = { fill: color, stroke: 'var(--line)', strokeWidth: 2.5, strokeLinejoin: 'round' };
switch (name) {
case 'compass':return (
);
case 'wrench':return (
);
case 'magnifier':return (
);
case 'scales':return (
);
case 'spark':return (
);
default:return null;
}
}
/* ───────────── SAFETY ICONS ───────────── */
function SafetyIcon({ name }) {
const s = { fill: 'none', stroke: 'var(--line)', strokeWidth: 2.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
switch (name) {
case 'shield':return (
);
case 'lock':return (
);
case 'compass':return (
);
case 'heart':return (
);
case 'sparkle':return (
);
case 'cup':return (
);
default:return null;
}
}
/* ───────────── Pentagonal "Five Big Ideas" diagram ───────────── */
function PentagonDiagram({ items, onSelect, active }) {
// 5 nodes around pentagon vertices, all connected
const cx = 280,cy = 280,R = 200;
const nodes = items.map((it, i) => {
const a = -Math.PI / 2 + i * 2 * Math.PI / 5;
return { ...it, x: cx + R * Math.cos(a), y: cy + R * Math.sin(a) };
});
const colorVar = (c) => `var(--${c})`;
return (
);
}
/* ───────────── Logo ───────────── */
function Logo({ size = 36 }) {
return (
FutureLabs - AI Creators
);
}
/* ───────────── Squiggle / decorations ───────────── */
function Squiggle({ color = 'var(--sun)', w = 120, h = 14 }) {
return (
);
}
function StarBurst({ color = 'var(--sun)', size = 28 }) {
return (
);
}
Object.assign(window, { HeroIllustration, ProfileIcon, SafetyIcon, PentagonDiagram, Logo, Squiggle, StarBurst });