/* global React */
// CSDA Brand Mark — recreates the puzzle-piece "C" from the logo as inline SVG.
// Pieces: blue (top-left), cyan (top), green (right), yellow (bottom-right),
// orange (bottom), red (bottom-left), pink (left)
// Rendered around a center void shaped like "C", with the inner "CSDA" letters.
function CSDAMark({ size = 80, showLetters = true, monochrome = null }) {
const colors = monochrome
? { blue: monochrome, cyan: monochrome, green: monochrome, yellow: monochrome,
orange: monochrome, red: monochrome, pink: monochrome, navy: monochrome }
: {
blue: "#1F8FD2",
cyan: "#1FB7C9",
green: "#34B85F",
yellow: "#F4C518",
orange: "#F08C2E",
red: "#E0382C",
pink: "#E94C8A",
navy: "#14315B",
};
// Build a ring of 7 puzzle-piece sectors, leaving a gap on the right (the "C" opening)
const cx = 100, cy = 100, R = 92, r = 38;
// Sector definitions: [startAngleDeg, endAngleDeg, color]
// C-opening on the right: gap from -22deg to +22deg
// 7 pieces split across the remaining 316° => ~45° each
const gap = 22;
const sectors = [
{ color: colors.cyan, from: -gap - 45 * 1, to: -gap - 45 * 0 }, // top-right
{ color: colors.blue, from: -gap - 45 * 2, to: -gap - 45 * 1 }, // top
{ color: colors.purple || "#6E5CB6", from: -gap - 45 * 3, to: -gap - 45 * 2 }, // top-left (we'll re-color)
{ color: colors.pink, from: -gap - 45 * 4, to: -gap - 45 * 3 }, // left
{ color: colors.red, from: -gap - 45 * 5, to: -gap - 45 * 4 }, // bottom-left
{ color: colors.orange, from: -gap - 45 * 6, to: -gap - 45 * 5 }, // bottom
{ color: colors.yellow, from: -gap - 45 * 7, to: -gap - 45 * 6 }, // bottom-right
];
// Override with the brand's actual order (blue→cyan→green→yellow→orange→red→pink top to bottom)
// From original logo: top-left blue, top cyan, top-right green, right (none — gap),
// bottom-right yellow, bottom orange, bottom-left red, left pink
const ringColors = [colors.cyan, colors.blue, colors.pink, colors.red, colors.orange, colors.yellow, colors.green];
function polar(angleDeg, radius) {
const a = (angleDeg * Math.PI) / 180;
return [cx + Math.cos(a) * radius, cy + Math.sin(a) * radius];
}
function sectorPath(fromDeg, toDeg) {
const [x1, y1] = polar(fromDeg, R);
const [x2, y2] = polar(toDeg, R);
const [x3, y3] = polar(toDeg, r);
const [x4, y4] = polar(fromDeg, r);
const large = Math.abs(toDeg - fromDeg) > 180 ? 1 : 0;
return `M ${x1} ${y1} A ${R} ${R} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${r} ${r} 0 ${large} 0 ${x4} ${y4} Z`;
}
// Generate 7 sectors leaving a gap on the right (-gap to +gap)
const startAngle = gap; // first sector starts at +22°
const endAngle = 360 - gap; // last ends at 360 - 22 = 338°
const span = endAngle - startAngle; // 316°
const each = span / 7;
return (
);
}
// Tiny puzzle-piece icon (single piece — used as section accent)
function CSDAPuzzlePiece({ size = 24, color = "#E0382C" }) {
return (
);
}
// Animal silhouettes for the 個性分析 section (虎/ひつじ/こじか/ペガサスなど)
// Hand-tuned silhouettes — recognizable head-on portraits at 56px display size
function CSDAAnimal({ kind = "tiger", size = 64, color = "#14315B" }) {
const paths = {
// Tiger — round face, prominent ears, fang stripes
tiger: (
{/* ears */}
{/* face */}
{/* stripes (negative space via white) */}
{/* eyes */}
{/* snout */}
),
// Sheep — fluffy cloud-like wool with face front
sheep: (
{/* wool puffs around */}
{/* face oval */}
{/* ears flopping */}
{/* eyes */}
{/* nose */}
),
// Deer (こじか) — big head, large round eyes, small antler nubs, white belly
deer: (
{/* antler nubs */}
{/* ears */}
{/* body */}
{/* white spots */}
{/* eyes */}
{/* nose */}
),
// Pegasus — winged horse profile facing right
pegasus: (
{/* wing back */}
{/* head + body */}
{/* mane */}
{/* horn */}
{/* eye */}
{/* nostril */}
),
// Lion — big mane, face center
lion: (
{/* mane scallops */}
{/* face */}
{/* ears */}
{/* eyes */}
{/* nose */}
{/* whisker dots */}
),
// Cheetah — slim face, tear marks, ears up
cheetah: (
{/* ears */}
{/* head — long oval */}
{/* spots */}
{/* tear marks */}
{/* eyes */}
{/* nose */}
),
// Monkey — round head, big ears, face mask
monkey: (
{/* ears */}
{/* head */}
{/* face mask */}
{/* eyes */}
{/* nose dots */}
{/* mouth */}
),
// Koala — fluffy ears, big nose
koala: (
{/* ears */}
{/* head */}
{/* eyes */}
{/* big nose — signature feature */}
),
};
return (
);
}
// Arrow icon
function CSDAArrow({ size = 14, color = "currentColor" }) {
return (
);
}
// Plus / minus for accordions
function CSDAPlus({ open = false, size = 16, color = "currentColor" }) {
return (
);
}
Object.assign(window, { CSDAMark, CSDAPuzzlePiece, CSDAAnimal, CSDAArrow, CSDAPlus });