// mockups.jsx — fake product mockups in HTML/CSS // Small inline SVG icons (Lucide-style strokes) const Icons = { cal: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, stethoscope: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, people: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, coin: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, megaphone: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, register: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, globe: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, phone: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, spark: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, bolt: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, shield: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, layers: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, pawprint: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, search: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, book: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, code: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, mail: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, chat: (p={}) => { const s = typeof p === "object" ? (p.size || 20) : p; return (); }, arrow: (p={}) => { const s = typeof p === "object" ? (p.size || 14) : p; return (); }, check: (p={}) => { const s = typeof p === "object" ? (p.size || 14) : p; return (); }, plus: (p={}) => { const s = typeof p === "object" ? (p.size || 14) : p; return (); }, }; // ── Brand mark / logo ── function ZoeeMark({ size = 30 }) { return (

); } // ── Hero dashboard mockup ── function HeroMockup() { return (

🔒app.zoee.pet/dashboard

{tx('Good morning, Dr. Reis','Bom dia, Dra. Camila')}

{tx('Tue · May 14','terça · 14 mai')}

{tx('Today','Hoje')}

{tx('+2 vs yest.','+2 ontem')}

{tx('Week revenue','Receita semana')}

{tx('$18.4k','R$ 18,4k')}

{tx('+12.4%','+12,4%')}

{tx('Win-backs','Reativações')}

{tx('AI','IA')}

{tx('Luna · Golden 4y','Luna · Golden 4a')}{tx('V10 vaccine','Vacina V10')}

{tx('confirmed','confirmado')}

09:00

{tx('Thor · Bulldog 6y','Thor · Bulldog 6a')}{tx('Derm consult','Consulta dermato')}

{tx('unconfirmed','a confirmar')}

10:30

{tx('Mel · Mixed 2y','Mel · SRD 2a')}{tx('Bath + groom','Banho + tosa')}

{tx('checked in','na clínica')}

11:00

{tx('Bento · Persian 8y','Bento · Persa 8a')}{tx('Cardio follow-up','Retorno cardio')}

{tx('confirmed','confirmado')}

14:00

9:41●●● 5G

{tx('Hi, Julia','Olá, Júlia')} Luna · Thor · Mel

{tx('Luna 🐕 · Next visit','Luna 🐕 · Próxima consulta')}

{tx('Pata Feliz · Dr. Reis','Pata Feliz · Dra. Camila')}

{tx('Tomorrow 9:00','Amanhã 09:00')}{tx('V10 vaccine','vacina V10')}

{tx('V10 vaccine','Vacina V10')}{tx('Reminder tomorrow','Lembrete amanhã')}

{tx('Mel · Bath','Mel · Banho')}{tx('Saturday 11am','Sábado 11h')}

{tx('Thor · Rx','Thor · Receita')}{tx('Apoquel available','Apoquel disponível')}

{tx('1w','1s')}

); } // ── Cowork conversational mockup ── function CoworkMockup() { return (

{tx('/clinical','/clinica')}

/crm

{tx('/finance','/financeiro')}

+ tab

{tx('You','Você')}

{tx('List the 5 owners who haven\u2019t returned in over 90 days and draft a win-back message.','Liste os 5 tutores que não voltam há mais de 90 dias e gere mensagem de reativação.')}

Cowork

{tx('I found 47 lapsed owners. Here are the 5 with the highest lifetime value:','Encontrei 47 tutores inativos. Aqui estão os 5 com maior LTV histórico:')}

{tx('Owner · Pet','Tutor · Pet')}

{tx('Days','Dias')}

LTV

{tx('Julia · Luna 🐕','Júlia · Luna 🐕')}

118

{tx('$4.2k','R$ 4.2k')}

Pedro · Bento 🐈

104

{tx('$3.8k','R$ 3.8k')}

Renata · Mel 🐕

{tx('$2.9k','R$ 2.9k')}

{tx('tool.win_back_owners · created just now','tool.reativar_tutores · criada agora')}

{tx('Ask, request, automate…','Pergunte, peça, automatize...')}

claude

gpt-5

gemini

); } // ── Generic module mockup for module detail pages ── function ModuleMockup({ moduleId, color }) { const m = MODULE_LONG[moduleId]; if (!m) return null; return (

🔒app.zoee.pet/{moduleId}

{m.eyebrow}

{m.pitch}

{m.metrics.map((mt, i) => (

{mt.v}

{mt.l}

))}

{m.feats?.slice(0,5).map?.((f,i)=>(

{f}

)) || MODULES.find(x=>x.id===moduleId).feats.map((f,i)=>(

{f}

))}

); } Object.assign(window, { Icons, ZoeeMark, HeroMockup, CoworkMockup, ModuleMockup });