const PROJECTS = [
  { kind: 'Biblioteca open source', tone: 'accent', name: 'flowqueue', description: 'Biblioteca .NET para filas de eventos com garantias de idempotência e replay.', stack: ['.NET', 'RabbitMQ'], status: 'Ativo', slotId: 'proj-flowqueue' },
  { kind: 'Simulação de produto', tone: 'success', name: 'Nimbus Bank (simulado)', description: 'Simulação pública de um app de banco digital para explorar arquitetura de microsserviços em enterprise.', stack: ['Node.js', 'Kubernetes'], status: 'Em andamento', slotId: 'proj-nimbus' },
  { kind: 'Experimento público', tone: 'warning', name: 'Empresa simulada: Vertex Corp', description: 'Experimento público simulando decisões de arquitetura de uma empresa de grande porte, do zero.', stack: ['Arquitetura', 'Documentação'], status: 'Em andamento', slotId: 'proj-vertex' },
  { kind: 'Biblioteca open source', tone: 'accent', name: 'trace-lens', description: 'Ferramenta de observabilidade para visualizar traces distribuídos em sistemas de grande porte.', stack: ['Go', 'OpenTelemetry'], status: 'Ativo', slotId: 'proj-tracelens' },
];

function ProjectCard({ kind, tone, name, description, stack, status, slotId, onOpen }) {
  const tones = { accent: { background: 'var(--accent-soft)', color: 'var(--accent-strong)' }, success: { background: 'var(--signal-100)', color: 'var(--signal-600)' }, warning: { background: 'var(--gold-100)', color: 'var(--gold-600)' } };
  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' }}>
      <CoverThumb title={name} label={kind} theme={tone === 'success' ? 'var(--signal-600)' : tone === 'warning' ? 'var(--gold-600)' : 'var(--purple-600)'} />
      <div style={{ padding: 'var(--space-4)', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>{description}</div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {stack.map(s => <span key={s} style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', padding: '2px 8px' }}>{s}</span>)}
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--accent-strong)' }}>{status}</div>
      </div>
    </div>
  );
}

function ProjectsSection({ onOpenProject }) {
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'var(--space-6)' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: 'var(--text-primary)', margin: 0 }}>Projetos</h2>
        <span onClick={onOpenProject} style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-link)', cursor: 'pointer' }}>ver todos os projetos →</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 'var(--space-4)' }}>
        {PROJECTS.slice(0, 3).map(p => <ProjectCard key={p.name} {...p} />)}
      </div>
    </section>
  );
}

function ProjectsPage({ onOpenProject }) {
  const perPage = 3;
  const [page, setPage] = React.useState(1);
  const totalPages = Math.max(1, Math.ceil(PROJECTS.length / perPage));
  const items = PROJECTS.slice((page - 1) * perPage, page * perPage);
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)' }}>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 10 }}>Projetos</div>
      <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-3xl)', color: 'var(--text-primary)', margin: '0 0 8px', lineHeight: 'var(--leading-tight)' }}>Bibliotecas, produtos simulados e experimentos públicos</h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-secondary)', maxWidth: 640, margin: '0 0 var(--space-7)' }}>Projetos abertos para acompanhar decisões de arquitetura na prática — bibliotecas open source, produtos simulados e simulações públicas de empresas de grande porte.</p>
      {items.length === 0 ? <EmptyState message="Nenhum projeto publicado ainda." /> : (
        <>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
            {items.map(p => <ProjectCard key={p.name} {...p} onOpen={() => onOpenProject(p)} />)}
          </div>
          <Pagination page={page} totalPages={totalPages} onChange={setPage} />
        </>
      )}
    </section>
  );
}

function ProjectDetailPage({ project, onBack }) {
  const p = project || PROJECTS[0];
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)', maxWidth: 800, margin: '0 auto' }}>
      <div onClick={onBack} style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-link)', cursor: 'pointer', marginBottom: 'var(--space-6)' }}>← todos os projetos</div>
      <div style={{ width: '100%', aspectRatio: '16/7', marginBottom: 'var(--space-6)' }}><CoverThumb title={p.name} label={p.kind} theme="var(--purple-600)" /></div>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 'var(--radius-pill)', display: 'inline-flex', background: 'var(--accent-soft)', color: 'var(--accent-strong)' }}>{p.kind}</span>
      <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-3xl)', color: 'var(--text-primary)', margin: '14px 0 8px', lineHeight: 'var(--leading-tight)' }}>{p.name}</h1>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--accent-strong)', marginBottom: 'var(--space-5)' }}>{p.status}</div>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-primary)' }}>{p.description}</p>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 'var(--space-5)' }}>
        {p.stack.map(s => <span key={s} style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', padding: '3px 10px' }}>{s}</span>)}
      </div>
      <div style={{ display: 'flex', gap: 14, marginTop: 'var(--space-7)' }}>
        <button style={{ background: 'var(--accent)', color: 'var(--ink-900)', border: 'none', borderRadius: 'var(--radius-md)', padding: '11px 22px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, cursor: 'pointer' }}>Ver repositório</button>
        <button style={{ background: 'transparent', color: 'var(--text-primary)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: '11px 22px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, cursor: 'pointer' }}>Acompanhar atualizações</button>
      </div>
    </section>
  );
}
Object.assign(window, { ProjectsSection, ProjectsPage, ProjectDetailPage });