/* bloo.app — Case studies page. Client details anonymized (descriptor, not name); metrics are real. */
(function () {
const { Badge, Card } = window.BlooAppDesignSystem_ab7292;
const { S, CTASection } = 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();
  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('We wired AI-assisted checks into their existing review flow — same tools, same repo, no new process to learn.', 'Integramos 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 engagements, real numbers.', 'Projetos reais, números reais.')}</h2>
          <p style={S.sectionSub}>{t('A sample of recent work across both service lines. Client details are anonymized where asked for.', 'Uma amostra de trabalhos recentes nas duas frentes de atuação. Detalhes de clientes são anonimizados quando solicitado.')}</p>
        </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 results like these?', 'Quer resultados como esses?')} body={t("Tell us what you're trying to ship — we'll tell you honestly if bloo is a fit.", 'Conte o que você está tentando lançar — a gente fala com honestidade se a bloo faz sentido.')} />
    </>
  );
}

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