/* atelier onboarding — question data, icons, shared atoms */
// ─── Quiz definition ───────────────────────────────────────
const QUESTIONS = [
{
id: 'style',
type: 'multi',
title: 'Which best describe your style?',
sub: 'Pick as many as feel right.',
options: ['Minimalist', 'Smart Casual', 'Streetwear', 'Classic', 'Sporty', 'Preppy', 'Formal', 'Outdoor'],
},
{
id: 'fit',
type: 'multi',
title: 'How do you like things to fit?',
sub: 'However you actually wear them.',
options: ['Tailored', 'Relaxed', 'Oversized', 'Slim'],
},
{
id: 'colors',
type: 'color',
title: 'What colours fill your closet?',
sub: 'The shades you reach for most.',
options: [
{ label: 'Black', hex: '#15140F' },
{ label: 'White', hex: '#F6F4EE' },
{ label: 'Navy', hex: '#1F2A3C' },
{ label: 'Camel', hex: '#C19A6B' },
{ label: 'Olive', hex: '#5C5F3F' },
{ label: 'Brown', hex: '#5A3D29' },
{ label: 'Grey', hex: '#9A988F' },
{ label: 'Cream', hex: '#E8DEC8' },
],
},
{
id: 'painPoint',
type: 'single',
title: "What's the worst part of shopping online today?",
sub: 'Be honest — this shapes what we build.',
options: [
{ value: '20+ tabs open', glyph: '⌥' },
{ value: 'Screenshots everywhere', glyph: '◳' },
{ value: 'Wishlists scattered across sites', glyph: '⁂' },
{ value: "Never sure it'll go together", glyph: '?' },
],
},
{
id: 'firstFeature',
type: 'single',
title: 'Which feature would you use first?',
sub: 'Your vote moves it up our list.',
options: [
{ value: 'Outfit builder', glyph: '▦' },
{ value: 'AI recommendations', glyph: '✦' },
{ value: 'Shop everything in one tap', glyph: '⊕' },
{ value: "Follow others' wardrobes", glyph: '◎' },
],
},
];
const COLOR_MAP = QUESTIONS.find(q => q.id === 'colors')
.options.reduce((m, o) => (m[o.label] = o.hex, m), {});
// ─── Icons ──────────────────────────────────────────────────
const Icon = {
arrow: () => (
),
back: () => (
),
close: () => (
),
check: () => (
),
tick: () => (
),
copy: () => (
),
spark: () => (
),
google: () => (
),
apple: () => (
),
};
// ─── Small atoms ───────────────────────────────────────────
function Mark() {
return (
a.
atelier.
);
}
function PrimaryButton({ children, onClick, disabled, type = 'button' }) {
return (
);
}
Object.assign(window, { QUESTIONS, COLOR_MAP, Icon, Mark, PrimaryButton });