/* bloo.app — Honest contact actions: calendar and email, no simulated form. */
(function () {
const { Button, Card, Badge } = window.BlooAppDesignSystem_ab7292;
const { PRODUCT, LINKS, EXT, Icons, S, trackEvent } = window.Site;
const { useT } = window.I18n;
const { IconSpark, IconArrow, IconMail, IconCode } = Icons;

const C = {
  grid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, alignItems: 'stretch', maxWidth: 920, margin: '0 auto' },
  card: { display: 'flex', flexDirection: 'column', gap: 16, height: '100%' },
  direct: { fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.55, margin: 0 },
};

function ContactContent() {
  const { t } = useT();
  const projectSubject = encodeURIComponent(t('Project conversation with bloo', 'Conversa sobre projeto com a bloo'));
  const cohortSubject = encodeURIComponent(t(`Founding cohort — ${PRODUCT.name}`, `Coorte fundadora — ${PRODUCT.name}`));
  const cohortBody = encodeURIComponent(t(
    'Hi Bruno,\n\nTeam size:\nAI tool (Claude, Cursor, or Copilot):\nTypical stack:\nCan the team test on real pull requests?\nInterested as: research partner / paid pilot\n\nAnything else:',
    'Oi Bruno,\n\nTamanho do time:\nFerramenta de IA (Claude, Cursor ou Copilot):\nStack principal:\nO time pode testar em pull requests reais?\nInteresse como: parceiro de pesquisa / piloto pago\n\nMais algum contexto:'
  ));
  React.useEffect(() => { trackEvent('view_contact'); }, []);
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('CONTACT', 'CONTATO')}</span>
          <h1 style={S.h2} className="site-h1">{t('Talk directly with the person doing the work.', 'Fale diretamente com a pessoa que faz o trabalho.')}</h1>
          <p style={S.sectionSub}>{t('I am Bruno. Choose the shortest path for what you need: a project conversation or the adaptive review founding cohort.', 'Eu sou Bruno. Escolha o caminho mais curto para o que você precisa: uma conversa sobre projeto ou a coorte fundadora da revisão adaptativa.')}</p>
        </div>
        <div style={C.grid} className="site-grid-2">
          <Card variant="raised" padding="lg" style={C.card}>
            <span style={S.serviceIcon}><IconSpark /></span>
            <Badge style={{ alignSelf: 'flex-start' }}>{t('CLIENT WORK', 'TRABALHO COM CLIENTE')}</Badge>
            <h2 style={{ ...S.h3, fontSize: 25 }}>{t('Bring me the product or workflow problem.', 'Traga o problema de produto ou de fluxo.')}</h2>
            <p style={S.cardBody}>{t('Book 30 minutes for Flutter, UX, AI engineering workflows, or team adoption. No deck and no handoff to a sales team.', 'Agende 30 minutos para falar de Flutter, UX, fluxos de engenharia com IA ou adoção pelo time. Sem apresentação e sem repasse para um time comercial.')}</p>
            <Button as="a" href={LINKS.book} {...EXT} size="lg" block trailingIcon={<Icons.IconExternal />} onClick={() => trackEvent('book_call', { from: 'contact' })}>{t('Book a call with Bruno', 'Agendar uma conversa com Bruno')}</Button>
            <a href={`mailto:${LINKS.companyEmail}?subject=${projectSubject}`} style={S.cardLink} onClick={() => trackEvent('service_inquiry', { method: 'email' })}><IconMail size={15} /> {t('Or email the project context', 'Ou envie o contexto por e-mail')}</a>
          </Card>
          <Card padding="lg" style={C.card}>
            <span style={S.serviceIcon}><IconCode /></span>
            <Badge tone="brand" dot style={{ alignSelf: 'flex-start' }}>{t(PRODUCT.stageLabel.en, PRODUCT.stageLabel.pt)} · {PRODUCT.version}</Badge>
            <h2 style={{ ...S.h3, fontSize: 25 }}>{t('Join the founding cohort.', 'Participe da coorte fundadora.')}</h2>
            <p style={S.cardBody}>{t('The cohort is for teams of 2–10 developers already using Claude, Cursor, or Copilot and able to test on real pull requests. Research and paid-pilot participation are tracked separately.', 'A coorte é para times de 2 a 10 desenvolvedores que já usam Claude, Cursor ou Copilot e podem testar em pull requests reais. Participação em pesquisa e piloto pago são acompanhadas separadamente.')}</p>
            <Button as="a" href={`mailto:${LINKS.companyEmail}?subject=${cohortSubject}&body=${cohortBody}`} size="lg" block trailingIcon={<IconArrow />} onClick={() => trackEvent('beta_application', { from: 'contact' })}>{t('Email the cohort application', 'Enviar candidatura por e-mail')}</Button>
            <p style={C.direct}>{t(`Two paid pilot places are offered privately at ${PRODUCT.pilotPricing.intl.display} internationally or ${PRODUCT.pilotPricing.br.display} in Brazil. The adaptive preview is not yet presented as production-validated.`, `Duas vagas de piloto pago são oferecidas de forma privada por ${PRODUCT.pilotPricing.br.display} no Brasil ou ${PRODUCT.pilotPricing.intl.display} internacionalmente. O preview adaptativo ainda não é apresentado como validado para produção.`)}</p>
          </Card>
        </div>
        <div style={{ textAlign: 'center', marginTop: 28, color: 'var(--text-muted)', fontSize: 14 }}>
          <a href={`mailto:${LINKS.personalEmail}`} style={{ color: 'var(--text-link)', textDecoration: 'none' }}>{LINKS.personalEmail}</a>
          {' · '}
          <a href={LINKS.linkedin} {...EXT} style={{ color: 'var(--text-link)', textDecoration: 'none' }}>LinkedIn</a>
          {' · '}
          <a href={LINKS.youtube} {...EXT} style={{ color: 'var(--text-link)', textDecoration: 'none' }}>YouTube</a>
        </div>
      </div>
    </section>
  );
}

window.Pages = window.Pages || {};
window.Pages.contact = { Content: ContactContent, label: 'Contact' };
})();