// 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 (
    <div style={{ background: 'var(--linho)', color: 'var(--terra)', width: 1440, minHeight: 1800 }}>
      <Nav theme="linho" currentArea="health" />

      {/* HERO */}
      <section style={{ padding: '80px 56px 60px', background: 'var(--musgo)', position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div className="eyebrow-mono" style={{ marginBottom: 20 }}>/01 — Health · Agendamento</div>
            <h1 className="display-serif" style={{ fontSize: 116, lineHeight: 0.92, letterSpacing: '-0.03em' }}>
              Marca a tua<br />
              <em style={{ color: 'var(--terra)' }}>primeira</em><br />
              consulta.
            </h1>
            <p className="body-lg" style={{ marginTop: 28, maxWidth: 480, opacity: 0.85 }}>Parabéns por este passo de priorizares ainda mais a tua saúde e bem-estar!

            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 32, fontSize: 13 }}>
              <div><span style={{ opacity: 0.6 }}>⏱</span> 50 min · 1ª consulta</div>
              <div><span style={{ opacity: 0.6 }}>€</span> Tabela acessível disponível</div>
              <div><span style={{ opacity: 0.6 }}>↻</span> Reembolso ADSE/seguros</div>
            </div>
          </div>
          <div style={{ position: 'relative', height: 460 }}>
          <div style={{ position: 'absolute', inset: 0, background: `url(assets/health-cabecalho.jpg) center/cover`, borderRadius: 4 }} />
          </div>
        </div>
      </section>

      {/* COMO FUNCIONA — 3 passos simples */}
      <section style={{ padding: '120px 56px 40px', background: 'var(--linho)' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <div className="eyebrow-mono" style={{ opacity: 0.6, marginBottom: 16 }}>Agenda a tua sessão em</div>
          <h2 className="display-serif" style={{ fontSize: 88, lineHeight: 0.95, letterSpacing: '-0.03em' }}>
            <em style={{ fontWeight: 300 }}>3 passos</em> simples.
          </h2>
          <p className="body-lg" style={{ marginTop: 20, maxWidth: 560, margin: '20px auto 0', opacity: 0.7 }}>
            Cada caminho clínico é único — por isso, antes de marcares, ajudamos-te a encontrar o profissional certo para ti.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, position: 'relative', maxWidth: 900, margin: '0 auto' }}>
          {/* Connector line */}
          <div style={{
            position: 'absolute', top: 110, left: '16.66%', right: '16.66%',
            height: 1, background: 'rgba(54,21,7,.18)', zIndex: 0
          }} />

          <StepCard
            n="01"
            title={<>Diz-nos<br />o que <em>procuras</em>.</>}
            body="Começa por preencher um breve formulário sobre o teu perfil, objetivos e preferências."
            meta="≈ 2 min · totalmente confidencial"
            placeholder="form · perfil"
            tone="terracota" />
          
          <StepCard
            n="02"
            title={<>Analisa o perfil<br /><em>sugerido</em>.</>}
            body="Em até 24h úteis, a direção clínica sugere-te o profissional (ou profissionais) que melhor se ajustam a ti."
            meta="95% das referenciações são bem-sucedidas"
            placeholder="direção clínica · análise"
            tone="musgo" />
          
          <StepCard
            n="03"
            title={<>It's a<br/><em>perfect match</em>.</>}
            body="Concordas com a sugestão? Em até 24h úteis, o profissional contacta-te para agendar a primeira sessão."
            meta="primeiro contacto direto · sem call-center"
            placeholder="primeira sessão"
            tone="raizes" />
          
        </div>

        <div style={{ marginTop: 80, padding: '32px 40px', border: '1px solid rgba(54,21,7,.18)', borderRadius: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32 }}>
          <div>
            <div className="eyebrow-mono" style={{ opacity: 0.6, marginBottom: 8 }}>PORQUÊ TÃO PERSONALIZADO?</div>
            <div className="display-serif" style={{ fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em', maxWidth: 720 }}>
              Não acreditamos em <em>matching</em> automático. A relação terapêutica começa com a escolha certa.
            </div>
          </div>
          <a className="btn btn-primary btn-arrow" href="#agendar" style={{ flexShrink: 0 }}>Começar agora</a>
        </div>
      </section>

      {/* FORM + SIDEBAR */}
      <section id="agendar" style={{ padding: '80px 56px 120px', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 60 }}>
        <div style={{ background: 'var(--linho-deep)', padding: 48, borderRadius: 4 }}>
          {/* Steps */}
          <div style={{ display: 'flex', gap: 0, marginBottom: 48 }}>
            {[
            { n: 1, l: 'Especialidade' },
            { n: 2, l: 'Disponibilidade' },
            { n: 3, l: 'Os teus dados' },
            { n: 4, l: 'Confirmação' }].
            map((s, i, arr) =>
            <div key={s.n} style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                width: 32, height: 32, borderRadius: 999,
                background: step >= s.n ? 'var(--terra)' : 'transparent',
                color: step >= s.n ? 'var(--linho)' : 'var(--terra)',
                border: step >= s.n ? 'none' : '1px solid rgba(54,21,7,.2)',
                display: 'grid', placeItems: 'center', fontSize: 13, fontFamily: 'var(--font-mono)',
                flexShrink: 0
              }}>{s.n}</div>
                <div style={{ flex: 1 }}>
                  <div className="eyebrow-mono" style={{ fontSize: 10, opacity: 0.55 }}>Passo {s.n}/4</div>
                  <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2, opacity: step === s.n ? 1 : 0.55 }}>{s.l}</div>
                </div>
                {i < arr.length - 1 && <div style={{ flex: 1, height: 1, background: 'rgba(54,21,7,.18)', marginRight: 12 }} />}
              </div>
            )}
          </div>

          {step === 1 && <Step1 data={data} update={update} />}
          {step === 2 && <Step2 data={data} update={update} />}
          {step === 3 && <Step3 data={data} update={update} />}
          {step === 4 && <Step4 data={data} />}

          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 48, paddingTop: 32, borderTop: '1px solid rgba(54,21,7,.12)' }}>
            <button
              onClick={() => setStep((s) => Math.max(1, s - 1))}
              style={{ fontSize: 14, opacity: step === 1 ? 0.3 : 0.7 }}
              disabled={step === 1}>
              ← Voltar</button>
            <button
              className="btn btn-primary btn-arrow"
              onClick={() => setStep((s) => Math.min(4, s + 1))}>
              {step === 4 ? 'Reservar consulta' : 'Continuar'}</button>
          </div>
        </div>

        {/* Sidebar */}
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
          <div style={{ padding: 28, background: 'var(--terra)', color: 'var(--linho)', borderRadius: 4 }}>
            <div className="eyebrow-mono" style={{ opacity: 0.6 }}>Resumo</div>
            <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
              <Row k="Especialidade" v={data.motivo} />
              <Row k="Profissional" v={data.profissional === 'qualquer' ? 'Próximo disponível' : data.profissional} />
              <Row k="Formato" v={data.formato === 'presencial' ? 'Presencial · Lisboa' : 'Online'} />
              <Row k="Primeira vez" v={data.primeiraVez === 'sim' ? 'Sim' : 'Não'} />
              {data.slot && <Row k="Data e hora" v={data.slot} />}
            </div>
            <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid rgba(246,244,233,.18)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
              <span className="eyebrow-mono" style={{ opacity: 0.6 }}>Total estimado</span>
              <span className="display-serif" style={{ fontSize: 36 }}>€75</span>
            </div>
          </div>

          <div style={{ padding: 24, border: '1px solid rgba(54,21,7,.18)', borderRadius: 4, fontSize: 13, lineHeight: 1.55 }}>
            <div className="eyebrow-mono" style={{ opacity: 0.6, marginBottom: 12 }}>Bom saber</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li>· Cancelamento gratuito até 24h antes.</li>
              <li>· Alguns seguros poderão dar lugar a reembolso.</li>
              <li>· Fatura dedutível para efeitos de IRS.</li>
              <li>· Acompanhamento em PT, EN ou ES.</li>
            </ul>
          </div>

          <div style={{ padding: 24, background: 'var(--musgo)', borderRadius: 4 }}>
            <div className="eyebrow-mono">Em urgência?</div>
            <div className="display-serif" style={{ fontSize: 22, marginTop: 8, lineHeight: 1.1 }}>
              Linha de apoio<br />24/7
            </div>
            <a className="btn btn-arrow" style={{ marginTop: 14, padding: '10px 16px', fontSize: 13, background: 'var(--terra)', color: 'var(--linho)' }}>808 24 24 24</a>
          </div>
        </aside>
      </section>

      {/* INFORMAÇÕES SOBRE AS CONSULTAS */}
      <section style={{ padding: '40px 56px 120px', background: 'var(--linho)' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <h2 className="display-serif" style={{ fontSize: 64, lineHeight: 1, letterSpacing: '-0.02em', fontStyle: 'italic', fontWeight: 300 }}>
            Informações sobre as consultas
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid rgba(54,21,7,.15)' }}>
          <InfoCell
            icon={<TeamIcon />}
            title="Equipa"
            border="right bottom">
            
            <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 300, fontSize: 15, lineHeight: 1.45, marginBottom: 14 }}>
              Coletivo de profissionais de saúde mental integrativa, reconhecidos pela Ordem dos Psicólogos Portugueses.
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.78 }}>
              Conjugação de orientações teóricas e ferramentas, como Terapia Cognitivo-Comportamental, Mindfulness, Terapia de Aceitação e do Compromisso, EMDR, IFS, Terapia Somática, Hipnose Clínica e Coaching Psicológico.
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.78, marginTop: 14 }}>
              Profissionais de outras áreas, como Nutrição e Medicina, são igualmente reconhecidos pelas respetivas Ordens.
            </p>
          </InfoCell>

          <InfoCell
            icon={<ClockIcon />}
            title="Horário e formato"
            border="right bottom">
            
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85, marginBottom: 14 }}>
              Consultas: segunda a sexta entre as 9h e as 21h e sábados entre as 9h e as 18h.
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85, marginBottom: 14 }}>
              Apoio ao cliente: segunda a sexta das 09h às 18h.
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85 }}>
              Formatos online, presencial (Lisboa e Porto) ou misto (intercalando sessões online com presenciais).
            </p>
          </InfoCell>

          <InfoCell
            icon={<HourglassIcon />}
            title="Duração"
            border="bottom">
            
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85, marginBottom: 14 }}>
              Sessões individuais: 50 a 60 minutos aprox.
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85 }}>
              Sessões conjuntas (ex. terapia de casal ou familiar): 1h15 a 1h30 aprox.
            </p>
          </InfoCell>

          <InfoCell
            icon={<HandIcon />}
            title="Investimento"
            border="right">
            
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, lineHeight: 1.5 }}>
              <li>Psicoterapia individual: <strong style={{ fontWeight: 500 }}>85€</strong></li>
              <li>Psicólogo clínico: <strong style={{ fontWeight: 500 }}>85€</strong></li>
              <li>Terapia casal: <strong style={{ fontWeight: 500 }}>85€</strong></li>
              <li>Terapia familiar: <strong style={{ fontWeight: 500 }}>110€</strong></li>
              <li>Check-Up Psicológico: <strong style={{ fontWeight: 500 }}>85€</strong></li>
              <li>Medicina Geral e Familiar Integrativa: <strong style={{ fontWeight: 500 }}>110€</strong></li>
              <li>Psiquiatria: Primeira – <strong style={{ fontWeight: 500 }}>120€</strong> / Seguimento – <strong style={{ fontWeight: 500 }}>120€</strong></li>
              <li>Nutrição (equipa interna): Primeira – <strong style={{ fontWeight: 500 }}>95€</strong> / Seguimento – <strong style={{ fontWeight: 500 }}>80€</strong></li>
              <li>Coaching de Carreira: <strong style={{ fontWeight: 500 }}>95€</strong></li>
              <li>Coaching psicológico: <strong style={{ fontWeight: 500 }}>85€</strong></li>
            </ul>
          </InfoCell>

          <InfoCell
            icon={<CoinIcon />}
            title="Investimento (cont.)"
            border="right">
            
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85, marginBottom: 12 }}>
              Avaliação PHDA: <strong style={{ fontWeight: 500 }}>70€</strong>/sessão
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85, marginBottom: 12 }}>
              Terapia de divórcio: <strong style={{ fontWeight: 500 }}>85€</strong>
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85, marginBottom: 12 }}>
              Psicologia do sono: <strong style={{ fontWeight: 500 }}>85€</strong>
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85, marginBottom: 18 }}>
              Aconselhamento parental: <strong style={{ fontWeight: 500 }}>85€</strong>
            </p>
            <p style={{ fontSize: 13, lineHeight: 1.55, opacity: 0.78, marginBottom: 14 }}>
              Bolsas de Responsabilidade Social: para situações específicas.
            </p>
            <p style={{ fontSize: 13, lineHeight: 1.55, opacity: 0.78 }}>
              Acompanhamos <strong style={{ fontWeight: 500 }}>adolescentes a partir dos 15/16 anos e adultos</strong> (jovens adultos, adultos e seniores).
            </p>
          </InfoCell>

          <InfoCell
            icon={<CalendarIcon />}
            title="Política de cancelamento"
            border="">
            
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85, marginBottom: 14 }}>
              Se não conseguires comparecer, pedimos-te que nos informes até 24h antes da sessão, para encontrarmos uma alternativa em conjunto.
            </p>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.85 }}>
              Na falta de aviso e/ou comparência à sessão agendada, esta será considerada como realizada e o valor da mesma será cobrado.
            </p>
          </InfoCell>
        </div>
      </section>

      <Footer theme="terra" />
    </div>);

};

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 (
    <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 24, zIndex: 1 }}>
      {/* Image / placeholder block */}
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 5',
        background: t.bg,
        color: t.fg,
        borderRadius: 4,
        overflow: 'hidden',
        display: 'grid',
        placeItems: 'center'
      }}>
        {/* Subtle stripes */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px)`,
          pointerEvents: 'none'
        }} />
        {/* Number tag */}
        <div style={{
          position: 'absolute', top: 24, left: 24,
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
          textTransform: 'uppercase', opacity: 0.85
        }}>
          /passo {n}
        </div>
        {/* Big numeral */}
        <div className="display-serif" style={{
          fontSize: 110, lineHeight: 1, letterSpacing: '-0.04em',
          fontStyle: 'italic', fontWeight: 300,
          textShadow: '0 1px 0 rgba(0,0,0,.04)'
        }}>
          {n}
        </div>
        {/* Placeholder label */}
        <div style={{
          position: 'absolute', bottom: 20, left: 24, right: 24,
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.12em',
          textTransform: 'uppercase', opacity: 0.7,
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline'
        }}>
          <span>[ {placeholder} ]</span>
          <span>—</span>
        </div>
      </div>

      {/* Connector dot */}
      <div style={{
        position: 'absolute', top: 102, left: '50%', transform: 'translateX(-50%)',
        width: 16, height: 16, borderRadius: 999,
        background: 'var(--linho)',
        border: `1px solid rgba(54,21,7,.25)`,
        zIndex: 2
      }}>
        <div style={{
          position: 'absolute', inset: 4, borderRadius: 999, background: 'var(--terra)'
        }} />
      </div>

      {/* Text */}
      <div style={{ paddingTop: 8 }}>
        <h3 className="display-serif" style={{ fontSize: 38, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
          {title}
        </h3>
        <p className="body" style={{ marginTop: 16, opacity: 0.75, maxWidth: 360 }}>
          {body}
        </p>
        <div className="eyebrow-mono" style={{
          marginTop: 20, paddingTop: 16, borderTop: '1px solid rgba(54,21,7,.15)',
          opacity: 0.65, fontSize: 10
        }}>
          {meta}
        </div>
      </div>
    </div>);

};

const Row = ({ k, v }) =>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
    <span style={{ opacity: 0.55 }}>{k}</span>
    <span style={{ fontWeight: 500 }}>{v}</span>
  </div>;


const Field = ({ label, children, hint }) =>
<div>
    <label className="eyebrow-mono" style={{ display: 'block', marginBottom: 10, opacity: 0.7, fontSize: 11 }}>{label}</label>
    {children}
    {hint && <div className="small" style={{ marginTop: 8, opacity: 0.55 }}>{hint}</div>}
  </div>;


const Pill = ({ active, onClick, children }) =>
<button onClick={onClick} style={{
  padding: '14px 20px',
  background: active ? 'var(--terra)' : 'var(--linho)',
  color: active ? 'var(--linho)' : 'var(--terra)',
  border: `1px solid ${active ? 'var(--terra)' : 'rgba(54,21,7,.2)'}`,
  borderRadius: 999,
  fontSize: 14,
  transition: 'all .15s ease'
}}>{children}</button>;


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 (
    <div ref={ref} style={{ position: 'relative' }}>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        style={{
          width: '100%', padding: '20px 22px',
          background: 'var(--linho)',
          border: `1px solid ${open ? 'var(--terra)' : 'rgba(54,21,7,.18)'}`,
          borderRadius: 4, textAlign: 'left',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
          transition: 'border-color .15s ease'
        }}>
        <div>
          <div className="display-serif" style={{ fontSize: 22, lineHeight: 1.1 }}>{current.v}</div>
          <div className="small" style={{ marginTop: 4, opacity: 0.65 }}>{current.d}</div>
        </div>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 14, opacity: 0.55,
          transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s ease'
        }}>▾</span>
      </button>

      {open &&
      <div style={{
        position: 'absolute', top: 'calc(100% + 6px)', left: 0, right: 0,
        background: 'var(--linho)',
        border: '1px solid rgba(54,21,7,.18)',
        borderRadius: 4,
        maxHeight: 380, overflowY: 'auto',
        zIndex: 50,
        boxShadow: '0 12px 40px -12px rgba(54,21,7,.25)'
      }}>
          {ESPECIALIDADES.map((g, gi) =>
        <div key={g.group}>
              <div className="eyebrow-mono" style={{
            padding: '14px 22px 8px',
            fontSize: 10, opacity: 0.55,
            borderTop: gi === 0 ? 'none' : '1px solid rgba(54,21,7,.08)'
          }}>
                {g.group}
              </div>
              {g.items.map((o) => {
            const selected = o.v === value;
            return (
              <button
                key={o.v}
                type="button"
                onClick={() => {onChange(o.v);setOpen(false);}}
                style={{
                  width: '100%', padding: '12px 22px', textAlign: 'left',
                  background: selected ? 'var(--linho-deep)' : 'transparent',
                  borderLeft: selected ? '3px solid var(--terra)' : '3px solid transparent',
                  transition: 'background .12s ease'
                }}
                onMouseEnter={(e) => {if (!selected) e.currentTarget.style.background = 'var(--linho-warm)';}}
                onMouseLeave={(e) => {if (!selected) e.currentTarget.style.background = 'transparent';}}>
                    <div style={{ fontSize: 15, fontWeight: selected ? 500 : 400 }}>{o.v}</div>
                    <div className="small" style={{ marginTop: 2, opacity: 0.6 }}>{o.d}</div>
                  </button>);

          })}
            </div>
        )}
        </div>
      }
    </div>);

};

const Step1 = ({ data, update }) =>
<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
    <Field label="O que procuras" hint="As áreas são muitas — escolhe a que mais se aproxima. Podes refinar nas notas finais.">
      <SpecialtySelect value={data.motivo} onChange={(v) => update('motivo', v)} />
    </Field>

    <Field label="Formato">
      <div style={{ display: 'flex', gap: 10 }}>
        <Pill active={data.formato === 'presencial'} onClick={() => update('formato', 'presencial')}>📍 Presencial · Lisboa</Pill>
        <Pill active={data.formato === 'online'} onClick={() => update('formato', 'online')}>🖥 Online · videochamada</Pill>
      </div>
    </Field>

    <Field label="É a tua primeira consulta connosco?">
      <div style={{ display: 'flex', gap: 10 }}>
        <Pill active={data.primeiraVez === 'sim'} onClick={() => update('primeiraVez', 'sim')}>Sim</Pill>
        <Pill active={data.primeiraVez === 'nao'} onClick={() => update('primeiraVez', 'nao')}>Não, sou paciente</Pill>
      </div>
    </Field>

    <Field label="Profissional preferido (opcional)">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
        {[
      { 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) =>
      <Pill key={p.v} active={data.profissional === p.v} onClick={() => update('profissional', p.v)}>
            {p.n}
          </Pill>
      )}
      </div>
    </Field>
  </div>;


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 (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      <Field label="Escolhe data e hora" hint="Mostra disponibilidades dos próximos 7 dias. Para outras datas, expande à direita.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8 }}>
          {days.map((d) =>
          <div key={d} style={{
            border: '1px solid rgba(54,21,7,.15)',
            borderRadius: 4,
            padding: 14,
            minHeight: 220,
            background: 'var(--linho)',
            display: 'flex', flexDirection: 'column', gap: 8
          }}>
              <div className="eyebrow-mono" style={{ fontSize: 10, opacity: 0.65, paddingBottom: 8, borderBottom: '1px solid rgba(54,21,7,.1)' }}>
                {d.split(' ')[0]}<br /><span style={{ fontFamily: 'var(--font-display)', fontSize: 22, opacity: 1 }}>{d.split(' ')[1]}</span>
              </div>
              {slots[d].length === 0 ?
            <div className="small" style={{ opacity: 0.4, marginTop: 8 }}>Fechado</div> :
            slots[d].map((t) =>
            <button key={t} onClick={() => update('slot', `${d} · ${t}`)} style={{
              padding: '8px 4px', borderRadius: 4,
              background: data.slot === `${d} · ${t}` ? 'var(--terra)' : 'transparent',
              color: data.slot === `${d} · ${t}` ? 'var(--linho)' : 'var(--terra)',
              border: `1px solid ${data.slot === `${d} · ${t}` ? 'var(--terra)' : 'rgba(54,21,7,.15)'}`,
              fontSize: 13, fontFamily: 'var(--font-mono)'
            }}>{t}</button>
            )
            }
            </div>
          )}
        </div>
      </Field>
      <button style={{ alignSelf: 'flex-start', fontSize: 13, opacity: 0.7, textDecoration: 'underline' }}>Ver mais semanas →</button>
    </div>);

};

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 (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <Field label="Nome completo">
        <input style={inp} placeholder="O teu nome" value={data.nome} onChange={(e) => update('nome', e.target.value)} />
      </Field>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <Field label="Email">
          <input style={inp} type="email" placeholder="o.teu@email.pt" value={data.email} onChange={(e) => update('email', e.target.value)} />
        </Field>
        <Field label="Telefone">
          <input style={inp} type="tel" placeholder="+351 9XX XXX XXX" value={data.telefone} onChange={(e) => update('telefone', e.target.value)} />
        </Field>
      </div>
      <Field label="Algo que queiras partilhar antes da consulta?" hint="Opcional. Vai apenas para o profissional. Confidencial.">
        <textarea style={{ ...inp, minHeight: 120, resize: 'vertical' }} placeholder="O que te traz cá hoje?" value={data.notas} onChange={(e) => update('notas', e.target.value)} />
      </Field>
      <label style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 13, lineHeight: 1.5, opacity: 0.85 }}>
        <input type="checkbox" defaultChecked style={{ marginTop: 4 }} />
        Aceito a <u>política de privacidade</u> e o <u>tratamento de dados clínicos</u> nos termos do RGPD.
      </label>
    </div>);

};

const Step4 = ({ data }) =>
<div style={{ textAlign: 'center', padding: '40px 0' }}>
    <div style={{ width: 80, height: 80, borderRadius: 999, background: 'var(--musgo)', margin: '0 auto', display: 'grid', placeItems: 'center', fontSize: 36 }}>✓</div>
    <h2 className="display-serif" style={{ fontSize: 64, marginTop: 24, lineHeight: 1 }}>
      Quase lá, <em>{data.nome.split(' ')[0] || 'a confirmar'}</em>.
    </h2>
    <p className="body-lg" style={{ marginTop: 16, opacity: 0.75, maxWidth: 540, margin: '16px auto 0' }}>
      Confirma os detalhes ao lado. Vamos enviar-te um email com a fatura proforma e instruções para pagamento (pode ser feito presencialmente ou MB Way).
    </p>
    <div style={{ marginTop: 36, padding: 24, background: 'var(--linho)', borderRadius: 4, textAlign: 'left', maxWidth: 480, margin: '36px auto 0' }}>
      <div className="eyebrow-mono" style={{ opacity: 0.55, marginBottom: 12 }}>O que acontece a seguir</div>
      <ol style={{ listStyle: 'decimal inside', display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14, lineHeight: 1.5 }}>
        <li>Recebes confirmação por email + SMS.</li>
        <li>24h antes, lembrete com link da videochamada (se online) ou morada.</li>
        <li>Após a consulta, plano clínico personalizado em 48h.</li>
      </ol>
    </div>
  </div>;


const InfoCell = ({ icon, title, children, border }) => {
  const borders = (border || '').split(' ');
  return (
    <div style={{
      padding: '40px 36px 44px',
      borderRight: borders.includes('right') ? '1px solid rgba(54,21,7,.15)' : 'none',
      borderBottom: borders.includes('bottom') ? '1px solid rgba(54,21,7,.15)' : 'none',
      display: 'flex', flexDirection: 'column', gap: 20, minHeight: 320
    }}>
      <div style={{ width: 52, height: 52, opacity: 0.85 }}>{icon}</div>
      <h3 className="display-serif" style={{ fontSize: 30, lineHeight: 1, letterSpacing: '-0.02em', fontWeight: 400 }}>
        {title}
      </h3>
      <div style={{ marginTop: 4 }}>{children}</div>
    </div>);

};

const TeamIcon = () =>
<svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="20" cy="20" r="6" />
    <circle cx="34" cy="22" r="5" />
    <path d="M10 40c0-6 4.5-10 10-10s10 4 10 10" />
    <path d="M28 40c0-5 3-8 8-8s8 3 8 8" />
  </svg>;

const ClockIcon = () =>
<svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="26" cy="27" r="16" />
    <path d="M26 18v9l6 4M22 9h8M26 9V6" />
  </svg>;

const HourglassIcon = () =>
<svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M16 8h20M16 44h20M18 8c0 8 16 10 16 18s-16 10-16 18M34 8c0 8-16 10-16 18s16 10 16 18" />
  </svg>;

const HandIcon = () =>
<svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M8 30c4-6 10-8 16-8h8c3 0 5 2 5 5s-2 5-5 5h-8" />
    <circle cx="26" cy="14" r="5" />
    <path d="M8 30v8h28c4 0 8-3 8-8" />
  </svg>;

const CoinIcon = () =>
<svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M8 32c4-6 10-8 16-8h8c3 0 5 2 5 5s-2 5-5 5h-6" />
    <circle cx="34" cy="16" r="6" />
    <path d="M34 13v6M31 16h6" />
    <path d="M8 32v8h28c4 0 8-3 8-8" />
  </svg>;

const CalendarIcon = () =>
<svg viewBox="0 0 52 52" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="8" y="12" width="36" height="32" rx="2" />
    <path d="M8 20h36M16 8v8M36 8v8" />
    <circle cx="18" cy="28" r="1.2" fill="currentColor" />
    <circle cx="26" cy="28" r="1.2" fill="currentColor" />
    <circle cx="34" cy="28" r="1.2" fill="currentColor" />
    <circle cx="18" cy="36" r="1.2" fill="currentColor" />
    <circle cx="26" cy="36" r="1.2" fill="currentColor" />
  </svg>;


Object.assign(window, { HealthPage, StepCard });