/* bloo.app — Available products plus honest productization themes. */
(function () {
const { Button, Badge, Card } = window.BlooAppDesignSystem_ab7292;
const { PRODUCT, Icons, S, routeHref, trackEvent } = window.Site;
const { useT } = window.I18n;
const { IconSpark, IconLayers, IconArrow, IconCode, IconTarget } = Icons;

const P = {
  available: { display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 28, alignItems: 'stretch', maxWidth: 960, margin: '0 auto' },
  themes: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  price: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 32, letterSpacing: '-.02em', color: 'var(--text-strong)' },
  mono: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.08em', color: 'var(--text-subtle)', textTransform: 'uppercase' },
};

function AvailableProduct() {
  const { t } = useT();
  React.useEffect(() => { trackEvent('view_products'); }, []);
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('PRODUCTS', 'PRODUTOS')}</span>
          <h1 style={S.h2} className="site-h1">{t('Maintained systems born from real work.', 'Sistemas mantidos que nasceram do trabalho real.')}</h1>
          <p style={S.sectionSub}>{t('bloo publishes a product only when it has a working system, a defined buyer, a real offer, and evidence to earn attention.', 'A bloo publica um produto apenas quando há um sistema funcionando, um comprador definido, uma oferta real e evidência para merecer atenção.')}</p>
        </div>
        <div style={P.available} className="site-grid-2">
          <Card variant="raised" padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <Badge tone="brand" dot>{t(PRODUCT.stageLabel.en, PRODUCT.stageLabel.pt)}</Badge>
              <Badge>{PRODUCT.version}</Badge>
            </div>
            <span style={S.serviceIcon}><IconSpark /></span>
            <h2 style={{ ...S.h2, fontSize: 34 }}>{t('bloo Adaptive Code Review', 'bloo Adaptive Code Review')}</h2>
            <p style={S.sectionSub}>{t('Repository-aware AI code review for Claude, Cursor, and Copilot. It profiles the codebase, activates only relevant guidance, and routes each change by risk.', 'Code review com IA consciente do repositório para Claude, Cursor e Copilot. Ele mapeia a base, ativa apenas orientações relevantes e roteia cada mudança pelo risco.')}</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4, paddingTop: 6 }}>
              <span style={P.mono}>{t('STABLE TEAM LICENSE AFTER VALIDATION', 'LICENÇA ESTÁVEL APÓS A VALIDAÇÃO')}</span>
              <p style={{ ...S.cardBody, flex: 'none' }}>{t('Regional pricing announced after validation.', 'Preços regionais anunciados após a validação.')}</p>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 'auto' }}>
              <Button as="a" href={routeHref('ai-code-review', '#cohort')} trailingIcon={<IconArrow />} onClick={() => trackEvent('join_beta', { from: 'products' })}>{t('Join the founding cohort', 'Participar da coorte fundadora')}</Button>
              <Button as="a" href={routeHref('ai-code-review')} variant="secondary">{t('Explore the system', 'Explorar o sistema')}</Button>
            </div>
          </Card>
          <Card padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <span style={P.mono}>{t('WHY IT EXISTS', 'POR QUE ELE EXISTE')}</span>
            <h3 style={{ ...S.h3, fontSize: 24 }}>{t('The repository should shape the review.', 'O repositório deve moldar a revisão.')}</h3>
            <p style={S.cardBody}>{t('Static prompt packs install every rule everywhere. bloo builds a profile from manifests, versions, architecture evidence, risk zones, and team policy, then keeps only the guidance that applies.', 'Pacotes estáticos instalam todas as regras em todo lugar. A bloo cria um perfil a partir de manifests, versões, evidências de arquitetura, zonas de risco e política do time, mantendo apenas a orientação aplicável.')}</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              {[t('Local repository policy', 'Política local do repositório'), t('Evidence-based findings', 'Achados baseados em evidência'), t('Manifest-aware updates', 'Atualizações conscientes do manifesto'), t('Read-only installation doctor', 'Diagnóstico de instalação somente leitura')].map((item) => (
                <li key={item} style={{ fontSize: 14.5, color: 'var(--text-body)', display: 'flex', gap: 10 }}><span style={{ color: 'var(--brand)' }}>—</span>{item}</li>
              ))}
            </ul>
          </Card>
        </div>
      </div>
    </section>
  );
}

function ProductThemes() {
  const { t } = useT();
  const themes = [
    [<IconCode />, t('AI engineering systems', 'Sistemas de engenharia com IA'), t('Review, testing, documentation, and delivery workflows that fit a real codebase.', 'Fluxos de revisão, testes, documentação e entrega que se encaixam em uma base real.')],
    [<IconLayers />, t('Flutter and UX infrastructure', 'Infraestrutura de Flutter e UX'), t('Reusable interface foundations and product patterns extracted from shipped work.', 'Bases reutilizáveis de interface e padrões de produto extraídos de trabalhos lançados.')],
    [<IconTarget />, t('Team playbooks', 'Playbooks para times'), t('Adoption and operating practices that stay useful after an engagement ends.', 'Práticas de adoção e operação que continuam úteis depois que um projeto termina.')],
  ];
  return (
    <section style={{ ...S.section, background: 'var(--surface-sunken)', borderTop: '1px solid var(--border-subtle)' }}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('WHAT BLOO PRODUCTIZES', 'O QUE A BLOO TRANSFORMA EM PRODUTO')}</span>
          <h2 style={S.h2}>{t('Areas of practice—not imaginary product listings.', 'Áreas de prática — não listagens de produtos imaginários.')}</h2>
          <p style={S.sectionSub}>{t('When a repeated client problem becomes a working beta with a defined buyer, price, and launch date, it can graduate into this catalog.', 'Quando um problema recorrente de clientes vira um beta funcional com comprador, preço e data de lançamento definidos, ele pode entrar neste catálogo.')}</p>
        </div>
        <div style={P.themes} className="site-grid-3">
          {themes.map(([icon, title, body]) => (
            <Card key={title} variant="outline" padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <span style={S.serviceIcon}>{icon}</span>
              <h3 style={S.h3}>{title}</h3>
              <p style={S.cardBody}>{body}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProductsContent() { return <><AvailableProduct /><ProductThemes /></>; }
window.Pages = window.Pages || {};
window.Pages.products = { Content: ProductsContent, label: 'Products' };
})();