/* bloo.app — Home page. */
(function () {
const { Button, Badge, Card, Tag } = window.BlooAppDesignSystem_ab7292;
const { LINKS, EXT, Icons, S, CTASection } = window.Site;
const { useT } = window.I18n;
const { IconLayers, IconCode, IconUsers, IconSpark, IconArrow, IconCheck, IconPackage } = Icons;

const HomeS = {
  hero: { background: 'linear-gradient(180deg, var(--blue-50) 0%, var(--surface-card) 100%)', paddingTop: 88, paddingBottom: 88 },
  heroInner: { display: 'flex', flexDirection: 'column', gap: 22, alignItems: 'flex-start', maxWidth: 780 },
  h1: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 60, lineHeight: 1.04, letterSpacing: '-.03em', color: 'var(--text-strong)', margin: 0, textWrap: 'balance' },
  lede: { fontSize: 19, lineHeight: 1.55, color: 'var(--text-body)', maxWidth: 620, margin: 0 },
  trustRow: { display: 'flex', gap: 16, alignItems: 'center', marginTop: 20, flexWrap: 'wrap' },
  trustLabel: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.1em', color: 'var(--text-subtle)', whiteSpace: 'nowrap' },
  grid3: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  grid2: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 },
  approachGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' },
  banner: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' },
};

function Hero() {
  const { t } = useT();
  return (
    <section style={HomeS.hero}>
      <div style={{ ...S.container, ...HomeS.heroInner }} className="site-container">
        <Badge tone="brand" dot>{t('Front-end + AI, done properly', 'Front-end + IA, do jeito certo')}</Badge>
        <h1 style={HomeS.h1} className="site-h1-hero">{t('Move faster with AI — without the guesswork.', 'Avance mais rápido com IA — sem tentativa e erro.')}</h1>
        <p style={HomeS.lede}>
          {t(
            "bloo helps teams adopt AI on solid ground: Flutter and UX front-end work, AI-augmented dev workflows, and guided AI rollouts for the people who don't write code. Built on real practice, not theory.",
            'A bloo ajuda times a adotar IA com segurança: front-end em Flutter e UX, fluxos de desenvolvimento com IA e implantações guiadas para quem não escreve código. Baseado em prática real, não em teoria.'
          )}
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
          <Button as="a" href={LINKS.book} {...EXT} size="lg" trailingIcon={<Icons.IconExternal />}>{t('Book a call', 'Agendar uma call')}</Button>
          <Button as="a" href="case-studies.html" size="lg" variant="secondary">{t('See case studies', 'Ver estudos de caso')}</Button>
        </div>
        <div style={HomeS.trustRow}>
          <span style={HomeS.trustLabel}>{t('TRUSTED FOR', 'CONFIADO PARA')}</span>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <Tag>{t('Flutter apps', 'Apps Flutter')}</Tag><Tag>{t('UX audits', 'Auditorias de UX')}</Tag><Tag>{t('AI dev workflows', 'Fluxos de dev com IA')}</Tag><Tag>{t('AI onboarding', 'Onboarding de IA')}</Tag>
          </div>
        </div>
      </div>
    </section>
  );
}

function Metrics() {
  const { t } = useT();
  const METRICS = [
    ['3×', t('faster review cycles', 'ciclos de revisão mais rápidos')],
    ['40%', t('less time in onboarding', 'menos tempo em onboarding')],
    ['80%', t('fewer bugs reported', 'menos bugs reportados')],
    ['80%', t('less time on routine tasks', 'menos tempo em tarefas rotineiras')],
  ];
  return (
    <section style={S.metricsBand}>
      <div style={{ ...S.container, ...S.metricsInner }} className="site-container">
        {METRICS.map(([n, l]) => (
          <div key={l} style={{ textAlign: 'center' }}>
            <div style={S.metricNum}>{n}</div>
            <div style={S.metricLabel}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Services() {
  const { t } = useT();
  const SERVICES = [
    { 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.') },
    { 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.') },
    { 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.') },
  ];
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('WHAT WE DO', 'O QUE FAZEMOS')}</span>
          <h2 style={S.h2}>{t('Two connected service lines', 'Duas frentes de serviço conectadas')}</h2>
          <p style={S.sectionSub}>{t('Front-end craft and AI enablement, from the same hands. You can start with either.', 'Front-end de qualidade e capacitação em IA, vindos das mesmas mãos. Você pode começar por qualquer um dos dois.')}</p>
        </div>
        <div style={HomeS.grid3} className="site-grid-3">
          {SERVICES.map((s) => (
            <Card key={s.title} padding="lg" interactive style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <span style={S.serviceIcon}>{s.icon}</span>
              <Badge style={{ alignSelf: 'flex-start' }}>{s.tag}</Badge>
              <h3 style={S.h3}>{s.title}</h3>
              <p style={S.cardBody}>{s.body}</p>
              <a href="services.html" style={S.cardLink}>{t('Learn more', 'Saiba mais')} <IconArrow size={15} /></a>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudiesTeaser() {
  const { t } = useT();
  const CASE_TEASERS = [
    { tag: t('AI dev workflows', 'Fluxos de dev com IA'), title: t('3× faster code review, 80% fewer bugs reaching prod', '3× mais rápido na revisão de código, 80% menos bugs em produção'), body: t('How we wired AI-assisted checks into an existing engineering workflow — without slowing anyone down.', 'Como integramos verificações assistidas por IA a um fluxo de engenharia já existente — sem atrasar ninguém.') },
    { tag: t('AI onboarding', 'Onboarding de IA'), title: t('Cutting onboarding time 40% for a non-technical team', 'Reduzindo em 40% o tempo de onboarding de um time não técnico'), body: t('A guided AI rollout for an operations team that had never used these tools before.', 'Uma implantação guiada de IA para um time de operações que nunca tinha usado essas ferramentas.') },
  ];
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('PROOF', 'NA PRÁTICA')}</span>
          <h2 style={S.h2}>{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.', 'Uma amostra de trabalhos recentes nas duas frentes de atuação.')}</p>
        </div>
        <div style={HomeS.grid2} className="site-grid-2">
          {CASE_TEASERS.map((c) => (
            <Card key={c.title} padding="lg" interactive style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Badge tone="brand" style={{ alignSelf: 'flex-start' }}>{c.tag}</Badge>
              <h3 style={S.h3}>{c.title}</h3>
              <p style={S.cardBody}>{c.body}</p>
              <a href="case-studies.html" style={S.cardLink}>{t('Read the case study', 'Ler o estudo de caso')} <IconArrow size={15} /></a>
            </Card>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <Button as="a" href="case-studies.html" variant="secondary">{t('See all case studies', 'Ver todos os estudos de caso')}</Button>
        </div>
      </div>
    </section>
  );
}

function ProductsBanner() {
  const { t } = useT();
  return (
    <section style={{ ...S.section, background: 'var(--surface-sunken)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={S.container} className="site-container">
        <Card variant="raised" padding="lg" style={HomeS.banner}>
          <div style={{ display: 'flex', gap: 18, alignItems: 'flex-start', maxWidth: 560 }}>
            <span style={S.serviceIcon}><IconPackage /></span>
            <div>
              <h3 style={S.h3}>{t('Prefer to DIY? Ready-made AI Skills and code templates.', 'Prefere fazer você mesmo? Skills de IA e templates de código prontos.')}</h3>
              <p style={{ ...S.cardBody, marginTop: 8 }}>{t('Same patterns we use on client engagements, packaged so your team can install them directly.', 'Os mesmos padrões que usamos com clientes, empacotados para seu time instalar diretamente.')}</p>
            </div>
          </div>
          <Button as="a" href="products.html" size="lg" trailingIcon={<IconArrow />}>{t('Browse products', 'Ver produtos')}</Button>
        </Card>
      </div>
    </section>
  );
}

function Approach() {
  const { t } = useT();
  const POINTS = [
    t('Real front-end expertise — we build, not just advise.', 'Experiência real em front-end — nós construímos, não só recomendamos.'),
    t('Credible to engineers and executives alike.', 'Credível tanto com engenheiros quanto com executivos.'),
    t('Precise, measured rollouts. No hype, no lock-in.', 'Implantações precisas e medidas. Sem hype, sem dependência forçada.'),
    t('One accountable partner, start to finish.', 'Um único parceiro responsável, do início ao fim.'),
  ];
  return (
    <section style={S.section}>
      <div style={{ ...S.container, ...HomeS.approachGrid }} className="site-container site-grid-2">
        <div>
          <span style={S.eyebrow}>{t('THE APPROACH', 'A ABORDAGEM')}</span>
          <h2 style={S.h2}>{t('Calm, grounded AI adoption.', 'Adoção de IA com calma e sem exageros.')}</h2>
          <p style={S.sectionSub}>{t('We meet teams where they are and leave them faster — with tools their people actually use.', 'Partimos do estágio em que cada time está e os deixamos mais rápidos — com ferramentas que as pessoas realmente usam.')}</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 'var(--space-6) 0 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
            {POINTS.map((p) => (
              <li key={p} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15, color: 'var(--text-body)', lineHeight: 1.5 }}>
                <span style={S.checkDot}><IconCheck size={13} /></span>{p}
              </li>
            ))}
          </ul>
        </div>
        <Card variant="raised" padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <span style={S.serviceIcon}><IconSpark /></span>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '.06em', color: 'var(--text-muted)' }}>{t('PILOT → ROLLOUT', 'PILOTO → IMPLANTAÇÃO')}</div>
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1.3, color: 'var(--text-strong)', letterSpacing: '-.01em', margin: 0 }}>
            {t('"The rare partner who gets the code ', '"O raro parceiro que entende o código ')}<em>{t('and', 'e')}</em>{t(' the people using it."', ' as pessoas que vão usá-lo."')}
          </p>
          <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{t('— what we build toward on every engagement', '— o que buscamos em cada projeto')}</div>
        </Card>
      </div>
    </section>
  );
}

function HomeContent() {
  const { t } = useT();
  return (
    <>
      <Hero />
      <Metrics />
      <Services />
      <CaseStudiesTeaser />
      <ProductsBanner />
      <Approach />
      <CTASection heading={t("Tell us what you're trying to ship.", 'Conte o que você está tentando lançar.')} body={t('A short call is the fastest way to find out if bloo is a fit. No decks, no pressure.', 'Uma call rápida é o jeito mais direto de saber se a bloo é a escolha certa. Sem slides, sem pressão.')} />
    </>
  );
}

window.Pages = window.Pages || {};
window.Pages.home = { Content: HomeContent, label: 'Home' };
})();