/* bloo.app — Products page: digital products (AI Skills, code templates). */
(function () {
const { Button, Badge, Card, Tabs } = window.BlooAppDesignSystem_ab7292;
const { LINKS, EXT, Icons, S, CTASection } = window.Site;
const { useT } = window.I18n;
const { IconSpark, IconLayers, IconArrow } = Icons;

const ProductsS = {
  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 40 },
  price: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: 'var(--text-strong)' },
};

function ProductsGrid() {
  const { t } = useT();
  const [filter, setFilter] = React.useState('all');
  const CATS = { skills: t('AI Skill', 'Skill de IA'), templates: t('Code template', 'Template de código') };
  const PRODUCTS = [
    { cat: 'skills', status: 'available', title: t('AI code review skill pack', 'Pacote de skills de revisão de código com IA'), price: t('From $39/mo', 'A partir de $39/mês'), body: t('The same review checks we wire into client repos — prompts and native tool integrations for Claude, Cursor, and GitHub Copilot.', 'As mesmas verificações que integramos aos repositórios de clientes — prompts e integrações nativas para Claude, Cursor e GitHub Copilot.'), href: 'product-ai-code-review.html' },
    { cat: 'skills', status: 'coming-soon', title: t('Routine-task automation skills', 'Skills de automação de tarefas rotineiras'), price: '$49', body: t('Skill configs for QA checklists, changelog generation, and ticket triage — the busywork, automated.', 'Configurações de skills para checklists de QA, geração de changelog e triagem de tickets — a parte repetitiva, automatizada.') },
    { cat: 'skills', status: 'coming-soon', title: t('AI onboarding playbook', 'Playbook de onboarding de IA'), price: '$39', body: t('The rollout playbook we use for non-technical teams: session plans, exercises, and a 30-day follow-up.', 'O playbook de implantação que usamos com times não técnicos: planos de sessão, exercícios e acompanhamento de 30 dias.') },
    { cat: 'templates', status: 'coming-soon', title: t('Flutter UI starter kit', 'Kit inicial de UI em Flutter'), price: '$79', body: t('Production-grade Flutter components and screens, built to the same standard as our client work.', 'Componentes e telas em Flutter prontos para produção, no mesmo padrão dos nossos projetos com clientes.') },
    { cat: 'templates', status: 'coming-soon', title: t('Flutter design-system starter', 'Starter de design system em Flutter'), price: '$89', body: t("A themeable component base — tokens, primitives, and forms — to start a Flutter app's UI right.", 'Uma base de componentes personalizável — tokens, primitivos e formulários — para começar a UI de um app Flutter do jeito certo.') },
  ];
  const list = filter === 'all' ? PRODUCTS : PRODUCTS.filter((p) => p.cat === filter);
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('PRODUCTS', 'PRODUTOS')}</span>
          <h2 style={S.h2} className="site-h1">{t('Ready-made tools, from real engagements.', 'Ferramentas prontas, direto de projetos reais.')}</h2>
          <p style={S.sectionSub}>{t("Skills and templates we've built and used ourselves — install them yourself, or use them as a starting point.", 'Skills e templates que criamos e usamos internamente — instale você mesmo ou use como ponto de partida.')}</p>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Tabs
            variant="pill"
            value={filter}
            onChange={setFilter}
            items={[
              { value: 'all', label: t('All', 'Todos') },
              { value: 'skills', label: t('AI Skills', 'Skills de IA') },
              { value: 'templates', label: t('Code templates', 'Templates de código') },
            ]}
          />
        </div>
        <div style={ProductsS.grid} className="site-grid-3">
          {list.map((p) => {
            const isComingSoon = p.status === 'coming-soon';
            return (
              <Card key={p.title} padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <span style={S.serviceIcon}>{p.cat === 'skills' ? <IconSpark /> : <IconLayers />}</span>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  <Badge style={{ alignSelf: 'flex-start' }}>{CATS[p.cat]}</Badge>
                  {isComingSoon && <Badge tone="neutral">{t('Coming soon', 'Em breve')}</Badge>}
                </div>
                <h3 style={S.h3}>{p.title}</h3>
                <p style={S.cardBody}>{p.body}</p>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: isComingSoon ? 'flex-end' : 'space-between', marginTop: 4 }}>
                  {!isComingSoon && <span style={ProductsS.price}>{p.price}</span>}
                  {isComingSoon ? (
                    <Button disabled variant="secondary" size="sm">
                      {t('Coming soon', 'Em breve')}
                    </Button>
                  ) : (
                    <Button as="a" href={p.href || `mailto:${LINKS.companyEmail}?subject=${encodeURIComponent(t('Interested in: ', 'Interesse em: ') + p.title)}`} variant="secondary" size="sm" trailingIcon={<IconArrow size={15} />}>
                      {p.href ? t('View details', 'Ver detalhes') : t('Get it', 'Quero')}
                    </Button>
                  )}
                </div>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProductsContent() {
  const { t } = useT();
  return (
    <>
      <ProductsGrid />
      <CTASection heading={t("Need something these don't cover?", 'Precisa de algo que isso não cobre?')} body={t("If it's not a fit off the shelf, let's talk about a scoped engagement.", 'Se não encaixar de primeira, vamos conversar sobre um projeto sob medida.')} />
    </>
  );
}

window.Pages = window.Pages || {};
window.Pages.products = { Content: ProductsContent, label: 'Products' };
})();