function ChapterCard({ badge, title, slotId, onOpen }) {
  return (
    <div onClick={onOpen} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', cursor: onOpen ? 'pointer' : 'default' }}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: '16/10' }}>
        <image-slot id={slotId} shape="rect" placeholder="Capa do capítulo"></image-slot>
        <span style={{ position: 'absolute', left: 14, bottom: -14, background: 'var(--ink-900)', color: 'var(--paper)', fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 500, padding: '5px 12px', borderRadius: 'var(--radius-sm)', letterSpacing: 'var(--tracking-wide)' }}>{badge}</span>
      </div>
      <div style={{ padding: '26px 18px 18px' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-primary)', lineHeight: 'var(--leading-snug)' }}>{title}</div>
      </div>
    </div>
  );
}

function BookSection({ heading, subtitle, chapters, onOpenChapter }) {
  return (
    <div style={{ marginBottom: 'var(--space-8)' }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: 'var(--text-primary)', margin: '0 0 8px' }}>{heading}</h2>
      <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-muted)', marginBottom: 'var(--space-5)' }}>{subtitle}</div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${chapters.length > 2 ? 3 : chapters.length}, 1fr)`, gap: 'var(--space-5)' }}>
        {chapters.map(c => <ChapterCard key={c.slotId} {...c} onOpen={() => onOpenChapter && onOpenChapter(c)} />)}
      </div>
    </div>
  );
}

function BookPage({ onOpenChapter }) {
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)', maxWidth: 1040, margin: '0 auto' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 10 }}>Livro</div>
      <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-3xl)', color: 'var(--text-primary)', margin: '0 0 var(--space-8)', lineHeight: 'var(--leading-tight)' }}>Arquitetura de Software para Ambientes Enterprise</h1>
      <BookSection heading="Introdução" subtitle="Confira as atualizações mais recentes:" onOpenChapter={onOpenChapter} chapters={[
        { badge: 'Introdução', title: 'Por que arquitetura de software é importante?', slotId: 'book-intro-1' },
      ]} />
      <BookSection heading="Conceitos fundamentais" subtitle="Confira as atualizações mais recentes:" onOpenChapter={onOpenChapter} chapters={[
        { badge: 'Capítulo 1.1', title: 'Definindo arquitetura de software e o papel do arquiteto', slotId: 'book-ch-1-1' },
        { badge: 'Capítulo 1.2', title: 'Integrando sistemas de software', slotId: 'book-ch-1-2' },
        { badge: 'Capítulo 1.3', title: 'Documentação arquitetural na medida certa', slotId: 'book-ch-1-3' },
      ]} />
      <BookSection heading="Padrões e decisões" subtitle="Confira as atualizações mais recentes:" onOpenChapter={onOpenChapter} chapters={[
        { badge: 'Capítulo 2.1', title: 'Trade-offs: como decidir sem certeza completa', slotId: 'book-ch-2-1' },
        { badge: 'Capítulo 2.2', title: 'Consistência eventual em sistemas distribuídos', slotId: 'book-ch-2-2' },
        { badge: 'Capítulo 2.3', title: 'Observabilidade como parte da arquitetura', slotId: 'book-ch-2-3' },
      ]} />
    </section>
  );
}

/** Chapter reading page — same content-block mechanism as ArticlePage (Callout/Quote/CodeBlock/EmbedCard/MermaidBlock/ImageBlock), shared between blog articles and book chapters. */
function ChapterPage({ chapter, onBack }) {
  const c = chapter || { badge: 'Capítulo 1.1', title: 'Definindo arquitetura de software e o papel do arquiteto' };
  const { Callout, Quote, CodeBlock } = window.MarceloCasteloIODesignSystem_5e00d7;
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)', maxWidth: 1160, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 300px', gap: 'var(--space-8)', alignItems: 'flex-start' }}>
      <div style={{ maxWidth: 720 }}>
        <div onClick={onBack} style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-link)', cursor: 'pointer', marginBottom: 'var(--space-5)' }}>← voltar ao livro</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 14 }}>
          <span>Arquitetura de Software para Ambientes Enterprise</span> ／ <span style={{ color: 'var(--text-primary)', fontWeight: 600 }}>{c.badge}</span>
        </div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-3xl)', color: 'var(--text-primary)', lineHeight: 'var(--leading-tight)', margin: '0 0 var(--space-6)' }}>{c.title}</h1>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-primary)', margin: 0 }}>Arquitetura de software não é sobre escolher tecnologias — é sobre estruturar decisões que precisam sobreviver a anos de mudança de negócio e de time.</p>
          <ImageBlock slotId="chapter-diagram-1" caption="Figura 1 — camadas de decisão arquitetural em um ambiente enterprise." />
          <Callout tone="insight">O papel do arquiteto é reduzir o custo de mudança futura, não eliminar a mudança.</Callout>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>Este capítulo estabelece o vocabulário usado no resto do livro: domínio, contrato, acoplamento e reversibilidade de decisão.</p>
          <CodeBlock language="text" filename="glossario.txt">{'domínio: área de responsabilidade do negócio\ncontrato: acordo formal entre dois componentes\nreversibilidade: custo de desfazer uma decisão'}</CodeBlock>
          <Quote cite="Grady Booch">Architecture represents the significant design decisions that shape a system.</Quote>
          <Callout tone="tip">Releia este capítulo depois do Capítulo 2 — os exemplos de trade-off vão fazer mais sentido.</Callout>
        </div>
      </div>
      <aside style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', position: 'sticky', top: 'var(--space-6)' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Recomendado</div>
        <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
          <SidebarAdImage slotId="chapter-sidebar-cover" />
          <div style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, color: 'var(--text-primary)' }}>Arquitetura para líderes técnicos</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>Treinamento gravado, 4 semanas.</div>
          </div>
          <div style={{ background: 'var(--surface-inverse)', color: 'var(--text-on-inverse)', padding: '10px 20px', fontFamily: 'var(--font-mono)', fontSize: 12 }}>Ver treinamento →</div>
        </div>
      </aside>
    </section>
  );
}
Object.assign(window, { BookPage, ChapterPage });