// Health / Agendamento — formulário de marcação de consulta const HealthPage = () => { const [step, setStep] = React.useState(1); const [data, setData] = React.useState({ motivo: 'Psicoterapia individual', profissional: 'qualquer', formato: 'presencial', primeiraVez: 'sim', nome: '', email: '', telefone: '', notas: '', slot: null }); const update = (k, v) => setData((d) => ({ ...d, [k]: v })); return (
); }; const StepCard = ({ n, title, body, meta, placeholder, tone }) => { const toneMap = { terracota: { bg: 'var(--terracota)', fg: 'var(--linho)', dot: 'var(--terra)' }, musgo: { bg: 'var(--musgo)', fg: 'var(--terra)', dot: 'var(--terra)' }, raizes: { bg: 'var(--raizes)', fg: 'var(--linho)', dot: 'var(--linho)' } }; const t = toneMap[tone] || toneMap.musgo; return (
{/* Image / placeholder block */}
{/* Subtle stripes */}
{/* Number tag */}
/passo {n}
{/* Big numeral */}
{n}
{/* Placeholder label */}
[ {placeholder} ] —
{/* Connector dot */}
{/* Text */}

{title}

{body}

{meta}
); }; const Row = ({ k, v }) =>
{k} {v}
; const Field = ({ label, children, hint }) =>
{children} {hint &&
{hint}
}
; const Pill = ({ active, onClick, children }) => ; const ESPECIALIDADES = [ { group: 'Psicologia', items: [ { v: 'Psicoterapia individual', d: 'Acompanhamento clínico individual · 85€' }, { v: 'Psicologia clínica', d: 'Avaliação e intervenção · 85€' }, { v: 'Terapia de casal', d: 'Sessões conjuntas · 85€' }, { v: 'Terapia familiar', d: 'Sessões conjuntas · 110€' }, { v: 'Check-Up Psicológico', d: 'Avaliação preventiva · 85€' }, { v: 'Psicologia do sono', d: 'Avaliação e intervenção · 85€' }, { v: 'Terapia de divórcio', d: 'Acompanhamento especializado · 85€' }, { v: 'Avaliação PHDA', d: 'Por sessão · 70€' }, { v: 'Aconselhamento parental', d: 'Sessão · 85€' }] }, { group: 'Medicina', items: [ { v: 'Psiquiatria — primeira consulta', d: 'Avaliação inicial · 120€' }, { v: 'Psiquiatria — seguimento', d: 'Consulta de seguimento · 120€' }, { v: 'Medicina Geral e Familiar Integrativa', d: 'Consulta · 110€' }] }, { group: 'Nutrição', items: [ { v: 'Nutrição — primeira consulta', d: 'Avaliação nutricional · 95€' }, { v: 'Nutrição — seguimento', d: 'Acompanhamento · 80€' }] }, { group: 'Coaching', items: [ { v: 'Coaching de Carreira', d: 'Sessão · 95€' }, { v: 'Coaching psicológico', d: 'Sessão · 85€' }] }, { group: 'Avaliações integradas', items: [ { v: 'Avaliação 360°', d: 'Avaliação integrada multidisciplinar' }] }]; const SpecialtySelect = ({ value, onChange }) => { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const onDoc = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);}; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [open]); const allItems = ESPECIALIDADES.flatMap((g) => g.items); const current = allItems.find((i) => i.v === value) || allItems[0]; return (
{open &&
{ESPECIALIDADES.map((g, gi) =>
{g.group}
{g.items.map((o) => { const selected = o.v === value; return ( ); })}
)}
}
); }; const Step1 = ({ data, update }) =>
update('motivo', v)} />
update('formato', 'presencial')}>📍 Presencial · Lisboa update('formato', 'online')}>🖥 Online · videochamada
update('primeiraVez', 'sim')}>Sim update('primeiraVez', 'nao')}>Não, sou paciente
{[ { v: 'qualquer', n: 'Próximo disponível' }, { v: 'Tiago Monteiro', n: 'Tiago Monteiro' }, { v: 'Sofia Almeida', n: 'Sofia Almeida' }, { v: 'Pedro Vasconcelos', n: 'Pedro Vasconcelos' }]. map((p) => update('profissional', p.v)}> {p.n} )}
; const Step2 = ({ data, update }) => { const days = ['Seg 28', 'Ter 29', 'Qua 30', 'Qui 01', 'Sex 02', 'Sáb 03', 'Dom 04']; const slots = { 'Seg 28': ['09:30', '14:00'], 'Ter 29': ['10:00', '11:30', '15:30', '17:00'], 'Qua 30': ['09:00', '14:30'], 'Qui 01': ['11:00', '16:00', '18:30'], 'Sex 02': ['09:30', '13:00', '15:00'], 'Sáb 03': ['10:00', '11:30'], 'Dom 04': [] }; return (
{days.map((d) =>
{d.split(' ')[0]}
{d.split(' ')[1]}
{slots[d].length === 0 ?
Fechado
: slots[d].map((t) => ) }
)}
); }; const Step3 = ({ data, update }) => { const inp = { width: '100%', padding: '14px 18px', background: 'var(--linho)', border: '1px solid rgba(54,21,7,.18)', borderRadius: 4, fontSize: 15, fontFamily: 'inherit', color: 'inherit' }; return (
update('nome', e.target.value)} />
update('email', e.target.value)} /> update('telefone', e.target.value)} />