/* bloo.app — Company-led home with a product-led flagship funnel. */
(function () {
const { Button, Badge, Card, Tag } = window.BlooAppDesignSystem_ab7292;
const { PRODUCT, LINKS, EXT, Icons, S, routeHref, trackEvent } = window.Site;
const { useT } = window.I18n;
const { IconLayers, IconCode, IconUsers, IconSpark, IconArrow, IconCheck, IconPackage, IconTarget } = Icons;

const H = {
  hero: { background: 'linear-gradient(180deg, var(--blue-50) 0%, var(--surface-card) 100%)', paddingTop: 84, paddingBottom: 82 },
  heroInner: { display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'flex-start', maxWidth: 820 },
  h1: { fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 58, lineHeight: 1.05, letterSpacing: '-.03em', color: 'var(--text-strong)', margin: 0, textWrap: 'balance' },
  lede: { fontSize: 19, lineHeight: 1.58, color: 'var(--text-body)', maxWidth: 680, margin: 0 },
  trust: { display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', marginTop: 8 },
  grid3: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 },
  grid2: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 },
  workGrid: { display: 'grid', gridTemplateColumns: '1.25fr 1fr 1fr', gap: 20 },
  flagship: { display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 48, alignItems: 'center' },
  founder: { display: 'grid', gridTemplateColumns: '220px 1fr', gap: 42, alignItems: 'start' },
  portrait: { width: 200, height: 200, borderRadius: '50%', objectFit: 'cover', border: '6px solid var(--surface-card)', boxShadow: 'var(--shadow-md)' },
  list: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 },
  productPanel: { display: 'flex', flexDirection: 'column', gap: 16, background: 'var(--surface-inverse)', color: 'var(--text-onbrand)' },
  mono: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.09em', color: 'var(--text-subtle)', textTransform: 'uppercase' },
  quote: { fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.4, letterSpacing: '-.01em', color: 'var(--text-strong)', margin: 0 },
  final: { background: 'var(--surface-inverse)', padding: 'var(--space-21) 0' },
};

function Hero() {
  const { t } = useT();
  React.useEffect(() => { trackEvent('view_home'); }, []);
  return (
    <section style={H.hero}>
      <div style={{ ...S.container, ...H.heroInner }} className="site-container">
        <Badge tone="brand" dot>{t('Independent product studio by Bruno Luigi', 'Estúdio independente de produtos de Bruno Luigi')}</Badge>
        <h1 style={H.h1} className="site-h1-hero">{t('Useful software, practical AI systems, and the work behind them.', 'Software útil, sistemas práticos de IA e o trabalho por trás deles.')}</h1>
        <p style={H.lede}>{t('bloo is my independent product studio. I build Flutter and UX products, practical AI workflows, and maintained systems that teams can own and adapt.', 'A bloo é meu estúdio independente de produtos. Eu construo produtos em Flutter e UX, fluxos práticos de IA e sistemas mantidos que os times podem possuir e adaptar.')}</p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
          <Button as="a" href={routeHref('case-studies')} size="lg" trailingIcon={<IconArrow />} onClick={() => trackEvent('view_work', { from: 'home_hero' })}>{t('See the work', 'Ver os trabalhos')}</Button>
          <Button as="a" href={routeHref('ai-code-review')} size="lg" variant="secondary" onClick={() => trackEvent('click_product_cta', { from: 'home_hero' })}>{t('Explore AI Code Review', 'Explorar AI Code Review')}</Button>
        </div>
        <div style={H.trust}>
          <span style={H.mono}>{t('BUILT AROUND', 'CONSTRUÍDO EM TORNO DE')}</span>
          <Tag>{t('Product craft', 'Construção de produto')}</Tag><Tag>Flutter & UX</Tag><Tag>{t('Practical AI', 'IA prática')}</Tag><Tag>{t('Team-owned systems', 'Sistemas do time')}</Tag>
        </div>
      </div>
    </section>
  );
}

function SelectedWork() {
  const { t } = useT();
  const work = [
    {
      product: true,
      badge: t('FLAGSHIP PRODUCT', 'PRODUTO PRINCIPAL'),
      title: t('bloo Adaptive Code Review', 'bloo Adaptive Code Review'),
      body: t('A repository-aware review system for Claude, Cursor, and Copilot. It profiles each codebase, activates only relevant adapters, and routes every change by risk.', 'Um sistema de revisão consciente do repositório para Claude, Cursor e Copilot. Ele traça o perfil de cada base, ativa apenas adaptadores relevantes e roteia cada mudança pelo risco.'),
      href: routeHref('ai-code-review'),
      cta: t('Explore the adaptive preview', 'Explorar o preview adaptativo'),
    },
    {
      badge: t('CLIENT WORK · AI', 'TRABALHO COM CLIENTE · IA'),
      title: t('A faster, more deliberate review workflow', 'Um fluxo de revisão mais rápido e deliberado'),
      body: t('An engineering engagement that embedded AI-assisted checks into the tools and review habits the team already used.', 'Um projeto de engenharia que incorporou verificações assistidas por IA às ferramentas e aos hábitos de revisão que o time já usava.'),
      href: routeHref('case-studies'),
      cta: t('Read the case note', 'Ler o caso'),
    },
    {
      badge: t('CLIENT WORK · PRODUCT', 'TRABALHO COM CLIENTE · PRODUTO'),
      title: t('Flutter and UX built as one system', 'Flutter e UX construídos como um sistema só'),
      body: t('Interface implementation, product judgment, and design-system work handled end to end by one accountable maker.', 'Implementação de interface, julgamento de produto e design system conduzidos de ponta a ponta por uma única pessoa responsável.'),
      href: routeHref('services'),
      cta: t('See how I work', 'Ver como eu trabalho'),
    },
  ];
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHeadLeft}>
          <span style={S.eyebrow}>{t('SELECTED WORK', 'TRABALHOS SELECIONADOS')}</span>
          <h2 style={S.h2}>{t('Products and client work, under one roof.', 'Produtos e trabalhos com clientes, sob o mesmo teto.')}</h2>
          <p style={S.sectionSub}>{t('The products come from the same practice as the services: find a recurring problem, build the system, test it in real work, and make it reusable.', 'Os produtos vêm da mesma prática que os serviços: encontrar um problema recorrente, construir o sistema, testá-lo no trabalho real e torná-lo reutilizável.')}</p>
        </div>
        <div style={H.workGrid} className="site-work-grid">
          {work.map((item) => (
            <Card key={item.title} variant={item.product ? 'raised' : 'outline'} padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 14, height: '100%' }}>
              <Badge tone={item.product ? 'brand' : 'neutral'} dot={item.product} style={{ alignSelf: 'flex-start' }}>{item.badge}</Badge>
              <h3 style={{ ...S.h3, fontSize: item.product ? 24 : 20 }}>{item.title}</h3>
              <p style={S.cardBody}>{item.body}</p>
              <a href={item.href} style={S.cardLink}>{item.cta} <IconArrow size={15} /></a>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function Flagship() {
  const { t } = useT();
  const points = [
    t('Profiles packages, versions, conventions, risk zones, and hot paths.', 'Mapeia pacotes, versões, convenções, zonas de risco e caminhos críticos.'),
    t('Activates React or Flutter guidance only when repository evidence supports it.', 'Ativa orientações de React ou Flutter apenas quando há evidência no repositório.'),
    t('Routes each diff through the minimum relevant review passes.', 'Roteia cada diff pelos passes mínimos de revisão relevantes.'),
    t('Requires evidence, a failure scenario, a fix, and verification for high-severity findings.', 'Exige evidência, cenário de falha, correção e verificação para achados de alta severidade.'),
  ];
  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, ...H.flagship }} className="site-container site-grid-2">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
          <Badge tone="brand" dot>{t(PRODUCT.stageLabel.en, PRODUCT.stageLabel.pt)} · {PRODUCT.version}</Badge>
          <span style={S.eyebrow}>{t('FLAGSHIP PRODUCT', 'PRODUTO PRINCIPAL')}</span>
          <h2 style={S.h2}>{t('Repository-aware AI code review for the tools your team already uses.', 'Code review com IA consciente do repositório, nas ferramentas que seu time já usa.')}</h2>
          <p style={S.sectionSub}>{t('Install it once. bloo learns the repository before it reviews the change, keeps policy local, and works through Claude, Cursor, or Copilot without adding another hosted code-review vendor.', 'Instale uma vez. A bloo entende o repositório antes de revisar a mudança, mantém a política local e funciona via Claude, Cursor ou Copilot sem adicionar outro fornecedor hospedado de code review.')}</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 4 }}>
            <Button as="a" href={routeHref('ai-code-review', '#cohort')} trailingIcon={<IconArrow />} onClick={() => trackEvent('join_beta', { from: 'home_flagship' })}>{t('Join the founding cohort', 'Participar da coorte fundadora')}</Button>
            <Button as="a" href={routeHref('benchmark')} variant="secondary" onClick={() => trackEvent('click_benchmark', { from: 'home_flagship' })}>{t('See validation status', 'Ver status da validação')}</Button>
          </div>
        </div>
        <Card variant="raised" padding="lg" style={H.productPanel}>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ ...H.mono, color: 'rgba(255,255,255,.55)' }}>.bloo/profile.yml</span>
            <Badge tone="brand">{t('Repository profile', 'Perfil do repositório')}</Badge>
          </div>
          <ul style={H.list}>
            {points.map((point) => (
              <li key={point} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,.82)' }}>
                <span style={{ ...S.checkDot, background: 'rgba(255,255,255,.12)', color: 'white' }}><IconCheck size={13} /></span>{point}
              </li>
            ))}
          </ul>
          <div style={{ borderTop: '1px solid rgba(255,255,255,.14)', paddingTop: 14, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <Tag>Claude</Tag><Tag>Cursor</Tag><Tag>GitHub Copilot</Tag><Tag>/bloo-doctor</Tag>
          </div>
        </Card>
      </div>
    </section>
  );
}

function Capabilities() {
  const { t } = useT();
  const capabilities = [
    { icon: <IconLayers />, tag: t('BUILD', 'CONSTRUIR'), title: t('Flutter and UX products', 'Produtos em Flutter e UX'), body: t('Production interfaces, feature work, design systems, accessibility, and product judgment from one accountable maker.', 'Interfaces em produção, funcionalidades, design systems, acessibilidade e julgamento de produto com uma única pessoa responsável.') },
    { icon: <IconCode />, tag: t('SYSTEMIZE', 'SISTEMATIZAR'), title: t('Practical AI workflows', 'Fluxos práticos de IA'), body: t('Repository-aware review, testing, documentation, and automation shaped around the way an engineering team already works.', 'Revisão consciente do repositório, testes, documentação e automação moldados ao jeito que o time de engenharia já trabalha.') },
    { icon: <IconUsers />, tag: t('ENABLE', 'CAPACITAR'), title: t('Team adoption', 'Adoção pelo time'), body: t('Hands-on rollout, policy, and playbooks that leave the team with a working habit—not a presentation about one.', 'Implantação prática, política e playbooks que deixam o time com um hábito funcionando — não uma apresentação sobre ele.') },
  ];
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('WHAT I BUILD', 'O QUE EU CONSTRUO')}</span>
          <h2 style={S.h2}>{t('From one-off work to systems teams can keep.', 'Do trabalho pontual aos sistemas que os times podem manter.')}</h2>
        </div>
        <div style={H.grid3} className="site-grid-3">
          {capabilities.map((item) => (
            <Card key={item.title} padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <span style={S.serviceIcon}>{item.icon}</span>
              <span style={H.mono}>{item.tag}</span>
              <h3 style={S.h3}>{item.title}</h3>
              <p style={S.cardBody}>{item.body}</p>
            </Card>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 30 }}>
          <Button as="a" href={routeHref('services')} variant="secondary" trailingIcon={<IconArrow />}>{t('See services', 'Ver serviços')}</Button>
        </div>
      </div>
    </section>
  );
}

function Founder() {
  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">
        <div style={H.founder} className="site-founder-grid">
          <img src={(window.__resources && window.__resources.brunoHeadshot) || '/uploads/bruno-headshot.webp'} alt={t('Bruno Luigi, founder of bloo', 'Bruno Luigi, fundador da bloo')} style={H.portrait} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <span style={S.eyebrow}>{t('THE MAKER', 'QUEM FAZ')}</span>
            <h2 style={S.h2}>{t('The person behind the work is visible in it.', 'A pessoa por trás do trabalho está visível nele.')}</h2>
            <p style={S.sectionSub}>{t('I am Bruno Luigi. bloo is a solo practice, not an agency: I design the approach, build the product or workflow, work directly with the team, and stay accountable for the result.', 'Eu sou Bruno Luigi. A bloo é uma prática solo, não uma agência: eu desenho a abordagem, construo o produto ou fluxo, trabalho diretamente com o time e continuo responsável pelo resultado.')}</p>
            <div style={H.grid2} className="site-grid-2">
              <Card padding="lg">
                <p style={H.quote}>{t('“Bruno understands the problem, handles interaction design and implementation, and works easily across teams and disciplines.”', '“Bruno entende o problema, cuida do design de interação e da implementação e trabalha bem entre times e disciplinas.”')}</p>
                <p style={{ ...S.cardBody, marginTop: 14 }}>— Ilo Rivero</p>
              </Card>
              <Card padding="lg">
                <p style={H.quote}>{t('“Committed, efficient, proactive, and always thinking about usability and the user experience.”', '“Comprometido, eficiente, proativo e sempre pensando em usabilidade e experiência do usuário.”')}</p>
                <p style={{ ...S.cardBody, marginTop: 14 }}>— Cássio Gusson</p>
              </Card>
            </div>
            <div><Button as="a" href={routeHref('about')} variant="secondary" trailingIcon={<IconArrow />}>{t('About Bruno and bloo', 'Sobre Bruno e a bloo')}</Button></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Portfolio() {
  const { t } = useT();
  const themes = [
    [<IconCode />, t('AI engineering systems', 'Sistemas de engenharia com IA'), t('Repeatable review, testing, documentation, and delivery workflows.', 'Fluxos repetíveis de revisão, testes, documentação e entrega.')],
    [<IconLayers />, t('Flutter and UX infrastructure', 'Infraestrutura de Flutter e UX'), t('Reusable interface foundations, components, and product patterns.', 'Bases reutilizáveis de interface, componentes e padrões de produto.')],
    [<IconTarget />, t('Team playbooks', 'Playbooks para times'), t('Practical operating systems for adoption, quality, and handover.', 'Sistemas operacionais práticos para adoção, qualidade e transferência.')],
  ];
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('PRODUCT STUDIO', 'ESTÚDIO DE PRODUTOS')}</span>
          <h2 style={S.h2}>{t('One product is shipping. The practice is broader.', 'Um produto está disponível. A prática é mais ampla.')}</h2>
          <p style={S.sectionSub}>{t('bloo names and prices products only when they are real. These are the areas where repeated client work may become the next maintained system.', 'A bloo só nomeia e precifica produtos quando eles são reais. Estas são as áreas em que trabalhos recorrentes com clientes podem virar o próximo sistema mantido.')}</p>
        </div>
        <div style={H.grid3} className="site-grid-3">
          {themes.map(([icon, title, body]) => (
            <Card key={title} variant="outline" padding="lg" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <span style={S.serviceIcon}>{icon}</span>
              <h3 style={S.h3}>{title}</h3>
              <p style={S.cardBody}>{body}</p>
            </Card>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 30 }}>
          <Button as="a" href={routeHref('products')} variant="secondary" trailingIcon={<IconPackage />}>{t('View available products', 'Ver produtos disponíveis')}</Button>
        </div>
      </div>
    </section>
  );
}

function FinalCta() {
  const { t } = useT();
  return (
    <section style={H.final}>
      <div style={{ ...S.container, textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' }} className="site-container">
        <IconSpark size={30} />
        <h2 style={{ ...S.h2, color: 'var(--text-onbrand)', maxWidth: 700 }}>{t('Use the product, or bring me the problem behind it.', 'Use o produto ou traga o problema por trás dele.')}</h2>
        <p style={{ fontSize: 17, color: 'rgba(255,255,255,.74)', maxWidth: 600, lineHeight: 1.55, margin: 0 }}>{t('Join the adaptive review founding cohort, or talk directly with me about a product, workflow, or team that needs a better system.', 'Participe da coorte fundadora da revisão adaptativa ou fale diretamente comigo sobre um produto, fluxo ou time que precisa de um sistema melhor.')}</p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', marginTop: 8 }}>
          <Button as="a" href={routeHref('ai-code-review', '#cohort')} size="lg" trailingIcon={<IconArrow />} onClick={() => trackEvent('join_beta', { from: 'home_final' })}>{t('Join the founding cohort', 'Participar da coorte fundadora')}</Button>
          <Button as="a" href={LINKS.book} {...EXT} size="lg" variant="secondary" style={{ background: 'transparent', borderColor: 'rgba(255,255,255,.3)', color: 'var(--text-onbrand)' }} onClick={() => trackEvent('book_call', { from: 'home_final' })}>{t('Discuss a project', 'Conversar sobre um projeto')}</Button>
        </div>
      </div>
    </section>
  );
}

function HomeContent() {
  return <><Hero /><SelectedWork /><Flagship /><Capabilities /><Founder /><Portfolio /><FinalCta /></>;
}

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