// Transformar — Homepage (full-bleed, 1440 design width)

const Homepage = () =>
<div style={{ background: 'var(--linho)', color: 'var(--terra)', width: 1440 }}>
    <Nav theme="linho" brandVariant="wordmark" />
    <Hero />
    <ManifestoMarquee />
    <AreasIntro />
    <HealthBlock />
    <CorporateBlock />
    <IncubadoraBlock />
    <TransformarOSBlock />
    <FundadoraBlock />
    <NovidadesBlock />
    <CTAFinal />
    <Footer theme="terra" />
  </div>;


/* ------------------ HERO ------------------ */
const Hero = () =>
<section style={{
  position: 'relative',
  padding: '80px 56px 120px',
  minHeight: 760,
  display: 'grid',
  gridTemplateColumns: '1.3fr 1fr',
  gap: 60,
  background: 'var(--linho)'
}}>
    {/* Side meta */}
    <div style={{ position: 'absolute', top: 92, right: 56, display: 'flex', gap: 32, alignItems: 'center' }}>
      <span className="eyebrow-mono" style={{ opacity: 0.55 }}>EST. 2018 — LISBOA</span>
      <span className="eyebrow-mono" style={{ opacity: 0.55 }}>v.2026</span>
    </div>

    <div style={{ paddingTop: 80, position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 36 }}>
        <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--terracota)' }}></span>
        <span className="eyebrow-mono">Manifesto para a mudança</span>
      </div>

      <h1 className="display-serif" style={{ fontSize: 116, lineHeight: 0.95, letterSpacing: '-0.035em', maxWidth: 900 }}>
        Todos têm <span style={{ fontStyle: 'italic', color: 'var(--terracota)' }}>potencial</span><br />
        para <span style={{ fontStyle: 'italic', color: 'var(--raizes)' }}>brilhar</span>.
      </h1>

      <p className="body-lg" style={{ marginTop: 40, maxWidth: 540, opacity: 0.78 }}>
        Cuidar da saúde mental é essencial para viver plenamente. Corpo e mente, trabalhados em conjunto, com ciência e humanidade.
      </p>

      <div style={{ marginTop: 44, display: 'flex', gap: 14 }}>
        <a className="btn btn-primary btn-arrow">Marcar consulta</a>
        <a className="btn btn-outline btn-arrow">Conhecer o Transformar OS</a>
      </div>

      {/* Stats */}
      <div style={{ marginTop: 96, display: 'flex', gap: 64, paddingTop: 36, borderTop: '1px solid rgba(54,21,7,.12)', maxWidth: 720 }}>
        {[
      { n: '12k+', l: 'pessoas acompanhadas' },
      { n: '38', l: 'profissionais' },
      { n: '4', l: 'áreas integradas' }].
      map((s) =>
      <div key={s.l}>
            <div className="display-serif" style={{ fontSize: 48 }}>{s.n}</div>
            <div className="small" style={{ marginTop: 6, opacity: 0.6 }}>{s.l}</div>
          </div>
      )}
      </div>
    </div>

    {/* Right visual stack */}
    <div style={{ position: 'relative', minHeight: 600 }}>
      <div style={{
      position: 'absolute', top: 40, right: 0, width: 340, height: 440,
      background: `url(assets/foto-detalhe.png) center/cover`,
      borderRadius: 4,
      filter: 'saturate(0.85) contrast(1.02)'
    }} />
      <div style={{
      position: 'absolute', bottom: 0, left: 0, width: 280, height: 340,
      background: 'var(--terracota)',
      borderRadius: 4,
      padding: 28,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      color: 'var(--linho)'
    }}>
        <div className="eyebrow-mono" style={{ opacity: 0.85 }}>Em destaque</div>
        <div>
          <div className="display-serif" style={{ fontSize: 38, lineHeight: 1 }}>
            Incubadora<br /><em style={{ opacity: 0.85 }}>2026</em>
          </div>
          <p style={{ fontSize: 13, marginTop: 16, opacity: 0.85 }}>Candidaturas abertas para profissionais de saúde mental.</p>
          <a style={{ fontSize: 13, marginTop: 20, display: 'inline-block', borderBottom: '1px solid currentColor', paddingBottom: 2 }}>Saber mais →</a>
        </div>
      </div>
      {/* Brand mark badge — uses real logo */}
      <div style={{
      position: 'absolute', top: 0, left: 60, width: 160, height: 160,
      display: 'grid', placeItems: 'center', textAlign: 'center'
    }}>
        <img src="assets/logo.png" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain', opacity: 0.95 }} />
      </div>
    </div>
  </section>;


/* ------------------ MARQUEE ------------------ */
const ManifestoMarquee = () => {
  const phrase = "saúde mental integrada · corpo e mente · ciência e humanidade · prevenção é coragem · ";
  return (
    <div style={{ background: 'var(--terra)', color: 'var(--linho)', overflow: 'hidden', padding: '28px 0' }}>
      <div className="marquee-track" style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 44, fontWeight: 300 }}>
        {Array.from({ length: 4 }).map((_, i) =>
        <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 60 }}>
            {phrase}
          </span>
        )}
      </div>
    </div>);

};

/* ------------------ AREAS INTRO ------------------ */
const AreasIntro = () =>
<section style={{ padding: '120px 56px 60px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'end' }}>
      <div>
        <div className="eyebrow-mono" style={{ opacity: 0.55 }}>(01) — As nossas áreas</div>
        <h2 className="display-serif" style={{ fontSize: 84, marginTop: 24, lineHeight: 0.95 }}>
          Quatro<br />territórios.<br />
          <em style={{ color: 'var(--musgo-deep)' }}>Uma só</em> visão.
        </h2>
      </div>
      <div style={{ paddingBottom: 18 }}>
        <p className="body-lg" style={{ maxWidth: 560, opacity: 0.78 }}>
          Cada área tem a sua linguagem, o seu ritmo e os seus rituais. Mas todas partilham a mesma raiz: a saúde mental como infraestrutura da vida.
        </p>
        <div style={{ marginTop: 40, display: 'flex', gap: 32, fontSize: 13, opacity: 0.7 }}>
          <span>↓ scroll para explorar</span>
          <span>Health · Corporate · Incubadora · OS</span>
        </div>
      </div>
    </div>
  </section>;


/* ------------------ HEALTH (Musgo) ------------------ */
const HealthBlock = () =>
<section style={{ background: 'var(--musgo)', color: 'var(--terra)', padding: '120px 56px', position: 'relative' }} className="grain">
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
          <span className="eyebrow-mono">/01 — Health</span>
          <span style={{ width: 60, height: 1, background: 'var(--terra)', opacity: 0.3 }}></span>
          <span className="eyebrow-mono" style={{ opacity: 0.55 }}>B2C · Online + Presencial</span>
        </div>
        <h3 className="display-serif" style={{ fontSize: 76 }}>
          Saúde mental,<br />integrada<br />e <em>contigo</em>.
        </h3>
        <p className="body-lg" style={{ marginTop: 28, maxWidth: 460, opacity: 0.82 }}>
          Psicologia, medicina e nutrição em conjunto. Para pessoas, equipas e organizações em contextos de elevada exigência.
        </p>
        <ul style={{ listStyle: 'none', marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {['Consultas individuais', 'Programas para casais e famílias', 'Acompanhamento nutricional', 'Avaliação psicológica'].map((s) =>
        <li key={s} style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 16 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--terra)' }}></span>
              {s}
            </li>
        )}
        </ul>
        <div style={{ marginTop: 44, display: 'flex', gap: 14 }}>
          <a className="btn btn-primary btn-arrow">Marcar consulta</a>
          <a className="btn btn-outline btn-arrow">Conhecer especialistas</a>
        </div>
      </div>

      <div style={{ position: 'relative', height: 620 }}>
        <div style={{
        position: 'absolute', inset: 0,
        background: `url(assets/foto-sala-musgo.png) center/cover`,
        borderRadius: 4
      }} />
        <div style={{
        position: 'absolute', bottom: 24, left: 24, right: 24,
        background: 'rgba(246,244,233,.94)', backdropFilter: 'blur(8px)',
        padding: '20px 24px', borderRadius: 4,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center'
      }}>
          <div>
            <div className="eyebrow-mono" style={{ opacity: 0.55 }}>Match personalizado</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, marginTop: 4, lineHeight: 1.15 }}>Encontramos o profissional <em>certo para ti</em>.</div>
          </div>
          <a className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 13 }}>Começar</a>
        </div>
      </div>
    </div>
  </section>;


/* ------------------ CORPORATE (Terra) ------------------ */
const CorporateBlock = () =>
<section style={{ background: 'var(--terra)', color: 'var(--linho)', padding: '120px 56px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
          <span className="eyebrow-mono" style={{ color: 'var(--terracota)' }}>/02 — Corporate</span>
          <span style={{ width: 60, height: 1, background: 'var(--linho)', opacity: 0.3 }}></span>
          <span className="eyebrow-mono" style={{ opacity: 0.55 }}>B2B</span>
        </div>
        <h3 className="display-serif" style={{ fontSize: 76 }}>
          Liderança<br />
          <em>sustentável</em>,<br />
          decisão consciente.
        </h3>
        <p className="body-lg" style={{ marginTop: 28, maxWidth: 480, opacity: 0.78 }}>
          Programas de bem-estar emocional e desempenho para empresas que recusam normalizar a exaustão. Trabalhamos com equipas de elevada exigência.
        </p>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, paddingTop: 36, borderTop: '1px solid rgba(246,244,233,.18)' }}>
          {[
        { n: '+40', l: 'organizações' },
        { n: '4.8/5', l: 'NPS de impacto' },
        { n: '−32%', l: 'burnout reportado' },
        { n: '12 wks', l: 'programa-base' }].
        map((s) =>
        <div key={s.l}>
              <div className="display-serif" style={{ fontSize: 44 }}>{s.n}</div>
              <div className="small" style={{ marginTop: 4, opacity: 0.6 }}>{s.l}</div>
            </div>
        )}
        </div>
      </div>

      <div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {[
        { tag: 'Diagnóstico', t: 'Mapa de saúde mental organizacional', d: 'Survey clínico + entrevistas qualitativas em 4 semanas.' },
        { tag: 'Formação', t: 'Liderança consciente para C-level', d: 'Programa intensivo de 12 semanas com supervisão individual.' },
        { tag: 'Intervenção', t: 'Apoio psicológico para colaboradores', d: 'Plataforma + rede de profissionais. Gestão e relatórios.' }].
        map((card, i) =>
        <div key={i} style={{
          border: '1px solid rgba(246,244,233,.15)',
          borderRadius: 4, padding: 28,
          display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 24, alignItems: 'center',
          transition: 'background .2s ease'
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(231,128,87,0.08)'}
        onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
          
              <span className="eyebrow-mono" style={{ color: 'var(--terracota)' }}>{card.tag}</span>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, lineHeight: 1.1 }}>{card.t}</div>
                <p style={{ fontSize: 13, marginTop: 6, opacity: 0.65 }}>{card.d}</p>
              </div>
              <span style={{ fontSize: 22 }}>→</span>
            </div>
        )}
        </div>
        <a className="btn btn-arrow" style={{ marginTop: 36, background: 'var(--terracota)', color: 'var(--terra)' }}>Pedir proposta</a>
      </div>
    </div>
  </section>;


/* ------------------ INCUBADORA (Terracota) — DESTAQUE ------------------ */
const IncubadoraBlock = () =>
<section style={{ background: 'var(--terracota)', color: 'var(--linho)', padding: '0', position: 'relative' }}>
    {/* Top eyebrow strip */}
    <div style={{ padding: '40px 56px', borderBottom: '1px solid rgba(246,244,233,.18)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span className="eyebrow-mono">/03 — Incubadora Transformar</span>
      <span className="eyebrow-mono" style={{ opacity: 0.7 }}>Comunidade & Desenvolvimento Profissional</span>
    </div>

    {/* Big editorial */}
    <div style={{ padding: '100px 56px 40px' }}>
      <h3 className="display-serif" style={{ fontSize: 168, lineHeight: 0.9, letterSpacing: '-0.04em', fontWeight: 300 }}>
        <em>Cuidar</em> de quem<br />
        cuida em <span style={{ color: 'var(--terra)' }}>saúde</span><br />
        <span style={{ color: 'var(--terra)' }}>mental integrativa</span>.
      </h3>
    </div>

    <div style={{ padding: '0 56px 80px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'flex-end' }}>
      <p className="body-lg" style={{ fontSize: 20, lineHeight: 1.5, opacity: 0.92, maxWidth: 720 }}>
        Um <strong style={{ fontWeight: 600 }}>ecossistema profissional</strong> de interajuda, formação contínua, supervisão e colaboração. Combatemos o isolamento clínico, promovemos boas práticas e sustentamos o crescimento pessoal e profissional em saúde mental integrativa.
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'flex-end' }}>
        <a className="btn btn-arrow" style={{ background: 'var(--terra)', color: 'var(--linho)', padding: '16px 26px', fontSize: 13, letterSpacing: '0.06em' }}>QUERO SABER MAIS</a>
        <a className="btn btn-outline btn-arrow" style={{ padding: '16px 26px', fontSize: 13, letterSpacing: '0.06em', borderColor: 'var(--linho)', color: 'var(--linho)' }}>FALAR COM A EQUIPA</a>
      </div>
    </div>

    {/* Dois modelos */}
    <div style={{ borderTop: '1px solid rgba(246,244,233,.18)', display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      {[
        {
          t: 'Profissional Residente',
          d: 'Integra a equipa clínica de forma contínua. Alta pertença, suporte estruturado, partilha clínica permanente. Casos referenciados, salas em Lisboa e Porto, supervisões semanais, formação interna — tudo incluído.',
          tag: 'Modelo de pertença',
        },
        {
          t: 'Profissional Incubado',
          d: 'Para profissionais autónomos que procuram apoio, formação e pertença, mantendo a sua independência. Acesso a salas, supervisões, terapeutas ASA em ausências, formação interna e consultadoria — em regime de serviços pagos.',
          tag: 'Modelo autónomo',
        },
      ].map((m, i) => (
        <div key={i} style={{
          padding: '48px 40px 56px',
          borderRight: i === 0 ? '1px solid rgba(246,244,233,.18)' : 'none',
          background: i === 1 ? 'rgba(54,21,7,0.18)' : 'transparent',
        }}>
          <div className="eyebrow-mono" style={{ opacity: 0.7, marginBottom: 16 }}>({String(i+1).padStart(2,'0')}) — {m.tag}</div>
          <div className="display-serif" style={{ fontSize: 40, lineHeight: 1.05, marginBottom: 18, fontWeight: 400 }}>{m.t}</div>
          <p style={{ fontSize: 14.5, lineHeight: 1.6, opacity: 0.88, maxWidth: 540 }}>{m.d}</p>
        </div>
      ))}
    </div>

    {/* O que disponibilizamos — 4 áreas */}
    <div style={{ borderTop: '1px solid rgba(246,244,233,.18)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
      {[
        { t: 'Formação contínua', d: 'Saúde mental integrativa, EMDR, luto, intervenção em crise, trauma. Atualização científica regular.' },
        { t: 'Supervisão', d: 'Grupo, individual e especializada por área de intervenção. SOS garantidas 24h.' },
        { t: 'Consultadoria', d: 'Comunicação em saúde, liderança em saúde, desenvolvimento de carreira e projetos profissionais.' },
        { t: 'Comunidade', d: 'Espaços de partilha e reflexão. Eventos internos. Cultura de colaboração, não competição.' },
      ].map((p, i) =>
      <div key={i} style={{
        padding: '40px 28px 48px',
        borderRight: i < 3 ? '1px solid rgba(246,244,233,.18)' : 'none',
        display: 'flex', flexDirection: 'column', gap: 16, minHeight: 240
      }}>
          <div className="eyebrow-mono" style={{ opacity: 0.7 }}>(0{i+1})</div>
          <div className="display-serif" style={{ fontSize: 26, lineHeight: 1.1, fontWeight: 400 }}>{p.t}</div>
          <p style={{ fontSize: 13, lineHeight: 1.55, opacity: 0.82 }}>{p.d}</p>
        </div>
      )}
    </div>

    {/* Quote-pull do manifesto (texto real) */}
    <div style={{ background: 'var(--terra)', color: 'var(--linho)', padding: '70px 56px', textAlign: 'center' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 36, lineHeight: 1.25, fontWeight: 300, maxWidth: 920, margin: '0 auto' }}>
        Não acreditamos em crescimento solitário.<br/>
        Acreditamos em <span style={{ color: 'var(--terracota)' }}>evolução acompanhada</span>.
      </div>
    </div>
  </section>;


/* ------------------ TRANSFORMAR OS (Raízes) — DESTAQUE TECH ------------------ */
const TransformarOSBlock = () =>
<section style={{ background: 'var(--raizes)', color: 'var(--linho)', padding: '120px 56px', position: 'relative', overflow: 'hidden' }}>
    {/* Top bar terminal-vibe */}
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 80, fontFamily: 'var(--font-mono)', fontSize: 12, opacity: 0.7 }}>
      <span>/04 — TRANSFORMAR.OS</span>
      <span>·</span>
      <span>v.2.6.1 · operating-system://human</span>
      <span>·</span>
      <span>UPTIME 99.98%</span>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
      <div>
        <h3 className="display-serif" style={{ fontSize: 124, lineHeight: 0.92, letterSpacing: '-0.03em' }}>
          O método que<br /><em>otimiza</em> o teu<br />sistema.
        </h3>
        <p className="body-lg" style={{ marginTop: 32, maxWidth: 480, opacity: 0.82 }}>
          Operating System Humano. Quando transformas a tua saúde mental, transformas tudo dentro e fora de ti — uma framework de 6 módulos para integrares no dia-a-dia.
        </p>

        <div style={{ marginTop: 48, fontFamily: 'var(--font-mono)', fontSize: 13, lineHeight: 1.8, background: 'rgba(54,21,7,.35)', padding: 24, borderRadius: 4, border: '1px solid rgba(246,244,233,.12)' }}>
          <div style={{ opacity: 0.55 }}>$ transformar-os --init --user=tu</div>
          <div>→ <span style={{ color: 'var(--terracota)' }}>module</span> sleep.................OK</div>
          <div>→ <span style={{ color: 'var(--terracota)' }}>module</span> nutrition............OK</div>
          <div>→ <span style={{ color: 'var(--terracota)' }}>module</span> movement..............OK</div>
          <div>→ <span style={{ color: 'var(--terracota)' }}>module</span> mind.................<span style={{ opacity: 0.5 }}>installing...</span></div>
          <div style={{ opacity: 0.55, marginTop: 8 }}># 6 módulos · 90 dias · 1 vida</div>
        </div>

        <a className="btn btn-arrow" style={{ marginTop: 40, background: 'var(--terracota)', color: 'var(--terra)', padding: '16px 26px', fontSize: 15 }}>
          Iniciar diagnóstico
        </a>
      </div>

      {/* Module grid */}
      <div>
        <div className="eyebrow-mono" style={{ opacity: 0.6, marginBottom: 20 }}>/ os.modules — 6 PILARES</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'rgba(246,244,233,.12)' }}>
          {[
        { id: '01', t: 'sleep', l: 'Sono', d: 'Higiene + cronotipo' },
        { id: '02', t: 'nutrition', l: 'Nutrição', d: 'Cognitiva + metabólica' },
        { id: '03', t: 'movement', l: 'Movimento', d: 'Fisiologia diária' },
        { id: '04', t: 'mind', l: 'Mente', d: 'Regulação + foco' },
        { id: '05', t: 'connection', l: 'Conexão', d: 'Vínculos saudáveis' },
        { id: '06', t: 'purpose', l: 'Propósito', d: 'Direção e valores' }].
        map((m) =>
        <div key={m.id} style={{ background: 'var(--raizes)', padding: '28px 24px', minHeight: 180, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <span className="eyebrow-mono" style={{ color: 'var(--terracota)' }}>/{m.t}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, opacity: 0.5 }}>{m.id}</span>
              </div>
              <div>
                <div className="display-serif" style={{ fontSize: 30 }}>{m.l}</div>
                <div className="small" style={{ marginTop: 6, opacity: 0.6 }}>{m.d}</div>
              </div>
            </div>
        )}
        </div>

        {/* Big quote */}
        <div style={{ marginTop: 32, padding: 28, border: '1px dashed rgba(246,244,233,.3)', borderRadius: 4 }}>
          <div className="display-serif-italic" style={{ fontSize: 22, lineHeight: 1.35 }}>
            "Não é fraqueza pedir ajuda — é coragem para transformar."
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ------------------ FUNDADORA ------------------ */
const FundadoraBlock = () =>
<section style={{ padding: '140px 56px', background: 'var(--linho)' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'center' }}>
      <div style={{ position: 'relative', height: 620 }}>
        <div style={{
        position: 'absolute', inset: 0,
        background: `url(assets/filipa-jardim-da-silva.png) center top/cover`,
        filter: 'saturate(0.95)'
      }} />
        <div style={{ position: 'absolute', bottom: -24, right: -24, background: 'var(--terra)', color: 'var(--linho)', padding: '20px 24px', maxWidth: 280 }}>
          <div className="eyebrow-mono" style={{ opacity: 0.6 }}>Fundadora</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, marginTop: 6, lineHeight: 1.1 }}>Filipa Jardim<br />da Silva</div>
          <div className="small" style={{ marginTop: 8, opacity: 0.7 }}>Psicóloga Clínica · CEO &amp; Diretora Clínica</div>
        </div>
      </div>

      <div>
        <div className="eyebrow-mono" style={{ opacity: 0.55 }}>(02) — Sobre Nós</div>
        <h2 className="display-serif" style={{ fontSize: 72, marginTop: 24, lineHeight: 1 }}>
          Recusamos a cultura<br />
          que normaliza<br />
          a <em style={{ color: 'var(--terracota)' }}>exaustão</em>.
        </h2>
        <p className="body-lg" style={{ marginTop: 32, maxWidth: 580, opacity: 0.78 }}>
          A Academia Transformar nasceu da convicção de que prevenção é coragem. Romantizar o sacrifício e valorizar o silêncio emocional é uma escolha — uma escolha que recusamos diariamente, no consultório e fora dele.
        </p>

        <div style={{ marginTop: 36, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px 32px', maxWidth: 580 }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Psicóloga especialista em Psicologia Clínica e da Saúde</div>
            <div className="small" style={{ marginTop: 2, opacity: 0.6 }}>Cédula profissional Nº 10649</div>
          </div>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>Coach Profissional</div>
            <div className="small" style={{ marginTop: 2, opacity: 0.6 }}>Nº 5580-2017PT</div>
          </div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Formadora Certificada e Autora</div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>CEO e Diretora Clínica da Transformar</div>
        </div>

        <div style={{ marginTop: 44, display: 'flex', gap: 14 }}>
          <a className="btn btn-primary btn-arrow">Manifesto completo</a>
          <a className="btn btn-outline btn-arrow">Conhecer a equipa</a>
        </div>
      </div>
    </div>
  </section>;


/* ------------------ NOVIDADES ------------------ */
const NovidadesBlock = () =>
<section style={{ padding: '0 56px 140px', background: 'var(--linho)' }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56 }}>
      <div>
        <div className="eyebrow-mono" style={{ opacity: 0.55 }}>(03) — O que estamos a pensar e a construir</div>
        <h2 className="display-serif" style={{ fontSize: 64, marginTop: 16 }}>Novidades</h2>
      </div>
      <a className="btn btn-outline btn-arrow">Ver tudo</a>
    </div>

    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 32 }}>
      <article style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ height: 380, background: `url(assets/foto-sala-terracota.png) center/cover`, marginBottom: 24 }} />
        <div className="eyebrow-mono" style={{ color: 'var(--terracota)' }}>Artigo · 12 min</div>
        <h3 className="display-serif" style={{ fontSize: 38, marginTop: 12, lineHeight: 1.05 }}>
          Porque é que prevenir saúde mental é mais barato do que tratar?
        </h3>
        <p style={{ marginTop: 12, opacity: 0.7, fontSize: 15, maxWidth: 520 }}>
          Um estudo aplicado em 12 organizações portuguesas — e o que aprendemos sobre ROI emocional.
        </p>
      </article>
      <article style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ height: 380, background: 'var(--musgo)', marginBottom: 24, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 24, left: 24 }} className="eyebrow-mono">Workshop</div>
          <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, fontFamily: 'var(--font-display)', fontSize: 36, color: 'var(--terra)', lineHeight: 1 }}>
            Regulação<br />emocional<br /><em>na prática</em>
          </div>
        </div>
        <div className="eyebrow-mono" style={{ color: 'var(--musgo-deep)' }}>Loja · Workshop ao vivo</div>
        <h3 className="display-serif" style={{ fontSize: 28, marginTop: 12, lineHeight: 1.1 }}>
          17 maio · Lisboa · 4h
        </h3>
        <p style={{ marginTop: 8, opacity: 0.7, fontSize: 14 }}>30 lugares · €120</p>
      </article>
      <article style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ height: 380, background: 'var(--terra)', marginBottom: 24, position: 'relative', color: 'var(--linho)' }}>
          <div style={{ position: 'absolute', top: 24, left: 24 }} className="eyebrow-mono">Podcast · Ep. 47</div>
          <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, fontFamily: 'var(--font-display)', fontSize: 32, lineHeight: 1 }}>
            "<em>Burnout</em> não é<br />medalha."
          </div>
        </div>
        <div className="eyebrow-mono" style={{ color: 'var(--terra)' }}>Audio · 38 min</div>
        <h3 className="display-serif" style={{ fontSize: 28, marginTop: 12, lineHeight: 1.1 }}>
          Conversa com Tiago Monteiro
        </h3>
        <p style={{ marginTop: 8, opacity: 0.7, fontSize: 14 }}>CEO Health · Liderança em saúde</p>
      </article>
    </div>
  </section>;


/* ------------------ CTA FINAL ------------------ */
const CTAFinal = () =>
<section style={{ padding: '140px 56px', background: 'var(--linho-deep)', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
    <img src="assets/logo.png" alt="" style={{ position: 'absolute', right: -120, top: -80, width: 560, opacity: 0.18 }} />
    <img src="assets/logo.png" alt="" style={{ position: 'absolute', left: -100, bottom: -80, width: 380, opacity: 0.12, transform: 'rotate(180deg)' }} />
    <div className="eyebrow-mono" style={{ opacity: 0.55, position: 'relative' }}>Começar</div>
    <h2 className="display-serif" style={{ fontSize: 124, marginTop: 24, lineHeight: 0.95, letterSpacing: '-0.03em', position: 'relative' }}>
      Quando transformas a tua<br />
      saúde mental, <em style={{ color: 'var(--terracota)' }}>transformas tudo.</em>
    </h2>
    <div style={{ marginTop: 48, display: 'flex', gap: 14, justifyContent: 'center' }}>
      <a className="btn btn-primary btn-arrow" style={{ padding: '18px 30px', fontSize: 16 }}>Marcar consulta</a>
      <a className="btn btn-outline btn-arrow" style={{ padding: '18px 30px', fontSize: 16 }}>Falar connosco</a>
    </div>
  </section>;


Object.assign(window, { Homepage });