// OutfitAI landing — the interactive linear experience: add clothes → generate → try on. const { Button, Chip, SectionHeader, Icon, PageDots, useBreakpoint } = window; const XIMG = (n) => `./assets/images/demo/${n}`; const LATENCY = 1000; // simulated generate/try-on delay const CLOSET = [ { id: 'blue', name: 'Navy Shirt', brand: 'Uniqlo', img: XIMG('cut-item-blue-shirt.png') }, { id: 'striped', name: 'Striped White Shirt', brand: 'Charles Tyrwhitt', img: XIMG('cut-item-striped-shirt.png') }, { id: 'polo', name: 'Burgundy Knit Polo', brand: 'COS', img: XIMG('cut-item-burgundy-polo.png') }, { id: 'beige', name: 'Beige Chinos', brand: 'Dockers', img: XIMG('cut-item-beige-chinos.png') }, { id: 'offwhite', name: 'Off-White Chinos', brand: 'J.Crew', img: XIMG('cut-item-offwhite-chinos.png') }, { id: 'black-tr', name: 'Black Trousers', brand: 'Theory', img: XIMG('cut-item-black-trousers.png') }, { id: 'white-sh', name: 'White Sneakers', brand: 'Common Projects', img: XIMG('cut-item-white-shoes.png') }, { id: 'black-sh', name: 'Black Loafers', brand: 'Meermin', img: XIMG('cut-item-black-shoes.png') }, { id: 'brown-sh', name: 'Brown Loafers', brand: 'Meermin', img: XIMG('cut-item-brown-shoes.png') }, ]; const OUTFITS = [ { flat: XIMG('outfit-smart-casual.png'), tryon: XIMG('cut-model-casual.png'), title: 'Smart Casual', pieces: ['Navy Shirt', 'Beige Chinos', 'White Sneakers'], why: 'Mild and sunny — breathable cotton, sleeves ready to roll, nothing that fights the weather.', }, { flat: XIMG('outfit-work.png'), tryon: XIMG('cut-model-work.png'), title: 'The Work Fit', pieces: ['Striped White Shirt', 'Black Trousers', 'Black Loafers'], why: 'Meetings till six — crisp stripes and black leather read sharp without a jacket.', }, { flat: XIMG('outfit-party.png'), tryon: XIMG('cut-model-party.png'), title: 'Party Wear', pieces: ['Burgundy Knit Polo', 'Off-White Chinos', 'Brown Loafers'], why: 'Dinner on the calendar — the knit polo dresses up while the chinos keep it easy.', }, ]; function StepHeader({ n, eyebrow, title, done }) { const { mobile } = useBreakpoint(); return (
{done ? : `0${n}`}
{eyebrow}
{title}
); } function ItemCard({ item, added, onToggle }) { const { mobile } = useBreakpoint(); return ( ); } function Stage({ children, height = 380 }) { return (
{children}
); } function Thinking({ label }) { return (
{label}
); } function Experience() { const { tablet, mobile, narrow } = useBreakpoint(); const indent = mobile ? 0 : 60; // §14: step content loses its indent on mobile const stage = mobile ? 280 : 340; const [added, setAdded] = React.useState([]); const [revealed, setRevealed] = React.useState(0); // how many outfits generated const [current, setCurrent] = React.useState(0); // outfit in view const [generating, setGenerating] = React.useState(false); const [tried, setTried] = React.useState([]); // outfit indexes tried on const [trying, setTrying] = React.useState(false); const allAdded = added.length === CLOSET.length; const toggle = (id) => setAdded((a) => a.includes(id) ? a.filter((x) => x !== id) : [...a, id]); // Start the fetch on click, not when the mounts — the spinner then covers the download. const preload = (src) => { new Image().src = src; }; const generate = () => { if (generating || revealed >= OUTFITS.length) return; preload(OUTFITS[revealed].flat); setGenerating(true); setTimeout(() => { setCurrent(revealed); setRevealed(revealed + 1); setGenerating(false); }, LATENCY); }; const tryOn = () => { if (trying || tried.includes(current)) return; preload(OUTFITS[current].tryon); setTrying(true); setTimeout(() => { setTried((t) => [...t, current]); setTrying(false); }, LATENCY); }; const outfit = revealed > 0 ? OUTFITS[current] : null; return (
{/* ── Step 1: add clothes ── */}

Your closet, catalogued. Tap the pieces to add them — nine pieces are enough for a week of looks.

{/* minmax(0,…) not 1fr: a bare 1fr track keeps its content's min-content width and overflows. */}
{CLOSET.map((it) => toggle(it.id)} />)}
{/* ── Step 2 + 3: generate & try on ── */}
= OUTFITS.length} />

{allAdded ? 'Your stylist reads the weather and your day, then builds looks from what you own.' : 'Add your clothes first — your stylist works only with what you own.'}

{/* The look */}
{generating ? : outfit ? {outfit.title} : Your first look lands here} {outfit && !generating && (
)}
{outfit && !generating ? (
{outfit.title}
{outfit.pieces.map((p) => )}

{outfit.why}

) : (
{generating ? 'Reading the weather, checking your day…' : 'Nothing generated yet'}
)}
)}
{/* The try-on */}
{trying ? : outfit && tried.includes(current) ? {`${outfit.title} : (
{outfit ? 'See it on a body, not a bed' : 'Generate a look first'}
)} {outfit && tried.includes(current) && !trying && (
)}

{tried.includes(current) && outfit ? 'That settles it — hang it back or wear it out.' : 'One tap shows the whole look on your photo before you commit.'}

); } window.OufyExperience = Experience;