function TrainingsSection() {
  const items = [
    { title: 'Sistemas distribuídos na prática', level: 'Avançado', duration: '6 semanas', format: 'Live', highlight: 'distribuídos' },
    { title: 'Arquitetura para líderes técnicos', level: 'Intermediário', duration: '4 semanas', format: 'Gravado', highlight: 'líderes técnicos' },
    { title: 'Fundamentos de escalabilidade', level: 'Iniciante', duration: '2 semanas', format: 'Live', highlight: 'escalabilidade' },
  ];
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)' }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: 'var(--text-primary)', margin: '0 0 var(--space-6)' }}>Treinamentos</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 'var(--space-4)' }}>
        {items.map(t => <TrainingCardBlock key={t.title} {...t} />)}
      </div>
    </section>
  );
}

function TrainingCardBlock(t) {
  const [signup, setSignup] = React.useState(false);
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: 'var(--shadow-sm)' }}>
      <div style={{ width: '100%' }}><CoverThumb title={t.title} label={t.level} highlight={t.highlight} theme="var(--accent)" /></div>
      <div style={{ padding: 'var(--space-4)', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'flex', gap: 8 }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, padding: '2px 8px', borderRadius: 'var(--radius-pill)', background: 'var(--signal-100)', color: 'var(--signal-600)' }}>{t.format}</span>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-muted)' }}>{t.duration}</div>
        <button onClick={() => setSignup(true)} style={{ marginTop: 4, background: 'var(--accent)', color: 'var(--ink-900)', border: 'none', borderRadius: 'var(--radius-md)', padding: '8px 14px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 12, cursor: 'pointer' }}>Inscrever-se</button>
      </div>
      {signup && <TrainingSignupForm trainingTitle={t.title} onClose={() => setSignup(false)} />}
    </div>
  );
}

function TrainingsListingPage() {
  const allItems = [
    { title: 'Sistemas distribuídos na prática', level: 'Avançado', duration: '6 semanas', format: 'Live' },
    { title: 'Arquitetura para líderes técnicos', level: 'Intermediário', duration: '4 semanas', format: 'Gravado' },
    { title: 'Fundamentos de escalabilidade', level: 'Iniciante', duration: '2 semanas', format: 'Live' },
    { title: 'Observabilidade em produção', level: 'Intermediário', duration: '3 semanas', format: 'Gravado' },
    { title: 'Modelagem de dados para sistemas distribuídos', level: 'Avançado', duration: '5 semanas', format: 'Live' },
    { title: 'Comunicação técnica para arquitetos', level: 'Iniciante', duration: '2 semanas', format: 'Gravado' },
  ];
  const perPage = 3;
  const [page, setPage] = React.useState(1);
  const totalPages = Math.max(1, Math.ceil(allItems.length / perPage));
  const items = allItems.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 }}>Treinamentos</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)' }}>Formação para arquitetos e líderes técnicos</h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-secondary)', maxWidth: 640, margin: '0 0 var(--space-7)' }}>Cursos ao vivo e gravados sobre arquitetura, escalabilidade e liderança técnica em ambientes enterprise.</p>
      {items.length === 0 ? <EmptyState message="Nenhum treinamento disponível no momento." /> : (
        <>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
            {items.map(t => <TrainingCardBlock key={t.title} {...t} />)}
          </div>
          <Pagination page={page} totalPages={totalPages} onChange={setPage} />
        </>
      )}
    </section>
  );
}

function MentoringOptionCard(m) {
  const [book, setBook] = React.useState(false);
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ width: '100%' }}><CoverThumb title={m.title} label="Mentoria" theme="var(--blue-600)" /></div>
      <div style={{ padding: 'var(--space-5)', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>{m.description}</div>
      </div>
      <div style={{ background: 'var(--surface-inverse)', color: 'var(--text-on-inverse)', padding: '12px 20px', fontFamily: 'var(--font-mono)', fontSize: 13, display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
        <button onClick={() => setBook(true)} style={{ background: 'var(--ink-900)', color: 'var(--paper)', border: 'none', borderRadius: 'var(--radius-sm)', padding: '6px 12px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 12, cursor: 'pointer' }}>Entre em contato</button>
      </div>
      {book && <MentoringBookingForm optionTitle={m.title} onClose={() => setBook(false)} />}
    </div>
  );
}

function MentoringSection() {
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)', background: 'var(--surface-sunken)' }}>
      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: 'var(--text-primary)', margin: '0 0 var(--space-6)' }}>Mentorias</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-5)', maxWidth: 760 }}>
        {[
          { title: 'Mentoria individual', description: 'Sessões 1:1 focadas em decisões de arquitetura e carreira técnica.', price: 'a partir de R$ 800/sessão' },
          { title: 'Mentoria em grupo', description: 'Encontros mensais com líderes técnicos discutindo casos reais.', price: 'a partir de R$ 400/mês' },
        ].map(m => <MentoringOptionCard key={m.title} {...m} />)}
      </div>
    </section>
  );
}
function MentoringListingPage() {
  const options = [
    { title: 'Mentoria individual', description: 'Sessões 1:1 focadas em decisões de arquitetura e carreira técnica.', price: 'a partir de R$ 800/sessão' },
    { title: 'Mentoria em grupo', description: 'Encontros mensais com líderes técnicos discutindo casos reais.', price: 'a partir de R$ 400/mês' },
    { title: 'Revisão de arquitetura', description: 'Análise pontual de uma decisão ou proposta de arquitetura em andamento.', price: 'a partir de R$ 1.200/revisão' },
  ];
  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 }}>Mentorias</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)' }}>Orientação 1:1 para decisões técnicas</h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--text-secondary)', maxWidth: 640, margin: '0 0 var(--space-7)' }}>Sessões e revisões voltadas a quem toma decisões de arquitetura e carreira técnica em ambientes enterprise.</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
        {options.map(m => <MentoringOptionCard key={m.title} {...m} />)}
      </div>
    </section>
  );
}

function AboutPage() {
  const { Icon, BrandIcon } = window.MarceloCasteloIODesignSystem_5e00d7;
  const [contact, setContact] = React.useState(false);
  const [book, setBook] = React.useState(false);
  const socials = [
    { label: 'LinkedIn', handle: 'linkedin.com/in/marcelocastelobranco', icon: 'linkedin' },
    { label: 'GitHub', handle: 'github.com/marcelocastelo', icon: 'github' },
    { label: 'YouTube', handle: 'youtube.com/@marcelocastelo.io', icon: 'youtube' },
    { label: 'Discord', handle: 'discord.gg/marcelocastelo', icon: 'discord' },
  ];
  const stats = [
    { value: '+15 anos', label: 'em arquitetura de software' },
    { value: '+3.400', label: 'membros na comunidade' },
    { value: '+40 mil', label: 'inscritos no YouTube' },
    { value: '+120', label: 'mentorados atendidos' },
  ];
  const timeline = [
    { year: '2010', text: 'Início da carreira como desenvolvedor .NET em projetos corporativos.' },
    { year: '2016', text: 'Transição para arquitetura de software em sistemas de grande porte.' },
    { year: '2021', text: 'Início do canal e da comunidade MarceloCastelo.IO.' },
    { year: '2023', text: 'Primeiras mentorias individuais e treinamentos abertos.' },
    { year: '2026', text: 'Consolidação da marca pessoal: blog, livros, projetos e mentorias.' },
  ];
  return (
    <section style={{ padding: 'var(--space-8) var(--space-7)', maxWidth: 860, margin: '0 auto' }}>
      <div style={{ display: 'flex', gap: 'var(--space-7)', alignItems: 'flex-start', marginBottom: 'var(--space-8)' }}>
        <div style={{ width: 160, height: 160, borderRadius: '50%', flexShrink: 0 }}><image-slot id="about-photo" shape="circle" placeholder="Foto de Marcelo"></image-slot></div>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 10 }}>Sobre</div>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-3xl)', color: 'var(--text-primary)', margin: '0 0 var(--space-5)', lineHeight: 'var(--leading-tight)' }}>Marcelo Castelo Branco</h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-primary)', margin: '0 0 12px' }}>Arquiteto de software com foco em ambientes enterprise — sistemas de grande porte, decisões de arquitetura que precisam sobreviver a anos de evolução e times grandes.</p>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', margin: 0 }}>Escreve no blog, cria treinamentos e projetos abertos, e faz mentoria para líderes técnicos que enfrentam esse tipo de decisão no dia a dia.</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 'var(--space-5)', flexWrap: 'wrap' }}>
            {socials.map(s => (
              <a key={s.label} href={'https://' + s.handle} style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-secondary)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', padding: '6px 14px', textDecoration: 'none' }}>
                <BrandIcon name={s.icon} size={13} />{s.label}
              </a>))}
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-5)', padding: 'var(--space-6) 0', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', marginBottom: 'var(--space-8)' }}>
        {stats.map(s => (
          <div key={s.label} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, color: 'var(--accent-strong)' }}>{s.value}</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>{s.label}</span>
          </div>
        ))}
      </div>

      <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-2xl)', color: 'var(--text-primary)', margin: '0 0 var(--space-6)' }}>Trajetória</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', marginBottom: 'var(--space-8)' }}>
        {timeline.map(t => (
          <div key={t.year} style={{ display: 'flex', gap: 'var(--space-5)' }}>
            <span style={{ width: 60, flexShrink: 0, fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent-strong)' }}>{t.year}</span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 'var(--leading-relaxed)', color: 'var(--text-secondary)', borderLeft: '1px solid var(--border-subtle)', paddingLeft: 'var(--space-5)' }}>{t.text}</span>
          </div>
        ))}
      </div>

      <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-5)' }}>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 4 }}>Quer conversar sobre uma decisão de arquitetura?</div>
          <div style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--text-secondary)' }}>Agende uma mentoria individual ou entre na comunidade.</div>
        </div>
        <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', whiteSpace: 'nowrap' }} onClick={() => setBook(true)}>Agendar mentoria</button>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 'var(--space-5) var(--space-6)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon name="file-code" size={18} style={{ color: 'var(--text-muted)' }} />
          <div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text-muted)' }}>Contato</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 15, color: 'var(--text-primary)' }}>contato@marcelocastelo.io</div>
          </div>
        </div>
        <button onClick={() => setContact(true)} style={{ background: 'transparent', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', padding: '8px 16px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13, color: 'var(--text-primary)', cursor: 'pointer' }}>Enviar mensagem</button>
      </div>
      {book && <MentoringBookingForm optionTitle="Mentoria" onClose={() => setBook(false)} />}
      {contact && <ContactForm onClose={() => setContact(false)} />}
    </section>
  );
}
Object.assign(window, { TrainingsSection, TrainingsListingPage, MentoringSection, MentoringListingPage, AboutPage });