function ComingSoonPage({ title, description }) {
  const { Icon, BrandIcon } = window.MarceloCasteloIODesignSystem_5e00d7;
  return (
    <section style={{ padding: 'var(--space-9) var(--space-7)', maxWidth: 640, margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-5)' }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--accent-strong)' }}>Em breve</span>
      <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'var(--text-3xl)', color: 'var(--text-primary)', margin: 0, lineHeight: 'var(--leading-tight)' }}>{title}</h1>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--text-secondary)', lineHeight: 'var(--leading-relaxed)', margin: 0 }}>{description}</p>
      <div style={{ display: 'flex', gap: 12, marginTop: 'var(--space-4)', flexWrap: 'wrap', justifyContent: 'center' }}>
        <a href="https://discord.gg/marcelocastelo" style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--accent)', color: 'var(--ink-900)', borderRadius: 'var(--radius-md)', padding: '12px 22px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, textDecoration: 'none' }}>
          <BrandIcon name="discord" size={16} />Entrar na comunidade
        </a>
        <a href="mailto:contato@marcelocastelo.io" style={{ display: 'flex', alignItems: 'center', gap: 8, border: '1px solid var(--border-default)', color: 'var(--text-primary)', borderRadius: 'var(--radius-md)', padding: '12px 22px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, textDecoration: 'none' }}>
          Avise-me quando estiver pronto
        </a>
      </div>
    </section>
  );
}
Object.assign(window, { ComingSoonPage });