/* bloo.app — Services page: three service lines, process, pricing. */
(function () {
const { Button, Badge, Card } = window.BlooAppDesignSystem_ab7292;
const { LINKS, EXT, Icons, S, CTASection } = window.Site;
const { useT } = window.I18n;
const { IconLayers, IconCode, IconUsers, IconCheck } = Icons;

const ServicesS = {
  row: { display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40, alignItems: 'start' },
  rowList: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 },
  steps: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 },
  stepNum: { fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--brand)', letterSpacing: '.04em' },
  tierGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, alignItems: 'stretch' },
  tierPrice: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 30, letterSpacing: '-.02em', color: 'var(--text-strong)' },
};

function ServiceRows() {
  const { t } = useT();
  const LINES = [
    {
      icon: <IconLayers />, tag: t('Build', 'Construir'), title: t('Flutter & UX front-end', 'Front-end em Flutter & UX'),
      body: t(
        'Production Flutter apps and interface work from someone who has shipped real products — pixel-precise, accessible, fast.',
        'Apps Flutter em produção e trabalho de interface de quem já lançou produtos reais — precisão pixel a pixel, acessível e rápido.'
      ),
      items: [
        t('New feature builds and full-screen implementation from Figma or a rough brief', 'Construção de novas funcionalidades e telas completas a partir do Figma ou de um briefing simples'),
        t("UX audits that flag what's costing you conversions or support tickets", 'Auditorias de UX que apontam o que está custando conversões ou chamados de suporte'),
        t('Design-system and component work so your UI stays consistent as it grows', 'Trabalho de design system e componentes para manter sua UI consistente conforme ela cresce'),
        t('Performance and accessibility passes on existing Flutter apps', 'Revisões de performance e acessibilidade em apps Flutter existentes'),
      ],
    },
    {
      icon: <IconCode />, tag: t('Augment', 'Potencializar'), title: t('AI dev workflows', 'Fluxos de dev com IA'),
      body: t(
        'Wire AI into how your engineers already work: review, tests, refactors, and docs — measured by real cycle-time, not demos.',
        'Integre IA ao que seus engenheiros já fazem: revisão de código, testes, refatoração e documentação — medido pelo tempo de ciclo real, não por demos.'
      ),
      items: [
        t('AI-assisted code review wired into your existing git workflow', 'Revisão de código assistida por IA integrada ao seu fluxo de git existente'),
        t('Test generation and coverage for legacy or fast-moving codebases', 'Geração de testes e cobertura para bases de código legadas ou em ritmo acelerado'),
        t('Refactor and migration support, with AI doing the repetitive parts', 'Suporte a refatoração e migração, com a IA cuidando das partes repetitivas'),
        t("Documentation that stays current because it's generated where the code changes", 'Documentação sempre atualizada, gerada no mesmo lugar onde o código muda'),
      ],
    },
    {
      icon: <IconUsers />, tag: t('Enable', 'Capacitar'), title: t('AI onboarding for teams', 'Onboarding de IA para times'),
      body: t(
        'Guided rollouts for executives and non-technical staff, so AI becomes a daily tool rather than a novelty.',
        'Implantações guiadas para executivos e equipes não técnicas, para que a IA vire ferramenta do dia a dia — não uma novidade passageira.'
      ),
      items: [
        t("A rollout plan scoped to your team's actual workflows, not generic training", 'Um plano de implantação desenhado para os fluxos reais do seu time, não um treinamento genérico'),
        t('Hands-on sessions for non-technical staff — no assumed coding background', 'Sessões práticas para equipes não técnicas — sem exigir conhecimento prévio de código'),
        t('Playbooks your team keeps using after the engagement ends', 'Playbooks que seu time continua usando depois que o projeto termina'),
        t('Executive briefings that separate real capability from hype', 'Briefings executivos que separam capacidade real de hype'),
      ],
    },
  ];
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('SERVICES', 'SERVIÇOS')}</span>
          <h2 style={S.h2} className="site-h1">{t('Two service lines. One accountable partner.', 'Duas frentes de serviço. Um único parceiro responsável.')}</h2>
          <p style={S.sectionSub}>{t('Front-end craft and AI enablement, from the same hands. Start with either — most teams end up using both.', 'Front-end de qualidade e capacitação em IA, vindos das mesmas mãos. Comece por qualquer um — a maioria dos times acaba usando os dois.')}</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {LINES.map((line) => (
            <Card key={line.title} padding="lg">
              <div style={ServicesS.row} className="site-grid-2">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  <span style={S.serviceIcon}>{line.icon}</span>
                  <Badge style={{ alignSelf: 'flex-start' }}>{line.tag}</Badge>
                  <h3 style={S.h3}>{line.title}</h3>
                  <p style={S.cardBody}>{line.body}</p>
                </div>
                <ul style={ServicesS.rowList}>
                  {line.items.map((it) => (
                    <li key={it} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14.5, color: 'var(--text-body)', lineHeight: 1.55 }}>
                      <span style={S.checkDot}><IconCheck size={13} /></span>{it}
                    </li>
                  ))}
                </ul>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProcessStrip() {
  const { t } = useT();
  const STEPS = [
    ['01', t('Scope call', 'Call de escopo'), t("We talk through what's slowing you down and whether bloo is a fit.", 'Conversamos sobre o que está te travando e se a bloo é a escolha certa.')],
    ['02', t('Pilot', 'Piloto'), t('A small, fixed-scope engagement proves the approach on one real workflow.', 'Um projeto pequeno e de escopo fechado prova a abordagem em um fluxo real.')],
    ['03', t('Rollout', 'Implantação'), t('We extend what worked to the full team, with build and enablement together.', 'Expandimos o que funcionou para o time todo, unindo construção e capacitação.')],
    ['04', t('Handover', 'Entrega'), t('Playbooks and documentation stay with your team after we leave.', 'Playbooks e documentação ficam com seu time depois que encerramos o projeto.')],
  ];
  return (
    <section style={{ ...S.section, background: 'var(--surface-sunken)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', paddingTop: 64, paddingBottom: 64 }}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('HOW AN ENGAGEMENT RUNS', 'COMO FUNCIONA UM PROJETO')}</span>
          <h2 style={S.h2}>{t('Pilot first. Always.', 'Sempre começamos com um piloto.')}</h2>
        </div>
        <div style={ServicesS.steps} className="site-grid-2">
          {STEPS.map(([n, title, body]) => (
            <div key={n}>
              <div style={ServicesS.stepNum}>{n}</div>
              <h3 style={{ ...S.h3, marginTop: 8 }}>{title}</h3>
              <p style={{ ...S.cardBody, marginTop: 6 }}>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const { t } = useT();
  const TIERS = [
    { name: t('Pilot', 'Piloto'), price: t('From $4,500', 'A partir de $4.500'), tagline: t('Prove it in a few weeks.', 'Prove o conceito em poucas semanas.'), features: [t('One focused workflow or interface', 'Um fluxo ou interface específica'), t('Fixed scope and price', 'Escopo e preço fechados'), t('Results you can take to leadership', 'Resultados que você pode levar para a liderança')] },
    { name: t('Rollout', 'Implantação'), price: t('From $12,000', 'A partir de $12.000'), tagline: t('Take it from pilot to daily use.', 'Leve do piloto ao uso diário.'), features: [t('Full team rollout', 'Implantação para o time todo'), t('Build and enablement together', 'Construção e capacitação juntas'), t('Playbooks and office hours included', 'Playbooks e plantão de dúvidas incluídos')], featured: true },
    { name: t('Partner', 'Parceria'), price: t('From $6,000/mo', 'A partir de $6.000/mês'), tagline: t('Ongoing front-end + AI support.', 'Suporte contínuo em front-end + IA.'), features: [t('Monthly retainer', 'Contrato mensal'), t('Priority turnaround', 'Atendimento prioritário'), t('Continuous workflow tuning', 'Ajuste contínuo dos fluxos de trabalho')] },
  ];
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('ENGAGEMENT MODELS', 'MODELOS DE CONTRATAÇÃO')}</span>
          <h2 style={S.h2}>{t('Pick a starting point', 'Escolha um ponto de partida')}</h2>
          <p style={S.sectionSub}>{t('Every engagement is scoped to your team — these are typical ranges.', 'Cada projeto é desenhado para o seu time — estes são valores de referência.')}</p>
        </div>
        <div style={ServicesS.tierGrid} className="site-grid-3">
          {TIERS.map((tier) => (
            <Card key={tier.name} variant={tier.featured ? 'raised' : 'outline'} padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {tier.featured && <Badge tone="brand" dot style={{ alignSelf: 'flex-start' }}>{t('Most common', 'Mais comum')}</Badge>}
              <div>
                <h3 style={S.h3}>{tier.name}</h3>
                <p style={{ fontSize: 14, color: 'var(--text-muted)', margin: 'var(--space-1) 0 0' }}>{tier.tagline}</p>
              </div>
              <div style={ServicesS.tierPrice}>{tier.price}</div>
              <ul style={{ ...ServicesS.rowList, flex: 1 }}>
                {tier.features.map((f) => (
                  <li key={f} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 14, color: 'var(--text-body)', lineHeight: 1.5 }}>
                    <span style={S.checkDot}><IconCheck size={12} /></span>{f}
                  </li>
                ))}
              </ul>
              <Button as="a" href={LINKS.book} {...EXT} block variant={tier.featured ? 'primary' : 'secondary'}>{t('Book a call', 'Agendar uma call')}</Button>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesContent() {
  const { t } = useT();
  return (
    <>
      <ServiceRows />
      <ProcessStrip />
      <Pricing />
      <CTASection heading={t('Not sure which fits?', 'Não sabe qual escolher?')} body={t('A short call will tell you — no pressure, no deck.', 'Uma call rápida resolve — sem pressão, sem slides.')} />
    </>
  );
}

window.Pages = window.Pages || {};
window.Pages['services'] = { Content: ServicesContent, label: 'Services' };
})();