/* bloo.app — Case studies page. Client details anonymized (descriptor, not name); metrics are real. */
(function () {
const { Badge, Card, Alert } = window.BlooAppDesignSystem_ab7292;
const { S, CTASection, routeHref, trackEvent } = window.Site;
const { useT } = window.I18n;

const CaseS = {
  row: { display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40, alignItems: 'start' },
  label: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.08em', color: 'var(--text-subtle)', textTransform: 'uppercase', marginBottom: 6 },
  metricBox: { background: 'var(--blue-50)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4) var(--space-5)', display: 'flex', flexDirection: 'column', gap: 2 },
  metricNum: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 32, letterSpacing: '-.02em', color: 'var(--brand)' },
  metricLabel: { fontSize: 13.5, color: 'var(--text-body)' },
  client: { fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-muted)' },
};

function CaseStudies() {
  const { t } = useT();
  React.useEffect(() => { trackEvent('view_work'); }, []);
  const CASES = [
    {
      tags: [t('AI dev workflows', 'Fluxos de dev com IA')],
      client: t('Series B fintech — 14-person engineering team', 'Fintech Série B — time de engenharia com 14 pessoas'),
      title: t('Cutting code review time without cutting corners', 'Reduzindo o tempo de revisão de código sem perder qualidade'),
      challenge: t('Pull requests were piling up faster than the team could review them, and bugs were slipping into production.', 'Pull requests se acumulavam mais rápido do que o time conseguia revisar, e bugs estavam chegando à produção.'),
      approach: t('I wired AI-assisted checks into their existing review flow — same tools, same repo, no new process to learn.', 'Eu integrei verificações assistidas por IA ao fluxo de revisão já existente — mesmas ferramentas, mesmo repositório, nenhum processo novo para aprender.'),
      metrics: [['3×', t('faster review cycles', 'ciclos de revisão mais rápidos')], ['80%', t('fewer bugs reported in production', 'menos bugs reportados em produção')]],
    },
    {
      tags: [t('AI onboarding', 'Onboarding de IA')],
      client: t('Mid-market services company — 30-person operations team', 'Empresa de serviços de médio porte — time de operações com 30 pessoas'),
      title: t('Getting a non-technical team to actually use AI', 'Como fazer um time não técnico usar IA de verdade'),
      challenge: t('Leadership wanted AI adoption, but the operations team had no technical background and no time for generic training.', 'A liderança queria adotar IA, mas o time de operações não tinha background técnico nem tempo para treinamentos genéricos.'),
      approach: t('A rollout scoped to their real day-to-day work, with hands-on sessions and playbooks instead of slide decks.', 'Uma implantação desenhada para o dia a dia real do time, com sessões práticas e playbooks em vez de apresentações.'),
      metrics: [['40%', t('less time spent in onboarding', 'menos tempo gasto em onboarding')]],
    },
    {
      tags: ['Flutter & UX', t('AI dev workflows', 'Fluxos de dev com IA')],
      client: t('Logistics scale-up — product & design team', 'Scale-up de logística — time de produto e design'),
      title: t("Taking routine work off a busy product team's plate", 'Tirando tarefas rotineiras das mãos de um time de produto sobrecarregado'),
      challenge: t('QA checklists, changelogs, and ticket triage were eating a full day a week per person.', 'Checklists de QA, changelogs e triagem de tickets consumiam um dia inteiro por semana de cada pessoa.'),
      approach: t("Lightweight AI-assisted tooling built directly into the team's existing tools, not a new dashboard to check.", 'Ferramentas leves com IA construídas diretamente nas ferramentas que o time já usava — nada de um novo painel para checar.'),
      metrics: [['80%', t('less time spent on routine tasks', 'menos tempo gasto em tarefas rotineiras')]],
    },
  ];
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('CASE STUDIES', 'ESTUDOS DE CASO')}</span>
          <h2 style={S.h2} className="site-h1">{t('Real studio engagements, client-reported numbers.', 'Projetos reais do estúdio, números informados pelos clientes.')}</h2>
          <p style={S.sectionSub}>{t('A sample of past front-end and AI-enablement work. Figures are reported by the clients and anonymized at their request.', 'Uma amostra de trabalhos anteriores de front-end e capacitação em IA. Os números são informados pelos clientes e anonimizados a pedido deles.')}</p>
        </div>
        <div style={{ maxWidth: 900, margin: '0 auto 24px' }}>
          <Alert tone="info" title={t('How to read these', 'Como ler isto')}>
            {t('These are consulting engagements, not the AI Code Review System. Metrics are client-reported for a specific project and are not a promise of the same result elsewhere. For the product, we publish reproducible cases on the ', 'Estes são projetos de consultoria, não o AI Code Review System. As métricas são informadas pelo cliente para um projeto específico e não são promessa do mesmo resultado em outro lugar. Para o produto, publicamos casos reproduzíveis na ')}
            <a href={routeHref('benchmark')} style={{ color: 'inherit', fontWeight: 600 }}>{t('benchmark', 'página de benchmark')}</a>
            {t('; validation-program evidence discloses whether a team was a paying customer or a compensated research partner.', '; a evidência do programa de validação informa se um time foi cliente pagante ou parceiro de pesquisa remunerado.')}
          </Alert>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {CASES.map((c) => (
            <Card key={c.title} padding="lg">
              <div style={CaseS.row} className="site-grid-2">
                <div>
                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
                    {c.tags.map((tag) => <Badge key={tag} tone="brand">{tag}</Badge>)}
                  </div>
                  <div style={CaseS.client}>{c.client}</div>
                  <h3 style={{ ...S.h3, fontSize: 24, marginTop: 8 }}>{c.title}</h3>
                  <div style={{ marginTop: 16 }}>
                    <div style={CaseS.label}>{t('Challenge', 'Desafio')}</div>
                    <p style={S.cardBody}>{c.challenge}</p>
                  </div>
                  <div style={{ marginTop: 14 }}>
                    <div style={CaseS.label}>{t('Approach', 'Abordagem')}</div>
                    <p style={S.cardBody}>{c.approach}</p>
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {c.metrics.map(([n, l]) => (
                    <div key={l} style={CaseS.metricBox}>
                      <div style={CaseS.metricNum}>{n}</div>
                      <div style={CaseS.metricLabel}>{l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudiesContent() {
  const { t } = useT();
  return (
    <>
      <CaseStudies />
      <CTASection heading={t('Want to discuss work like this?', 'Quer conversar sobre um trabalho como este?')} body={t("Tell me what you are trying to ship and I will tell you honestly whether bloo is a fit.", 'Conte o que você está tentando lançar e eu vou dizer com honestidade se a bloo faz sentido.')} />
    </>
  );
}

window.Pages = window.Pages || {};
window.Pages['case-studies'] = { Content: CaseStudiesContent, label: 'Case studies' };
})();