// Página interna: Incubadora — conteúdo real (Comunidade & Desenvolvimento Profissional)

const IncubadoraPage = () => (
  <div style={{ background: 'var(--linho)', color: 'var(--terra)', width: 1440 }}>
    <Nav theme="linho" currentArea="academia" />

    {/* HERO — Terracota saturado, com imagem ténue */}
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--terracota)', color: 'var(--linho)' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `url(assets/foto-detalhe.png) center/cover`,
        opacity: 0.18, mixBlendMode: 'multiply', pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative', padding: '120px 56px 100px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 28 }}>
        <div className="eyebrow-mono" style={{ opacity: 0.85, letterSpacing: '0.16em' }}>(03) — Academia · Profissionais de saúde</div>
        <h1 className="display-serif" style={{ fontSize: 124, lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 300, fontStyle: 'italic', maxWidth: 1100 }}>
          Incubadora Transformar
        </h1>
        <p className="display-serif" style={{ fontSize: 36, lineHeight: 1.2, fontWeight: 300, maxWidth: 880, opacity: 0.95 }}>
          Comunidade e Desenvolvimento Profissional<br/>em Saúde Mental Integrativa
        </p>
        <a className="btn btn-arrow" style={{ background: 'var(--terra)', color: 'var(--linho)', padding: '16px 28px', fontSize: 14, marginTop: 16, letterSpacing: '0.08em' }}>QUERO SABER MAIS</a>
      </div>
    </section>

    {/* PORQUÊ — Linho-warm */}
    <section style={{ padding: '120px 56px', background: 'var(--linho-warm)' }}>
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
        <p className="eyebrow-mono" style={{ opacity: 0.65, marginBottom: 32 }}>
          Atualiza o teu sistema profissional. Cresce em comunidade. Exerce com <strong style={{ fontFamily: 'var(--font-mono)', fontWeight: 600 }}>mais impacto, segurança e sentido</strong>.
        </p>
        <h2 className="display-serif" style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 300, marginBottom: 48 }}>
          Porquê uma <em>Incubadora Transformar</em>?
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 22, fontSize: 15, lineHeight: 1.7, opacity: 0.85, textAlign: 'left' }}>
          <p>
            A Incubadora Transformar nasce da evolução natural da Academia Transformar e da convicção de que <strong style={{ fontWeight: 600 }}>cuidar da saúde mental das pessoas começa por cuidar de quem cuida</strong>.
          </p>
          <p>
            Ao longo dos anos, acompanhámos profissionais altamente qualificados a exercer em contextos de grande exigência, muitas vezes em solidão, com pouco apoio estruturado, supervisão irregular e ética crescentes ao nível clínico, emocional, ético e organizacional.
          </p>
          <p>
            A Incubadora Transformar surge como resposta a esta realidade.
          </p>
          <p>
            Não como mais um espaço de prestação de serviços, mas como um <strong style={{ fontWeight: 600 }}>ecossistema profissional</strong> de interajuda, formação contínua, supervisão e colaboração, que combate o isolamento clínico, promove boas práticas e sustenta o crescimento pessoal e profissional em <strong style={{ fontWeight: 600 }}>saúde mental integrativa</strong>.
          </p>
        </div>

        <a className="btn btn-arrow" style={{ background: 'var(--terracota)', color: 'var(--linho)', padding: '14px 24px', fontSize: 13, marginTop: 56, letterSpacing: '0.08em' }}>QUERO FALAR COM A EQUIPA</a>
      </div>
    </section>

    {/* QUEM SOMOS — Linho */}
    <section style={{ padding: '120px 56px', background: 'var(--linho)' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center', marginBottom: 80 }}>
        <h2 className="display-serif" style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 300, marginBottom: 40 }}>
          Quem somos nós?
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, fontSize: 15, lineHeight: 1.7, opacity: 0.85, textAlign: 'left' }}>
          <p>
            Na Academia Transformar, acreditamos que cuidar da mente é estratégia, não luxo. Somos um ecossistema de saúde mental integrativa que alia ciência, empatia e prática diária para ajudar pessoas e empresas a viver com mais clareza, energia e propósito. Trabalhamos presencialmente e online, com pessoas e organizações, assegurando intervenções individuais e em grupo. Acreditamos que juntos conseguimos criar mais impacto, valorizando um crescimento responsável e sustentável.
          </p>
          <p>
            Crescemos com critério, responsabilidade e foco em qualidade clínica.
          </p>
        </div>
      </div>

      {/* Timeline 2017 → 2026 */}
      <div style={{ maxWidth: 1180, margin: '0 auto 100px' }}>
        <div className="eyebrow-mono" style={{ textAlign: 'center', opacity: 0.55, marginBottom: 48 }}>(01) — Linha do tempo</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, position: 'relative' }}>
          {/* Connecting line */}
          <div style={{ position: 'absolute', top: 22, left: '8%', right: '8%', height: 1, borderTop: '1px dashed var(--musgo)', opacity: 0.5 }}/>
          {[
            { y: '2017', t: 'Início do projeto Transformar', d: 'Início em acompanhamento psicológico humanizado.', c: 'musgo', dir: 'top' },
            { y: '2020', t: 'Consolidação como Academia Transformar', d: 'Afirmação de visão, estratégia clínica e institucional.', c: 'terra', dir: 'top' },
            { y: '2021–2023', t: 'Mudança de espaço físico', d: 'Aumento da procura clínica e reforço da supervisão.', c: 'terracota', dir: 'top' },
            { y: '2024', t: 'Crescimento contínuo da equipa', d: 'Fortalecimento do paradigma de saúde mental integrativa.', c: 'musgo-deep', dir: 'bottom' },
            { y: '2025', t: 'Reconhecimento e crescimento', d: 'Reconhecimento como PME com critérios de excelência. Várias prémios. Certificação DGERT.', c: 'mostarda', dir: 'bottom' },
            { y: '2026', t: 'Evolução e crescimento', d: 'Evolução do modelo de funcionamento e criação de dois modelos de pertença.', c: 'musgo', dir: 'bottom' },
          ].map((m, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', position: 'relative', paddingTop: m.dir === 'top' ? 0 : 56 }}>
              {m.dir === 'top' && (
                <>
                  <Bullet color={m.c} year={m.y}/>
                  <Pill color={m.c} text={m.t}/>
                  <p style={{ fontSize: 11.5, opacity: 0.7, marginTop: 12, lineHeight: 1.45, padding: '0 12px' }}>{m.d}</p>
                </>
              )}
              {m.dir === 'bottom' && (
                <>
                  <p style={{ fontSize: 11.5, opacity: 0.7, marginBottom: 12, lineHeight: 1.45, padding: '0 12px', order: 3 }}>{m.d}</p>
                  <Pill color={m.c} text={m.t} order={2}/>
                  <Bullet color={m.c} year={m.y} order={1}/>
                </>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* KPIs */}
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
        {/* Bar chart */}
        <div>
          <div className="eyebrow-mono" style={{ color: 'var(--terracota)', marginBottom: 24, letterSpacing: '0.12em' }}>NOVOS CLIENTES POR ANO</div>
          <BarChart/>
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid rgba(54,21,7,.12)', textAlign: 'center' }}>
            <div className="eyebrow-mono" style={{ color: 'var(--terracota)', marginBottom: 8 }}>CASOS ATIVOS ANUAIS</div>
            <div className="display-serif" style={{ fontSize: 48, fontWeight: 300, fontStyle: 'italic' }}>≈ 1100</div>
          </div>
        </div>
        {/* Line chart */}
        <div>
          <div className="eyebrow-mono" style={{ color: 'var(--terracota)', marginBottom: 24, letterSpacing: '0.12em' }}>MÉDIA MENSAL DE NOVOS CLIENTES</div>
          <LineChart/>
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid rgba(54,21,7,.12)', textAlign: 'center' }}>
            <div className="eyebrow-mono" style={{ color: 'var(--terracota)', marginBottom: 8 }}>CASOS ATIVOS</div>
            <div className="display-serif" style={{ fontSize: 48, fontWeight: 300, fontStyle: 'italic' }}>+ 4700</div>
          </div>
        </div>
      </div>

      <p style={{ textAlign: 'center', fontSize: 14, opacity: 0.7, marginTop: 80, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.6 }}>
        Toda esta evolução está alinhada com o método <span style={{ color: 'var(--terracota)', fontWeight: 500 }}>Transformar OS</span> — Atualiza o teu sistema humano e profissional, integrando mente, corpo, emoções, relações e contexto.
      </p>
    </section>

    {/* PARA QUEM — Linho-warm com tira de fotos */}
    <section style={{ padding: '100px 56px 120px', background: 'var(--linho-warm)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        {/* Tira de fotos */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, marginBottom: 60 }}>
          {[
            'foto-detalhe.png',
            'foto-sala-musgo.png',
            'foto-sala-cantinho.png',
            'foto-sala-terracota.png',
            'fundadora.png',
          ].map((src, i) => (
            <div key={i} style={{ aspectRatio: '3/4', background: `url(assets/${src}) center/cover`, filter: 'saturate(0.9)' }}/>
          ))}
        </div>

        <h2 className="display-serif" style={{ fontSize: 44, fontWeight: 300, textAlign: 'center', marginBottom: 56, lineHeight: 1.15 }}>
          A Incubadora Transformar destina-se a <em>profissionais de saúde</em> que:
        </h2>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '40px 56px', maxWidth: 1080, margin: '0 auto' }}>
          {[
            'Exercem ou desejam exercer com rigor e ética',
            'Valorizam uma abordagem integrada da saúde mental',
            'Procuram formação e supervisão contínuas',
            'Sentem necessidade de apoio, estrutura e comunidade',
            'Acreditam que crescer profissionalmente não tem de ser um processo solitário',
            'Ex.: psicólogos, psiquiatras, médicos, nutricionistas, terapeutas e outros profissionais de saúde integrativa',
          ].map((t, i) => (
            <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <CheckIcon/>
              <p style={{ fontSize: 14, lineHeight: 1.55, opacity: 0.85, flex: 1 }}>{t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* MODELOS DE INTEGRAÇÃO — Editorial + tabela comparativa */}
    <section style={{ padding: '120px 56px', background: 'var(--linho)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>

        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div className="eyebrow-mono" style={{ color: 'var(--terracota)', marginBottom: 16, opacity: 0.7 }}>(02) — Como podes integrar</div>
          <h2 className="display-serif" style={{ fontSize: 64, fontWeight: 300, lineHeight: 1.05 }}>
            Dois <em>modelos</em> de pertença.<br/>Um único ecossistema.
          </h2>
        </div>

        {/* Editorial intro — 2 colunas */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--terra)', marginBottom: 48 }}>
          {/* Residente */}
          <div style={{ background: 'var(--linho-warm)', padding: '48px 44px', position: 'relative' }}>
            <div style={{ position: 'absolute', top: 24, right: 28, fontFamily: 'var(--font-display)', fontSize: 80, lineHeight: 1, color: 'var(--terracota)', opacity: 0.18, fontStyle: 'italic' }}>A</div>
            <div className="eyebrow-mono" style={{ color: 'var(--terracota-deep)', marginBottom: 20, letterSpacing: '0.12em' }}>MODELO A · PERTENÇA</div>
            <h3 className="display-serif" style={{ fontSize: 40, fontWeight: 400, lineHeight: 1.1, marginBottom: 20 }}>Profissional <em>Residente</em></h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, opacity: 0.85, marginBottom: 24, maxWidth: 460 }}>
              Integras a <strong style={{ fontWeight: 600 }}>equipa clínica de forma contínua</strong>, num modelo de comissão sobre as consultas. Pensado para quem valoriza alta pertença, suporte estruturado e crescimento acompanhado.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Equipa clínica', 'Comissão sobre consultas', 'Suporte completo'].map(t => (
                <span key={t} style={{ padding: '6px 12px', border: '1px solid var(--terracota)', color: 'var(--terracota-deep)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', borderRadius: 999 }}>{t}</span>
              ))}
            </div>
          </div>

          {/* Incubado */}
          <div style={{ background: 'var(--linho-warm)', padding: '48px 44px', position: 'relative' }}>
            <div style={{ position: 'absolute', top: 24, right: 28, fontFamily: 'var(--font-display)', fontSize: 80, lineHeight: 1, color: 'var(--terracota)', opacity: 0.18, fontStyle: 'italic' }}>B</div>
            <div className="eyebrow-mono" style={{ color: 'var(--terracota-deep)', marginBottom: 20, letterSpacing: '0.12em' }}>MODELO B · AUTONOMIA</div>
            <h3 className="display-serif" style={{ fontSize: 40, fontWeight: 400, lineHeight: 1.1, marginBottom: 20 }}>Profissional <em>Incubado</em></h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, opacity: 0.85, marginBottom: 24, maxWidth: 460 }}>
              Para <strong style={{ fontWeight: 600 }}>profissionais autónomos</strong> que procuram apoio, formação e pertença sem perder a independência. Gestão clínica e administrativa autónoma, com acesso a serviços à medida.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {['Gestão autónoma', 'Serviços à carta', 'Sem comissão'].map(t => (
                <span key={t} style={{ padding: '6px 12px', border: '1px solid var(--terracota)', color: 'var(--terracota-deep)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.06em', borderRadius: 999 }}>{t}</span>
              ))}
            </div>
          </div>
        </div>

        {/* Tabela comparativa */}
        <div style={{ marginTop: 32 }}>
          <div className="eyebrow-mono" style={{ textAlign: 'center', color: 'var(--terracota)', opacity: 0.7, marginBottom: 32 }}>(03) — O que cada modelo inclui</div>

          {/* Cabeçalho da tabela */}
          <div style={{
            display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr',
            background: 'var(--terra)', color: 'var(--linho)',
            padding: '20px 32px', alignItems: 'center',
          }}>
            <div className="eyebrow-mono" style={{ opacity: 0.55, letterSpacing: '0.12em' }}>BENEFÍCIO</div>
            <div className="eyebrow-mono" style={{ textAlign: 'center', letterSpacing: '0.12em' }}>RESIDENTE</div>
            <div className="eyebrow-mono" style={{ textAlign: 'center', letterSpacing: '0.12em' }}>INCUBADO</div>
          </div>

          {/* Legenda */}
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 20, padding: '14px 32px', fontFamily: 'var(--font-mono)', fontSize: 11, opacity: 0.7, background: 'var(--linho-warm)', borderBottom: '1px solid rgba(54,21,7,.1)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Mark kind="incl"/> Incluído</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Mark kind="paid"/> Serviço pago</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Mark kind="none"/> Não aplicável</span>
          </div>

          {/* Grupos de linhas */}
          {COMPARISON.map((group, gi) => (
            <div key={gi}>
              <div style={{
                padding: '18px 32px 12px', background: 'var(--linho)',
                borderTop: '1px solid rgba(54,21,7,.08)',
              }}>
                <div className="eyebrow-mono" style={{ color: 'var(--terracota-deep)', fontSize: 11, letterSpacing: '0.14em', fontWeight: 600 }}>{group.title}</div>
              </div>
              {group.rows.map((row, ri) => (
                <div key={ri} style={{
                  display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr',
                  padding: '18px 32px',
                  alignItems: 'center',
                  borderTop: '1px solid rgba(54,21,7,.08)',
                  background: ri % 2 === 0 ? 'var(--linho-warm)' : 'var(--linho)',
                }}>
                  <div style={{ fontSize: 14, lineHeight: 1.45, opacity: 0.88, paddingRight: 24 }}>{row.label}</div>
                  <div style={{ display: 'flex', justifyContent: 'center' }}><Mark kind={row.r}/></div>
                  <div style={{ display: 'flex', justifyContent: 'center' }}><Mark kind={row.i}/></div>
                </div>
              ))}
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 56 }}>
          <a className="btn btn-arrow" style={{ background: 'var(--terracota)', color: 'var(--linho)', padding: '14px 22px', fontSize: 13, letterSpacing: '0.06em' }}>FALAR SOBRE ESTES MODELOS</a>
          <a className="btn btn-outline btn-arrow" style={{ padding: '14px 22px', fontSize: 13, letterSpacing: '0.06em' }}>Descarregar comparativo</a>
        </div>
      </div>
    </section>

    {/* SERVIÇOS PAGOS — Linho-warm */}
    <section style={{ padding: '120px 56px', background: 'var(--linho-warm)' }}>
      <h2 className="display-serif" style={{ fontSize: 48, fontWeight: 300, textAlign: 'center', marginBottom: 56, lineHeight: 1.15 }}>
        O que disponibilizamos na Incubadora Transformar <em>(serviços pagos)</em>?
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, maxWidth: 1080, margin: '0 auto' }}>
        {[
          {
            t: 'FORMAÇÃO CONTÍNUA',
            items: [
              'Formação geral em saúde mental integrativa',
              'Formação especializada (EMDR, luto, intervenção em crise, trauma, entre outros)',
              'Atualização científica regular',
            ]
          },
          {
            t: 'CONSULTADORIA',
            items: [
              'Comunicação em saúde',
              'Liderança em saúde',
              'Desenvolvimento de carreira e projetos profissionais',
            ]
          },
          {
            t: 'SUPERVISÃO',
            items: [
              'Supervisão clínica em grupo',
              'Supervisão individual',
              'Supervisão especializada por áreas de intervenção (luto, intervenção em crise, EMDR, saúde da mulher, perturbação de personalidade, distúrbios do comportamento alimentar)',
            ]
          },
          {
            t: 'COMUNIDADE',
            items: [
              'Espaços de partilha e reflexão',
              'Eventos internos',
              'Cultura de colaboração, não competição',
            ]
          },
        ].map((s, i) => (
          <div key={i} style={{
            background: 'var(--linho)',
            border: '1px solid var(--terracota)',
            padding: '28px 30px 32px',
            borderRadius: 4,
            position: 'relative',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
              <h3 className="eyebrow-mono" style={{ color: 'var(--terracota-deep)', fontSize: 13, letterSpacing: '0.14em', fontWeight: 600 }}>{s.t}</h3>
              <span style={{ color: 'var(--terracota-deep)', opacity: 0.6, fontSize: 14 }}>↑</span>
            </div>
            <ul style={{ listStyle: 'disc', paddingLeft: 18, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 13, lineHeight: 1.55, opacity: 0.85 }}>
              {s.items.map(it => <li key={it}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>

    {/* A NOSSA VISÃO — Linho */}
    <section style={{ padding: '120px 56px', background: 'var(--linho)' }}>
      <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
        <h2 className="display-serif" style={{ fontSize: 56, fontWeight: 300, marginBottom: 48 }}>A nossa visão</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, fontSize: 15, lineHeight: 1.7, opacity: 0.85, textAlign: 'left' }}>
          <p>
            Acreditamos que <strong style={{ fontWeight: 600 }}>profissionais mais cuidados, apoiados e integrados prestam melhores cuidados</strong>, tornam-se melhores decisões e protegem-se a si próprios da sua saúde mental.
          </p>
          <p>
            A Incubadora Transformar é <strong style={{ fontWeight: 600 }}>parte ativa de uma mudança necessária</strong> na forma como se exerce saúde mental hoje.
          </p>
          <p>
            Não acreditamos em crescimento solitário.
          </p>
          <p style={{ fontWeight: 600 }}>
            Acreditamos em evolução acompanhada.
          </p>
        </div>
      </div>
    </section>

    {/* CTA FINAL — Terra com imagem */}
    <section style={{ position: 'relative', padding: '100px 56px 120px', background: 'var(--terra)', color: 'var(--linho)', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `url(assets/foto-sala-cantinho.png) center/cover`,
        opacity: 0.25, mixBlendMode: 'overlay', pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative', textAlign: 'center', maxWidth: 880, margin: '0 auto' }}>
        <h2 className="display-serif" style={{ fontSize: 48, fontWeight: 300, lineHeight: 1.2, marginBottom: 40 }}>
          Se sentes que este modelo faz sentido para ti, convidamos-te a dar o <em>próximo passo</em>:
        </h2>
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a className="btn btn-arrow" style={{ background: 'var(--terracota)', color: 'var(--linho)', padding: '16px 28px', fontSize: 13, letterSpacing: '0.08em' }}>CANDIDATAR-ME À INCUBADORA</a>
          <a className="btn btn-arrow" style={{ background: 'var(--terracota-deep)', color: 'var(--linho)', padding: '16px 28px', fontSize: 13, letterSpacing: '0.08em' }}>AGENDAR REUNIÃO EXPLORATÓRIA</a>
        </div>
      </div>
    </section>

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

/* ------------------ Helpers ------------------ */
const Pill = ({ color, text, order }) => {
  const map = {
    'musgo': { bg: 'var(--musgo)', tx: 'var(--linho)' },
    'terra': { bg: 'var(--terra)', tx: 'var(--linho)' },
    'terracota': { bg: 'var(--terracota)', tx: 'var(--linho)' },
    'musgo-deep': { bg: 'var(--musgo-deep, #4a5639)', tx: 'var(--linho)' },
    'mostarda': { bg: '#c9a14a', tx: 'var(--terra)' },
  };
  const c = map[color] || map['musgo'];
  return (
    <div style={{
      background: c.bg, color: c.tx, padding: '6px 14px', borderRadius: 999,
      fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 500,
      maxWidth: 180, textAlign: 'center', lineHeight: 1.25, marginTop: 8,
      order
    }}>
      {text}
    </div>
  );
};
const Bullet = ({ color, year, order }) => {
  const map = {
    'musgo': 'var(--musgo)',
    'terra': 'var(--terra)',
    'terracota': 'var(--terracota)',
    'musgo-deep': '#4a5639',
    'mostarda': '#c9a14a',
  };
  return (
    <div style={{
      width: 44, height: 44, borderRadius: 999, background: map[color] || map['musgo'],
      display: 'grid', placeItems: 'center', color: 'var(--linho)',
      fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: 0,
      position: 'relative', zIndex: 1,
      order
    }}>
      {year}
    </div>
  );
};
const CheckIcon = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="var(--terracota)" strokeWidth="1.5" style={{ flexShrink: 0, marginTop: -2 }}>
    <circle cx="16" cy="16" r="13"/>
    <path d="M10 16.5 L14 20.5 L22 12" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

/* ------------------ Comparativo ------------------ */
const Mark = ({ kind }) => {
  if (kind === 'incl') {
    return (
      <span title="Incluído" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24, borderRadius: 999, background: 'var(--terracota)', color: 'var(--linho)' }}>
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2.5 6.5 L5 9 L9.5 3.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </span>
    );
  }
  if (kind === 'paid') {
    return (
      <span title="Serviço pago" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24, borderRadius: 999, border: '1.5px solid var(--terracota)', color: 'var(--terracota-deep)', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700 }}>€</span>
    );
  }
  return (
    <span title="Não aplicável" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24, color: 'var(--terra)', opacity: 0.3, fontFamily: 'var(--font-mono)', fontSize: 16 }}>—</span>
  );
};

const COMPARISON = [
  {
    title: 'ESPAÇO & OPERAÇÃO',
    rows: [
      { label: 'Salas em Lisboa e Porto (luz natural, internet, consumíveis, copa)', r: 'incl', i: 'paid' },
      { label: 'Domiciliação de morada profissional', r: 'incl', i: 'paid' },
      { label: 'Centralização de faturação na Academia', r: 'incl', i: 'none' },
      { label: 'Pagamento à IRS assegurado pela Academia', r: 'incl', i: 'none' },
      { label: 'Apoio administrativo, contabilístico e de comunicação', r: 'incl', i: 'none' },
      { label: 'Exclusividade por localidade', r: 'incl', i: 'none' },
    ],
  },
  {
    title: 'CASOS CLÍNICOS',
    rows: [
      { label: 'Angariação gratuita de casos e referenciação contínua', r: 'incl', i: 'none' },
      { label: 'Possibilidade de receber casos referenciados pela Academia', r: 'incl', i: 'paid' },
      { label: 'Acompanhamento de métricas de qualidade dos processos clínicos', r: 'incl', i: 'none' },
      { label: 'Acesso a terapeutas ASA em períodos de ausência / férias', r: 'incl', i: 'paid' },
    ],
  },
  {
    title: 'SUPERVISÃO',
    rows: [
      { label: 'Supervisões de grupo semanais', r: 'incl', i: 'paid' },
      { label: 'Supervisões individuais adicionais ou SOS', r: 'paid', i: 'paid' },
      { label: 'Supervisões SOS garantidas 24h', r: 'incl', i: 'paid' },
    ],
  },
  {
    title: 'FORMAÇÃO & DESENVOLVIMENTO',
    rows: [
      { label: 'Formação interna da Transformar', r: 'incl', i: 'paid' },
      { label: 'Formação externa mais económica em EMDR e outros', r: 'incl', i: 'none' },
      { label: 'Apoio financeiro para formação contínua externa', r: 'incl', i: 'none' },
      { label: 'Acesso a biblioteca digital interna', r: 'incl', i: 'none' },
    ],
  },
  {
    title: 'COMUNICAÇÃO & VISIBILIDADE',
    rows: [
      { label: 'Integração no site da Academia Transformar', r: 'incl', i: 'none' },
      { label: 'Participação em redes sociais, OCS, eventos e formações', r: 'incl', i: 'none' },
      { label: 'Consultadoria em liderança, comunicação e projetos em saúde', r: 'paid', i: 'paid' },
    ],
  },
  {
    title: 'BENEFÍCIOS PESSOAIS',
    rows: [
      { label: 'Descontos em yoga, mindfulness, nutrição e consultas médicas', r: 'incl', i: 'none' },
      { label: 'Acesso a site de benefícios com múltiplos descontos', r: 'incl', i: 'none' },
    ],
  },
];

/* ------------------ Charts ------------------ */
const BarChart = () => {
  const data = [
    { y: 2023, v: 1200, c: 'var(--musgo)' },
    { y: 2024, v: 1500, c: 'var(--terracota)' },
    { y: 2025, v: 1950, c: 'var(--musgo-deep, #4a5639)' },
  ];
  const max = 2100;
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-around', height: 200, gap: 24, padding: '0 12px' }}>
        {data.map(d => (
          <div key={d.y} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1, height: '100%', justifyContent: 'flex-end' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, marginBottom: 8, fontStyle: 'italic' }}>≈ {d.v}</div>
            <div style={{ width: '100%', height: `${(d.v / max) * 170}px`, background: d.c, borderRadius: '2px 2px 0 0' }}/>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: 12, padding: '0 12px' }}>
        {data.map(d => (
          <div key={d.y} style={{ flex: 1, textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: d.c }}/>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, opacity: 0.75 }}>{d.y}</span>
          </div>
        ))}
      </div>
    </div>
  );
};
const LineChart = () => {
  const points = [
    { y: 2023, v: 100 },
    { y: 2024, v: 130 },
    { y: 2025, v: 165 },
  ];
  const max = 200;
  const w = 320; const h = 200;
  const pts = points.map((p, i) => ({
    x: 30 + (i / (points.length - 1)) * (w - 50),
    yp: h - 30 - (p.v / max) * (h - 50),
  }));
  return (
    <div>
      <svg viewBox={`0 0 ${w} ${h}`} width="100%" style={{ display: 'block' }}>
        {/* Y axis labels */}
        {[0, 100, 150, 200].map(v => {
          const yp = h - 30 - (v / max) * (h - 50);
          return (
            <g key={v}>
              <line x1="30" y1={yp} x2={w - 10} y2={yp} stroke="var(--terra)" strokeOpacity="0.08"/>
              <text x="22" y={yp + 4} fontSize="9" fontFamily="var(--font-mono)" fill="var(--terra)" opacity="0.5" textAnchor="end">{v}</text>
            </g>
          );
        })}
        {/* X axis */}
        <line x1="30" y1={h - 30} x2={w - 10} y2={h - 30} stroke="var(--terra)" strokeOpacity="0.2"/>
        {/* Line */}
        <polyline points={pts.map(p => `${p.x},${p.yp}`).join(' ')} fill="none" stroke="var(--musgo-deep, #4a5639)" strokeWidth="1.8"/>
        {/* Dots */}
        {pts.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.yp} r="3" fill="var(--musgo-deep, #4a5639)"/>
        ))}
        {/* X labels */}
        {points.map((p, i) => (
          <text key={p.y} x={pts[i].x} y={h - 14} fontSize="10" fontFamily="var(--font-mono)" fill="var(--terra)" opacity="0.7" textAnchor="middle">{p.y}</text>
        ))}
      </svg>
    </div>
  );
};

Object.assign(window, { IncubadoraPage });