// Página interna: Transformar OS — copy real do site, header alinhado a Health/Incubadora

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

    {/* HERO — Raízes saturado, com foto ténue (estrutura idêntica a Incubadora/Health) */}
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--raizes)', color: 'var(--linho)' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `url(assets/foto-sala-musgo.png) center/cover`,
        opacity: 0.18, mixBlendMode: 'overlay', 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', color: 'var(--terracota)' }}>(04) — Método · Transformar OS</div>
        <h1 className="display-serif" style={{ fontSize: 124, lineHeight: 0.95, letterSpacing: '-0.03em', fontWeight: 300, fontStyle: 'italic', maxWidth: 1100 }}>
          Otimiza o teu Sistema
        </h1>
        <p className="display-serif" style={{ fontSize: 30, lineHeight: 1.3, fontWeight: 300, maxWidth: 880, opacity: 0.95 }}>
          O teu <strong style={{ fontWeight: 500, fontStyle: 'normal' }}>sistema operativo humano</strong>: um método de saúde mental integrativa para viveres com mais clareza, equilíbrio e propósito.
        </p>
        <a className="btn btn-arrow" style={{ background: 'var(--terracota)', color: 'var(--linho)', padding: '16px 28px', fontSize: 13, marginTop: 16, letterSpacing: '0.08em' }}>QUERO SABER MAIS</a>
      </div>
    </section>

    {/* MANIFESTO — Linho */}
    <section style={{ padding: '120px 56px', background: 'var(--linho)' }}>
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
        <div className="eyebrow-mono" style={{ color: 'var(--terracota)', marginBottom: 24, letterSpacing: '0.14em' }}>MANIFESTO PARA A MUDANÇA</div>
        <h2 className="display-serif" style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 300, marginBottom: 48, textTransform: 'uppercase', letterSpacing: '0.01em' }}>
          Todos têm potencial<br/>para <em>brilhar</em>
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22, fontSize: 15, lineHeight: 1.7, opacity: 0.85, textAlign: 'left' }}>
          <p>Cada pessoa é única. É feita de força e vulnerabilidade, de certezas e dúvidas, mas, acima de tudo, de potencial.</p>
          <p>
            Cuidar da saúde mental é essencial para viver plenamente. Quanto mais investimos na prevenção, mais preparados estamos para enfrentar os desafios. Recusamos a cultura que normaliza a exaustão, romantiza o sacrifício e valoriza o silêncio emocional. <strong style={{ fontWeight: 600 }}>Porque não é fraqueza pedir ajuda, é coragem para transformar.</strong>
          </p>
          <p>
            Na Academia Transformar, <strong style={{ fontWeight: 600 }}>corpo e mente são trabalhados em conjunto, com ciência e humanidade</strong>, numa abordagem completa, integrada e centrada em ti.
          </p>
          <p>
            É a partir desta visão que <strong style={{ fontWeight: 600 }}>nasce o Transformar OS — Operating System Humano</strong>, o método que otimiza o teu sistema e traduz na prática aquilo em que acreditamos.
          </p>
          <p style={{ fontWeight: 600, fontSize: 17 }}>Quando transformas a tua saúde mental, transformas tudo dentro e fora de ti.</p>
        </div>
      </div>
    </section>

    {/* O NOSSO MÉTODO — Linho-warm */}
    <section style={{ padding: '120px 56px', background: 'var(--linho-warm)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div className="eyebrow-mono" style={{ color: 'var(--terracota)', opacity: 0.7, marginBottom: 16 }}>(01) — O nosso método</div>
          <h2 className="display-serif" style={{ fontSize: 56, lineHeight: 1.1, fontWeight: 300 }}>
            Transformar OS — <em>Sistema Operativo Humano</em>
          </h2>
        </div>

        <p style={{ maxWidth: 780, margin: '0 auto 72px', textAlign: 'center', fontSize: 16, lineHeight: 1.7, opacity: 0.85 }}>
          Tal como um computador precisa de um sistema operativo para funcionar em harmonia, também nós precisamos de um <strong style={{ fontWeight: 600 }}>conjunto de práticas, hábitos e competências emocionais</strong> que alinhem mente, corpo e emoções. O <strong style={{ fontWeight: 600 }}>Transformar OS atualiza o teu sistema operativo</strong>, ajudando-te a <strong style={{ fontWeight: 600, fontStyle: 'italic' }}>viver, trabalhar e liderar com mais clareza, equilíbrio e impacto</strong>, sustentado em ciência e prática clínica.
        </p>

        {/* 3 benefits row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 56 }}>
          {[
            'Reconfigura o teu funcionamento interno, promovendo leveza e presença',
            'Reduz ansiedade, aumenta energia e fortalece relações saudáveis',
            'Garante uma performance sustentável sem sacrificar o bem-estar',
          ].map((txt, i) => (
            <div key={i} style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
              <div style={{ flexShrink: 0, width: 48, height: 48, borderRadius: 999, border: '1.5px solid var(--terracota)', display: 'grid', placeItems: 'center' }}>
                <svg width="20" height="20" viewBox="0 0 22 22" fill="none">
                  <path d="M4 11.5 L9 16.5 L18 6" stroke="var(--terracota)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.55, opacity: 0.85, paddingTop: 4 }}>{txt}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* COMO FUNCIONA — Linho */}
    <section style={{ padding: '120px 56px', background: 'var(--linho)' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <div className="eyebrow-mono" style={{ color: 'var(--terracota)', opacity: 0.7, marginBottom: 16 }}>(02) — Como funciona</div>
        <h2 className="display-serif" style={{ fontSize: 64, fontWeight: 300, lineHeight: 1.05 }}>Como <em>funciona</em>?</h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, maxWidth: 1100, margin: '0 auto' }}>
        {[
          { t: 'INTEGRA CORPO E MENTE', d: 'Através da psicologia, psiquiatria, nutrição, medicina integrativa e mindfulness.' },
          { t: 'DISPONIBILIZA MÚLTIPLOS RECURSOS', d: 'Consultas individuais, programas de grupo, ferramentas digitais, talks e workshops em empresas.' },
          { t: 'ASSENTA NUMA VISÃO HOLÍSTICA E CIENTÍFICA', d: 'Cada pessoa é vista como um todo, não como um conjunto de sintomas.' },
          { t: 'ACOMPANHA-TE NUM PERCURSO ESTRUTURADO', d: <>Diagnóstico <span style={{ opacity: 0.5 }}>→</span> Atualização de hábitos e competências emocionais <span style={{ opacity: 0.5 }}>→</span> Acompanhamento contínuo</> },
        ].map((c, i) => (
          <div key={i} style={{
            border: '1px solid var(--terracota)', background: 'var(--linho-warm)',
            padding: '28px 32px', borderRadius: 4, display: 'flex', flexDirection: 'column', gap: 14, minHeight: 160,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24 }}>
              <h3 style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12.5, letterSpacing: '0.14em', color: 'var(--terracota-deep)', lineHeight: 1.3 }}>{c.t}</h3>
              <span style={{ color: 'var(--terracota-deep)', fontSize: 18, opacity: 0.7, flexShrink: 0 }}>↑</span>
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.6, opacity: 0.82 }}>{c.d}</p>
          </div>
        ))}
      </div>
    </section>

    {/* OS 5 EIXOS — Raízes com foto */}
    <section style={{ position: 'relative', padding: '120px 56px', background: 'var(--raizes)', color: 'var(--linho)', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `url(assets/foto-detalhe.png) center/cover`,
        opacity: 0.22, mixBlendMode: 'overlay', pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <div className="eyebrow-mono" style={{ color: 'var(--terracota)', opacity: 0.85, marginBottom: 16 }}>(03) — Os pilares</div>
          <h2 className="display-serif" style={{ fontSize: 64, fontWeight: 300, lineHeight: 1.05 }}>Os <em>5 eixos</em> do teu sistema operativo</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            { n: '01', t: 'Clareza mental', d: 'Menos ruído interno, mais consciência sobre pensamentos, decisões e prioridades.' },
            { n: '02', t: 'Regulação emocional', d: 'Aprender a gerir emoções e responder com equilíbrio, não reatividade.' },
            { n: '03', t: 'Energia corporal', d: 'Alinhar corpo e mente como um sistema único.' },
            { n: '04', t: 'Relações saudáveis', d: 'Construir ligações mais seguras em casa, no trabalho e contigo.' },
            { n: '05', t: 'Performance sustentável', d: 'Alcançar resultados sem esgotamento, apoiando longevidade emocional e cognitiva.' },
          ].map(p => (
            <div key={p.n} style={{
              background: 'rgba(54,21,7,0.55)', backdropFilter: 'blur(6px)',
              border: '1px solid rgba(246,244,233,.18)', padding: '32px 28px 36px',
              display: 'flex', flexDirection: 'column', gap: 14, minHeight: 220,
            }}>
              <div className="eyebrow-mono" style={{ color: 'var(--terracota)', opacity: 0.85 }}>({p.n})</div>
              <div className="display-serif" style={{ fontSize: 26, lineHeight: 1.1, fontWeight: 400 }}>{p.t}</div>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, opacity: 0.82 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* 4 ÁREAS DE IMPACTO — Linho-warm */}
    <section style={{ padding: '120px 56px', background: 'var(--linho-warm)', color: 'var(--terra)' }}>
      <div style={{ textAlign: 'center', marginBottom: 64 }}>
        <div className="eyebrow-mono" style={{ color: 'var(--terracota)', opacity: 0.7, marginBottom: 16 }}>(04) — Aplicações</div>
        <h2 className="display-serif" style={{ fontSize: 56, fontWeight: 300, lineHeight: 1.05 }}>
          Este sistema aplica-se em<br/><em>4 áreas</em> de impacto
        </h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, maxWidth: 1100, margin: '0 auto' }}>
        {[
          { t: 'INTERVENÇÃO INTEGRADA EM SAÚDE', d: <><a style={{ color: 'var(--terracota)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Consultas</a> de psicologia, nutrição, medicina integrativa e mindfulness, focadas em potenciar bem-estar físico e mental e em prevenir doença psicológica, dando uma resposta eficaz em situações em que já existe perturbação instalada (ansiedade, burnout, depressão, trauma, perturbação de comportamento alimentar e outros). Em Lisboa, Porto e online.</> },
          { t: 'CORPORATE', d: <>Consultas individuais, intervenção em crise, programas de formação/intervenção, e palestras para <a style={{ color: 'var(--terracota)', textDecoration: 'underline', textUnderlineOffset: 3 }}>equipas e lideranças</a>, serviços promotores de clareza mental/foco, regulação emocional, relações saudáveis e performance sustentável.</> },
          { t: 'RECURSOS ONLINE', d: <>Para além das consultas que realizamos em formato online, temos <a style={{ color: 'var(--terracota)', textDecoration: 'underline', textUnderlineOffset: 3 }}>guias e ebooks</a> (como a nossa Mochila de Saúde Emocional), <a style={{ color: 'var(--terracota)', textDecoration: 'underline', textUnderlineOffset: 3 }}>programas online e meditações</a> para cuidares do teu sistema ao teu ritmo, sempre alinhados com os 5 eixos do método.</> },
          { t: 'LITERACIA EM SAÚDE MENTAL', d: <><a style={{ color: 'var(--terracota)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Blog</a>, redes sociais, <a style={{ color: 'var(--terracota)', textDecoration: 'underline', textUnderlineOffset: 3 }}>newsletters</a> e colaboração regular com os media, sobre saúde mental integrativa, longevidade emocional e bem-estar no trabalho e na vida.</> },
        ].map((c, i) => (
          <div key={i} style={{
            border: '1px solid var(--terracota)', background: 'var(--linho)',
            padding: '28px 32px', borderRadius: 4, display: 'flex', flexDirection: 'column', gap: 14, minHeight: 200,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 24 }}>
              <h3 style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 12.5, letterSpacing: '0.14em', color: 'var(--terracota-deep)', lineHeight: 1.3 }}>{c.t}</h3>
              <span style={{ color: 'var(--terracota-deep)', fontSize: 18, opacity: 0.7, flexShrink: 0 }}>↑</span>
            </div>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, opacity: 0.82 }}>{c.d}</p>
          </div>
        ))}
      </div>
    </section>

    {/* 3 CAMINHOS DE ENTRADA — Raízes */}
    <section style={{ padding: '120px 56px', background: 'var(--raizes)', color: 'var(--linho)' }}>
      <div style={{ textAlign: 'center', marginBottom: 72 }}>
        <div className="eyebrow-mono" style={{ color: 'var(--terracota)', opacity: 0.85, marginBottom: 16 }}>(05) — Próximos passos</div>
        <h2 className="display-serif" style={{ fontSize: 56, fontWeight: 300, lineHeight: 1.05 }}>Por onde queres <em>começar</em>?</h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, maxWidth: 1180, margin: '0 auto' }}>
        {[
          {
            t: 'Quero cuidar de mim',
            d: 'Marca uma consulta, explora os nossos recursos online ou descobre as iniciativas que temos a decorrer.',
            ctas: ['Marca uma consulta', 'Recursos online', 'Iniciativas'],
            bg: 'var(--musgo)',
            txt: 'var(--terra)',
            ctaBg: 'var(--raizes-deep)',
            ctaTxt: 'var(--linho)',
          },
          {
            t: 'Quero levar isto à minha equipa',
            d: 'Conhece a nossa área Corporate ou subscreve a nossa newsletter dedicada a empresas e lideranças.',
            ctas: ['Área Corporate', 'Newsletter Corporate'],
            bg: 'var(--raizes-deep)',
            txt: 'var(--linho)',
            ctaBg: 'var(--terracota)',
            ctaTxt: 'var(--linho)',
          },
          {
            t: 'Quero aprender mais',
            d: 'Subscreve a newsletter geral ou explora os artigos com práticas e investigação em saúde mental integrativa.',
            ctas: ['Newsletter geral', 'Artigos'],
            bg: 'var(--raizes-soft)',
            txt: 'var(--linho)',
            ctaBg: 'var(--raizes-deep)',
            ctaTxt: 'var(--linho)',
          },
        ].map((c, i) => (
          <div key={i} style={{
            background: c.bg, color: c.txt,
            padding: '40px 32px 36px', borderRadius: 4,
            display: 'flex', flexDirection: 'column', gap: 18, minHeight: 360,
          }}>
            <div className="eyebrow-mono" style={{ opacity: 0.7 }}>(0{i+1})</div>
            <h3 className="display-serif" style={{ fontSize: 28, lineHeight: 1.1, fontWeight: 400 }}>{c.t}</h3>
            <p style={{ fontSize: 14, lineHeight: 1.6, opacity: 0.88, flex: 1 }}>{c.d}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 8 }}>
              {c.ctas.map(t => (
                <a key={t} className="btn btn-arrow" style={{
                  background: c.ctaBg, color: c.ctaTxt,
                  padding: '11px 18px', fontSize: 12, letterSpacing: '0.06em', justifyContent: 'space-between',
                }}>{t.toUpperCase()}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* CTA FINAL — Terra com foto */}
    <section style={{ position: 'relative', padding: '120px 56px', 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: 40, fontWeight: 300, fontStyle: 'italic', lineHeight: 1.35 }}>
          Se procuras bem-estar sustentável a 360º e não apenas uma melhoria pontual, explora o <span style={{ color: 'var(--terracota)' }}>Transformar OS</span>, o nosso método de saúde mental integrativa que une <em>ciência, empatia e prática</em>.
        </h2>
      </div>
    </section>

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

Object.assign(window, { TransformarOSPage });