function Home() {
  const c = window.T5_CONTENT;
  return <>
    <a className="skip-link" href="#conteudo">Pular para o conteúdo</a>
    <header className="site-header">
      <div className="wrap site-header__inner">
        <div className="site-header__primary">
          <a href="#inicio" className="brand brand--image" aria-label="Formação Experiencial na ACP"><img src="assets/kv-extracted/logo-formacao-acp.png" alt="Formação Experiencial na ACP" /></a>
          <DisabledButton small href={c.config.checkoutUrl}>{c.header.cta}</DisabledButton>
        </div>
        <div className="header-stats" aria-label="Indicadores da Formação">{c.header.stats.map((stat) => <span key={stat}><CountUpText>{stat}</CountUpText></span>)}</div>
      </div>
    </header>
    <main id="conteudo">
      <section className="hero" id="inicio" data-aurora="navy,navy,blue,blue,mustard" data-aurora-grao="0.05" data-aurora-opacidade="0.62">
        <div className="hero__texture" aria-hidden="true"></div>
        <Flora plano="fundo" especie="monstera" pos="dir-topo" />
        <Flora plano="frente" especie="sprig" pos="esq-base" />
        <div className="wrap hero__grid">
          <div className="hero__content">
            <p className="status-pill load-1">{c.hero.seal}</p>
            {/* Quebra controlada: a primeira frase fecha a linha e a segunda entra
                com peso próprio. Mesma string de content.js, só reagrupada. */}
            <h1 className="load-2">{(() => {
              const [abertura, ...resto] = c.hero.title.split(/(?<=\.)\s+/);
              return <><span className="hero__h1-a">{abertura}</span><span className="hero__h1-b">{resto.join(' ')}</span></>;
            })()}</h1>
            <p className="hero__subtitle load-3">{c.hero.subtitle}</p>
            <p className="hero__support load-3">{c.hero.supporting}</p>
            <DisabledButton className="load-4" href={c.config.checkoutUrl}>{c.config.primaryCta}</DisabledButton>
            <p className="hero__proof load-5">{c.hero.proof}</p>
          </div>
          <div className="hero__art load-2" aria-label="Anita Bacellar e identidade da Formação">
            <img src="assets/kv-extracted/anita-recorte.png" alt="Anita Bacellar" />
            {/* Distribuídos dos dois lados da foto, flutuando sobre ela. */}
            <div className="hero__badges hero__badges--esq">{c.hero.badges.filter((_, i) => i % 2 === 0).map((badge) => <span key={badge}>{badge}</span>)}</div>
            <div className="hero__badges hero__badges--dir">{c.hero.badges.filter((_, i) => i % 2 === 1).map((badge) => <span key={badge}>{badge}</span>)}<TechnicalPlaceholder label="Selo oficial do MEC pendente" /></div>
          </div>
        </div>
      </section>

      <section className="section section--paper" id="transformacao">
        <div className="wrap"><SectionTitle layout="duplo" eyebrow="01 / TRANSFORMAÇÃO" title={c.transformation.title} intro={c.transformation.intro} />
          <div className="quote-grid">{c.transformation.testimonials.map((item) => <TestimonialCard key={item.name} item={item} />)}</div>
          <div className="inline-cta"><h3>{c.transformation.closingTitle}</h3><p>{c.transformation.closing}</p><DisabledButton href={c.config.checkoutUrl}>{c.transformation.cta}</DisabledButton></div>
        </div>
      </section>

      <section className="section section--navy pains"><div className="wrap pains__layout">
        <header className="pains__cabeca section-title section-title--light">
          <Eyebrow>02 / RECONHECIMENTO</Eyebrow>
          <h2 data-reveal="words">{c.pains.title}</h2>
          <p className="section-intro" data-reveal="block">{c.pains.intro}</p>
        </header>
        <ol className="pain-trilha">{c.pains.items.map(([title, text], index) => <li className="pain-card vidro" key={title} data-reveal="block"><Grafismo tipo={['caminho', 'pessoas', 'livro', 'pessoas', 'selo'][index]} className="pain-card__grafismo" /><span className="pain-card__num">0{index + 1}</span><h3>{title}</h3><p>{text}</p></li>)}</ol>
        <div className="pain-closing vidro" data-reveal="block"><p>{c.pains.closing}</p><strong>{c.pains.question}</strong></div>
      </div></section>

      <section className="section letter-section"><Flora plano="fundo" especie="monstera" pos="dir-base" espelho /><Flora plano="frente" especie="sprig" pos="esq-topo" /><div className="wrap letter-layout"><div className="letter-card" data-reveal="block"><Eyebrow>03 / CARTA DA ANITA</Eyebrow><h2>{c.letter.title}</h2>{c.letter.body.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}<div className="signature">{c.letter.signature}</div><small>{c.letter.registration}</small></div><div className="polaroid-stack" aria-label="Fotos da Anita"><figure className="polaroid polaroid--one"><img src="assets/images/carousel-1.png" alt="Referência visual da Formação" /></figure><figure className="polaroid polaroid--two"><img src="assets/images/carousel-2.png" alt="Referência visual da Formação" /></figure><TechnicalPlaceholder className="polaroid polaroid--three" label="Foto da Anita pendente" /></div></div></section>

      <section className="section section--blue modules">
        <Flora plano="fundo" especie="monstera" pos="esq-base" />
        <Flora plano="fundo" especie="monstera" pos="dir-meio" />
        <div className="wrap">
          <SectionTitle light layout="duplo" eyebrow="04 / FORMAÇÃO" title="O que você vai aprender" intro="11 módulos completos e 300 horas de formação, do fundamento à prática clínica. Tudo liberado de uma vez, para você estudar no seu ritmo." />
          <ol className="modulos__grade">
            {c.modules.map(([number, title], index) => <li className="modulos__card" data-reveal="block" key={number}>
              <Grafismo tipo={index % 3 === 0 ? 'livro' : index % 3 === 1 ? 'caminho' : 'pessoas'} className="modulos__grafismo" /><span>{number}</span><h3>{title}</h3>
            </li>)}
          </ol>
        </div>
      </section>

      <section className="section method"><div className="wrap"><div className="method-layout"><div><SectionTitle eyebrow="05 / EXPERIÊNCIA" title={c.method.title} intro={c.method.intro} /><p className="method__copy" data-reveal="block">{c.method.copy}</p></div><div className="method__image" data-reveal="block"><img src="assets/images/post-reference.png" alt="Referência visual da formação" /><figure className="method__reference"><img src="assets/images/carousel-1.png" alt="Material visual sobre a Abordagem Centrada na Pessoa e Carl Rogers" loading="lazy" decoding="async" /></figure></div></div><StatRibbon stats={c.method.stats} /></div></section>

      <section className="section certificate section--paper"><div className="wrap certificate-layout"><div className="certificate__media" data-reveal="block"><TechnicalPlaceholder label="Selo oficial do MEC pendente" /></div><div><SectionTitle eyebrow="06 / CERTIFICAÇÃO" title={c.certificate.title} intro={c.certificate.intro} /><p className="certificate__lead">{c.certificate.copy}</p><div className="change-list">{c.certificate.changes.map(([title, text], index) => <p key={title}><Grafismo tipo={['selo', 'livro', 'caminho'][index]} /><span><b>{title}:</b> {text}</span></p>)}</div><p>{c.certificate.closing}</p><DisabledButton icone="selo" href={c.config.checkoutUrl}>{c.certificate.cta}</DisabledButton></div></div></section>

      <section className="section offer section--navy"><Flora plano="fundo" especie="monstera" pos="esq-topo" /><div className="wrap offer-layout"><div className="offer__include"><Eyebrow>07 / SUA VAGA</Eyebrow><h2>{c.offer.title}</h2><ul>{c.offer.inclusions.map((item) => <li key={item}>{item}</li>)}</ul></div><aside className="offer-card" data-reveal="block"><div className="offer-card__topline"><span className="offer-card__label">INVESTIMENTO</span><Grafismo tipo="selo" /></div><p className="price-old">{c.offer.investment.full}</p><p className="price-main">{c.offer.investment.sale}</p><p>{c.offer.investment.note}</p><p className="installment">{c.offer.investment.installment}</p><Countdown deadline={c.config.deadline} /><DisabledButton href={c.config.checkoutUrl}>{c.offer.primaryCta}</DisabledButton><DisabledButton className="cta--ghost" icone="conversa">{c.offer.secondaryCta}</DisabledButton></aside></div><div className="wrap offer-bottom"><article><h3>{c.offer.bonusTitle}</h3><p>{c.offer.bonus}</p></article><article><h3>{c.offer.guaranteeTitle}</h3><p>{c.offer.guarantee}</p></article></div></section>

      <section className="section alumni"><div className="wrap"><SectionTitle layout="centro" eyebrow="08 / QUEM JÁ VIVEU" title={c.alumni.title} /><div className="alumni-grid">{c.alumni.testimonials.map((item) => <TestimonialCard key={item[0]} item={item} compact />)}</div><div className="video-heading"><h2>{c.alumni.videoTitle}</h2></div><div className="video-grid">{c.alumni.videos.map((video) => <div className="video-card" key={video.name} data-reveal="block"><iframe src={video.embed} title={video.title} loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe><span>{video.name}</span></div>)}</div><div className="center"><DisabledButton href={c.config.checkoutUrl}>{c.alumni.cta}</DisabledButton></div></div></section>

      <section className="section bio section--mustard"><div className="wrap bio-layout"><div className="bio__art" data-reveal="block"><img src="assets/kv-extracted/anita-recorte.png" alt="Anita Bacellar" /></div><div><SectionTitle eyebrow="09 / QUEM TE ACOMPANHA" title={c.bio.title} intro={c.bio.subtitle} />{c.bio.body.map((paragraph) => <p key={paragraph}>{paragraph}</p>)}<div className="bio__credentials">{c.bio.credentials.map((item, index) => <p key={item}><Grafismo tipo={index === 0 ? 'selo' : 'pessoas'} /><span>{item}</span></p>)}</div></div></div></section>

      <section className="section instagram"><div className="wrap"><SectionTitle layout="duplo" eyebrow="10 / COMUNIDADE" title={c.instagram.title} intro={c.instagram.intro} /><div className="instagram-grid" aria-label="Estrutura de grid integrado ao Instagram do Espaço Viver">{Array.from({ length: c.config.instagramSlots }).map((_, index) => <TechnicalPlaceholder key={index} label={`Post do Instagram pendente ${index + 1}`} />)}</div></div></section>

      <section className="section faq section--blue"><Flora plano="fundo" especie="monstera" pos="dir-base" espelho /><Flora plano="fundo" especie="monstera" pos="esq-meio" /><div className="wrap"><SectionTitle light layout="centro" eyebrow="11 / DÚVIDAS" title="Perguntas & Respostas" /><Accordion items={c.faq} /></div></section>

      <section className="section final-cta" data-aurora="mustard,apricot,amber,sand,cream" data-aurora-grao="0.04"><Flora plano="fundo" especie="monstera" pos="esq-base" /><Flora plano="fundo" especie="monstera" pos="dir-base" espelho /><Flora plano="frente" especie="sprig" pos="dir-topo" /><div className="wrap final-cta__inner"><Eyebrow>12 / FALAR COM A BETH</Eyebrow><h2>{c.finalCta.title}</h2><p>{c.finalCta.copy}</p><DisabledButton icone="conversa">{c.finalCta.cta}</DisabledButton></div></section>
    </main>
    <button className="back-to-top" type="button" aria-label="Voltar ao topo" onClick={() => window.scrollTo({ top: 0, behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })}>
      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 18V6M7.5 10.5 12 6l4.5 4.5" /></svg>
    </button>
    <footer className="site-footer"><div className="wrap"><span>Formação Experiencial na ACP</span></div></footer>
  </>;
}
