/* Shared SVG visuals for Liquid Data */
/* ---------- Block C with Gamecock head — official asset ---------- */
function BlockC({ size = 200, tone = 'garnet', className = '' }) {
// tone="white" inverts the logo for use on dark/garnet backgrounds.
// Other tones use the official asset as-is.
const filter = tone === 'white' ? 'brightness(0) invert(1)' : 'none';
return (
);
}
/* ---------- University of South Carolina formal wordmark ---------- */
function SCWordmark({ height = 48, tone = 'color', className = '' }) {
// 2400 × 651 — aspect ratio ~3.69:1
const width = height * (2400 / 651);
const filter = tone === 'white' ? 'brightness(0) invert(1)' : 'none';
return (
);
}
/* ---------- Wordmark: GAMECOCKS / South Carolina ---------- */
function Wordmark({ small = false, light = false }) {
return (
);
}
/* ---------- The Custom Can — real product photo ---------- */
function CustomCan({ width = 280, rotate = 0, condensation, showQR, uid }) {
// Subtle Y-axis tilt for scroll-based motion
const r = Math.max(-32, Math.min(32, rotate || 0));
// Real can asset is 1024×1536 (2:3 portrait aspect)
const height = width * (1536 / 1024);
return (
);
}
/* ---------- QR code pattern (decorative) ---------- */
function QRPattern({ x = 0, y = 0, size = 60 }) {
// simple deterministic pattern of squares — looks like a QR code
const cells = 17;
const cell = size / cells;
const dots = [];
// seed pattern
const seed = [
"11111110011111111",
"10000010101000001",
"10111010110101101",
"10111010001011101",
"10111010111010101",
"10000010010011001",
"11111110101010111",
"00000000111000000",
"10110101010110110",
"01001110011001011",
"11010001100101100",
"00100110010111011",
"11111110101011010",
"10000010100010110",
"10111010111110011",
"10111010001001100",
"11111110110110110",
];
for (let r = 0; r < cells; r++) {
for (let c = 0; c < cells; c++) {
if (seed[r][c] === '1') {
dots.push();
}
}
}
return {dots};
}
/* ---------- Welcome Kit — gift box, slightly open ---------- */
function WelcomeKit({ width = 520 }) {
const h = width * 0.78;
return (
);
}
function CanMini() {
// A simplified can used inside the welcome kit (already scaled by parent)
return (
);
}
/* ---------- South Carolina state map ---------- */
function SCStateMap({ height = 360 }) {
// Approximate South Carolina outline — viewBox 640×400
// Anchored: NW corner (Oconee), N border with NC, NE Pee Dee, E coast, S Savannah River
const scPath = `
M 70 142
C 100 116, 150 96, 210 92
C 270 90, 330 88, 388 92
C 430 96, 470 108, 502 130
C 522 144, 540 168, 552 192
C 558 208, 562 222, 562 232
L 552 244
C 540 256, 520 268, 498 278
C 470 290, 440 298, 408 302
C 376 304, 346 304, 320 300
C 290 292, 262 280, 240 264
C 218 248, 198 230, 178 212
C 158 194, 138 178, 118 164
C 100 154, 84 148, 70 142
Z
`;
// Major cities with scan activity (x, y, intensity 1-5)
const cities = [
{ name: 'GREENVILLE', x: 158, y: 138, hits: 4, dx: 0, dy: -10, anchor: 'middle' },
{ name: 'SPARTANBURG', x: 198, y: 124, hits: 3, dx: 0, dy: -10, anchor: 'middle' },
{ name: 'ROCK HILL', x: 280, y: 110, hits: 3, dx: 0, dy: -10, anchor: 'middle' },
{ name: 'COLUMBIA', x: 314, y: 196, hits: 5, dx: 0, dy: 16, anchor: 'middle' },
{ name: 'FLORENCE', x: 416, y: 168, hits: 3, dx: 0, dy: -10, anchor: 'middle' },
{ name: 'MYRTLE BEACH', x: 510, y: 198, hits: 4, dx: 14, dy: 0, anchor: 'start' },
{ name: 'CHARLESTON', x: 432, y: 268, hits: 5, dx: 0, dy: 16, anchor: 'middle' },
{ name: 'HILTON HEAD', x: 348, y: 296, hits: 3, dx: 0, dy: 16, anchor: 'middle' },
{ name: 'AIKEN', x: 230, y: 240, hits: 2, dx: -10, dy: 4, anchor: 'end' },
];
// Random-feeling but deterministic scan dots
const scanDots = React.useMemo(() => {
const dots = [];
const seed = (i) => Math.sin(i * 12.9898 + 78.233) * 43758.5453;
const frac = (x) => x - Math.floor(x);
for (const c of cities) {
const count = c.hits * 6;
for (let i = 0; i < count; i++) {
const a = frac(seed(c.x + i)) * Math.PI * 2;
const r = frac(seed(c.x + i + 1000)) * (10 + c.hits * 2.5);
dots.push({
x: c.x + Math.cos(a) * r,
y: c.y + Math.sin(a) * r,
rad: 0.6 + frac(seed(c.x + i + 500)) * 1.4,
op: 0.35 + frac(seed(c.x + i + 200)) * 0.55,
});
}
}
// sprinkle a few random dots in the state
for (let i = 0; i < 60; i++) {
const x = 90 + frac(seed(i * 7)) * 460;
const y = 110 + frac(seed(i * 11)) * 180;
dots.push({ x, y, rad: 0.4 + frac(seed(i * 13)) * 0.8, op: 0.15 + frac(seed(i * 17)) * 0.3 });
}
return dots;
}, []);
return (
);
}
/* ---------- Phone (iPhone) mock for QR landing ---------- */
function PhoneMock({ width = 220 }) {
const h = width * 2.1;
return (
);
}
/* ---------- Small inline icons ---------- */
const Icon = {
Pipeline: ({size=22}) => (
),
Revenue: ({size=22}) => (
),
People: ({size=22}) => (
),
Data: ({size=22}) => (
),
Arrow: ({size=14}) => (
),
};
/* ---------- Sparkline ---------- */
function Sparkline({ data, color = '#73000A', width = 90, height = 28 }) {
if (!data || !data.length) return null;
const min = Math.min(...data);
const max = Math.max(...data);
const rng = max - min || 1;
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * width;
const y = height - ((v - min) / rng) * height * 0.9 - height * 0.05;
return `${x.toFixed(1)},${y.toFixed(1)}`;
});
return (
);
}
/* Expose to global */
Object.assign(window, {
BlockC, SCWordmark, Wordmark, CustomCan, WelcomeKit, QRPattern, SCStateMap, PhoneMock, Icon, Sparkline
});
