// Cleo Care — mobile app screens. Faithful recreation of the real app surfaces, // composed from the design-system primitives in the bundle. const { Button, Badge, Avatar, Card, SearchInput, SegmentedControl, AppBar, ProgressBar, Checkbox } = window.CleoCareDesignSystem_387d4e; const D = window.CLEO_DATA; const ICON = (n) => `../assets/icons/${n}.svg`; const PNG = (n) => `../assets/icons/${n}.png`; // ── shared bits ────────────────────────────────────────────── function HomeHeader() { // Matches the real AppBar: pearlWhisper, avatar left, Cleo-AI + bell (badge) right. return (
{D.unread > 0 && ( {D.unread} )}
); } const MoonIcon = () => ( ); function Stars({ note }) { return ( {note} ); } // Routine task row — pill-shaped; pink when overdue (bell), empty circle, product avatar, chevron-circle. function TaskRow({ task, onToggle }) { const overdue = task.pastDue && !task.done; return (
{overdue && ( )} {task.name}
); } function RoutineCard({ routine }) { const [tasks, setTasks] = React.useState(routine.tasks); const done = tasks.filter(t=>t.done).length; const toggle = (id)=> setTasks(ts=>ts.map(t=>t.id===id?{...t,done:!t.done}:t)); const allDone = done === tasks.length; return (
{routine.title}
{routine.period}
{done}/{tasks.length} tâches
{tasks.map(t => toggle(t.id)} />)}
{!allDone && (
)} ); } function SuggestionCard({ s, onOpen }) { return (
{s.title}
{s.creator}
); } // ── Home ───────────────────────────────────────────────────── function HomeScreen() { return (

Tes routines ☀️

{D.routines.map(r => )}

Routines suggérées

{D.suggestions.map(s => )}
Cleo Care
Prenez soin de vous
); } // ── Essentiels (Mes produits) ──────────────────────────────── function ProductTile({ p, onOpen }) { const [liked, setLiked] = React.useState(!!p.liked); return (
onOpen?.(p)} style={{ cursor:'pointer', background:'var(--cleo-white)', borderRadius:'var(--radius-3xl)', boxShadow:'var(--shadow-card)', overflow:'hidden' }}>
{p.marque}
{p.nom}
); } function EssentialsScreen({ onOpenProduct }) { const [q, setQ] = React.useState(''); const match = (p) => !q || (p.nom + p.marque).toLowerCase().includes(q.toLowerCase()); const liked = D.essentials.filter(p => p.liked && match(p)); const others = D.essentials.filter(p => !p.liked && match(p)); const Section = ({ title, items }) => items.length === 0 ? null : (

{title}

{items.map(p => )}
); return (
setQ(e.target.value)} onClear={()=>setQ('')} placeholder="Rechercher" />
{liked.length===0 && others.length===0 && (
Aucun produit trouvé
)}
); } // ── Routines (calendrier + filtres période) ────────────────── function RoutinesScreen() { const [period, setPeriod] = React.useState('all'); const [sel, setSel] = React.useState(19); const dows = ['L','M','M','J','V','S','D']; // June 2026 starts on a Monday const days = Array.from({ length: 30 }, (_, i) => i + 1); const dots = { 5:'m', 12:'b', 19:'m', 20:'e', 26:'b' }; // m=matin e=soir b=both const Filter = ({ k, label, icon }) => { const on = period === k; return ( ); }; const sun = (c) => ; const moon = (c) => ; const both = (c) => ; return (
juin 2026
{dows.map((d,i) =>
{d}
)}
{days.map(d => { const on = d === sel; const dot = dots[d]; return ( ); })}

Tes routines ☀️

{D.routines.map(r => )}
); } // ── Boutique (bientôt disponible) ──────────────────────────── function BoutiqueScreen({ onHome }) { return (

Bientôt disponible !

Notre boutique sera disponible dans une prochaine mise à jour avec une sélection de produits soigneusement choisis pour vous.

Cleo Care
); } // ── Product (scan result / detail) ────────────────────────── function ProductScreen({ product, onBack }) { const ingredients = ['Acide hyaluronique', 'Glycérine', 'Niacinamide', 'Panthénol']; return (
} />
{product.marque}

{product.nom}

Composition

{ingredients.map(i => )}
); } // ── Profile ───────────────────────────────────────────────── function ProfileScreen() { const [notif, setNotif] = React.useState(true); const [dark, setDark] = React.useState(false); const { Switch } = window.CleoCareDesignSystem_387d4e; const Row = ({ icon, label, control }) => (
{label} {control || }
); return (
{D.user.name} Mbarga
{D.user.skin} · membre depuis 2024
{[['12','Produits'],['3','Routines'],['28','Jours']].map(([n,l]) => (
{n}
{l}
 ))}

Préférences

} /> } />
); } Object.assign(window, { HomeScreen, EssentialsScreen, RoutinesScreen, BoutiqueScreen, ProfileScreen, ProductScreen });