// Apple Bank × Liquid Data — shared components
// Exposes globals at bottom for cross-file Babel scope sharing.
const { useState, useEffect, useRef, useMemo } = React;
/* ─────────── ICONS ─────────── */
function AppleIcon({ size = 64, animate = false, style }) {
// Hand-drawn editorial apple — red body, brown stem, single leaf
return (
{/* leaf */}
);
}
function AppleMark({ size = 20 }) {
return
);
}
function IconCheck({ size = 24, color = '#fff' }) {
return (
);
}
function IconSearch({ size = 18 }) {
return (
);
}
function IconShare({ size = 18 }) {
return (
);
}
function IconPhone({ size = 16 }) {
return (
);
}
function IconMail({ size = 16 }) {
return (
);
}
/* ─────────── ATOMS ─────────── */
function ProgressBar({ step, total = 8, label }) {
const pct = Math.max(4, Math.round((step / total) * 100));
return (
{label || `Step ${step} of ${total}`}
{Math.round((step / total) * 100)}%
);
}
function Button({ children, variant = 'primary', size = 'lg', onClick, full = true, icon, disabled }) {
const isPrimary = variant === 'primary';
const isGhost = variant === 'ghost';
const isOutline = variant === 'outline';
const pads = size === 'lg' ? '18px 28px' : size === 'md' ? '14px 22px' : '10px 18px';
const fs = size === 'lg' ? 17 : size === 'md' ? 15 : 14;
const base = {
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
width: full ? '100%' : 'auto',
padding: pads, fontSize: fs, fontWeight: 600, fontFamily: 'var(--ab-sans)',
borderRadius: 'var(--ab-r-pill)', border: 'none', cursor: 'pointer',
transition: 'transform .15s ease, box-shadow .2s ease, background .2s ease',
letterSpacing: '-0.005em', lineHeight: 1,
};
const variantStyles = isPrimary ? {
background: 'var(--ab-navy)', color: '#fff', boxShadow: 'var(--ab-shadow-btn)',
} : isOutline ? {
background: 'transparent', color: 'var(--ab-navy)', border: '1.5px solid var(--ab-navy)', boxShadow: 'none',
} : {
background: 'transparent', color: 'var(--ab-ink)', boxShadow: 'none',
};
return (
isPrimary && !disabled && (e.currentTarget.style.boxShadow = 'var(--ab-shadow-btn-hover)', e.currentTarget.style.transform = 'translateY(-1px)')}
onMouseLeave={(e) => isPrimary && !disabled && (e.currentTarget.style.boxShadow = 'var(--ab-shadow-btn)', e.currentTarget.style.transform = 'translateY(0)')}
>
{children}
{icon &&
);
}
function Chip({ children, selected, onClick, size = 'md', icon, disabled }) {
const pads = size === 'lg' ? '14px 18px' : '11px 16px';
const fs = size === 'lg' ? 15 : 14;
return (
{icon}{children}
);
}
function StatCard({ value, label, sub, accent = 'red' }) {
const c = accent === 'green' ? 'var(--ab-leaf)' : 'var(--ab-red)';
return (
{value}
{label}
{sub &&
{sub}
}
);
}
function GrandPrizeTile({ title, sub, label = 'Grand prize' }) {
return (
{/* apple silhouette behind */}
{label}
{title}
{sub &&
{sub}
}
{label}
{title}
{sub &&
{sub}
}
);
}
function Input({ value, onChange, placeholder, type = 'text', icon, suffix }) {
return (
e.currentTarget.style.borderColor = 'var(--ab-navy)'}
>
{icon && {icon} }
{suffix} }
);
}
/* ─────────── NYC SPOT ILLUSTRATIONS ─────────── *
Simple editorial line-work — New Yorker spot style.
Used as recurring visual anchors. */
function NYCStoop({ width = 320, height = 180, accent = false }) {
return (
)))}
{/* stoop steps */}
);
}
function NYCSubwayTile({ width = 320, height = 90 }) {
// subway tile pattern with apple bank red sign
return (
1
);
}
function ConfettiBurst() {
const bits = Array.from({ length: 18 }, (_, i) => ({
x: (i * 37) % 280 + 20,
y: (i * 23) % 80 + 10,
rot: i * 23,
color: ['var(--ab-red)', 'var(--ab-leaf)', 'var(--ab-stem)', '#E8B86A'][i % 4],
w: 6 + (i % 3) * 2,
}));
return (
{bits.map((b, i) => (
);
}
/* ─────────── DANCING CAN HERO (mobile S1) ─────────── */
function AppleDropHero({ animated = true, canSize = 220, height = 300 }) {
// Sparkle positions — small marks that fly outward around the dancing can
const sparkles = [
{ x: -40, y: -10, sx: -50, sy: -60, delay: 0.0, color: 'var(--ab-red)' },
{ x: 38, y: 20, sx: 60, sy: -40, delay: 0.6, color: 'var(--ab-leaf)' },
{ x: -32, y: 80, sx: -70, sy: -20, delay: 1.2, color: 'var(--ab-red)' },
{ x: 44, y: 110, sx: 80, sy: -30, delay: 1.8, color: 'var(--ab-stem)' },
{ x: 0, y: -20, sx: 10, sy: -80, delay: 2.4, color: 'var(--ab-red)' },
];
return (
{/* sparkles */}
{animated && sparkles.map((s, i) => (
))}
{/* shadow ellipse */}
{/* dancing can — single animation, no drop-in (so it renders at rest if hidden) */}
{/* status bar */}
9:41
{/* dynamic island */}
{/* signal */}
{/* content area */}
{children}
{label && (
{label}
)}
);
}
/* ─────────── SCREEN SHELL ─────────── *
Standard padded scrollable column with optional progress + footer. */
function ScreenShell({ step, label, children, footer, bg = 'var(--ab-cream)' }) {
return (
{step !== undefined && (
)}
{children}
{footer && (
{footer}
)}
