/* bloo.app — About page: solo-practitioner bio (only page with personal framing). */
(function () {
const { Card } = window.BlooAppDesignSystem_ab7292;
const { LINKS, EXT, S, CTASection } = window.Site;
const { useT } = window.I18n;

const AboutS = {
  bioRow: { display: 'flex', gap: 40, alignItems: 'flex-start', flexWrap: 'wrap' },
  bioText: { flex: 1, minWidth: 300, display: 'flex', flexDirection: 'column', gap: 14 },
  name: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, letterSpacing: '-.01em', color: 'var(--text-strong)' },
  role: { fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-muted)', marginTop: 2 },
  socialRow: { display: 'flex', gap: 20, flexWrap: 'wrap', marginTop: 8 },
  socialLink: { display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 500, color: 'var(--text-link)', textDecoration: 'none', whiteSpace: 'nowrap' },
  valuesGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 },

  quoteGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 },
  quoteCard: { height: '100%', display: 'flex', flexDirection: 'column' },
  quoteMark: { fontFamily: 'var(--font-display)', fontSize: 44, lineHeight: 1, color: 'var(--blue-200)', marginBottom: 4 },
  quoteText: { fontSize: 15, lineHeight: 1.6, color: 'var(--text-body)', margin: 0, flex: 1 },
  quoteFoot: { marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--border-subtle)' },
  quoteName: { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, letterSpacing: '-.01em', color: 'var(--text-strong)' },
  quoteRole: { fontFamily: 'var(--font-mono)', fontSize: 12.5, color: 'var(--text-muted)', marginTop: 2 },
};

function Bio() {
  const { t } = useT();
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHeadLeft}>
          <span style={S.eyebrow}>{t('ABOUT', 'SOBRE')}</span>
          <h2 style={S.h2} className="site-h1">{t('The person behind bloo', 'A pessoa por trás da bloo')}<span style={{ color: 'var(--brand)' }}>.</span>app</h2>
        </div>
        <div style={AboutS.bioRow}>
          <img src={(window.__resources && window.__resources.brunoHeadshot) || 'uploads/bruno-headshot.webp'} alt="Bruno" style={{ width: 180, height: 180, flex: 'none', borderRadius: '50%', objectFit: 'cover' }} />
          <div style={AboutS.bioText}>
            <div>
              <div style={AboutS.name}>Bruno Luigi</div>
              <div style={AboutS.role}>{t('Founder — Flutter, UX, and AI enablement', 'Fundador — Flutter, UX e capacitação em IA')}</div>
            </div>
            <p style={S.cardBody}>
              {t(
                "bloo.app is a solo practice, not an agency. I build production Flutter and UX front-ends, and help engineering teams and non-technical staff put AI to work without the hype. Every service here is something I do myself, end to end — no handoffs, no bench.",
                'A bloo.app é uma atuação individual, não uma agência. Eu construo front-ends em Flutter e UX prontos para produção, e ajudo times de engenharia e equipes não técnicas a colocar IA para funcionar de verdade, sem hype. Cada serviço aqui é algo que eu mesmo faço, do início ao fim — sem repasses, sem time de reserva.'
              )}
            </p>
            <p style={S.cardBody}>
              {t(
                "I write about Flutter, UX, and AI practice on Medium, and share more of the day-to-day on YouTube as FlutterUX. If you want to see how I think before booking a call, that's the place to start.",
                'Escrevo sobre Flutter, UX e prática de IA no Medium, e compartilho mais do dia a dia no YouTube como FlutterUX. Se você quiser entender como eu penso antes de agendar uma call, é por aí que deve começar.'
              )}
            </p>
            <div style={AboutS.socialRow}>
              <a href={LINKS.linkedin} {...EXT} style={AboutS.socialLink}>LinkedIn</a>
              <a href={LINKS.medium} {...EXT} style={AboutS.socialLink}>Medium</a>
              <a href={LINKS.youtube} {...EXT} style={AboutS.socialLink}>YouTube</a>
              <a href={`mailto:${LINKS.personalEmail}`} style={AboutS.socialLink}>{LINKS.personalEmail}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Values() {
  const { t } = useT();
  const VALUES = [
    [t('I ship the thing, not just a recommendation.', 'Eu entrego o trabalho feito, não só uma recomendação.'), t('Every engagement produces working software or a working rollout — not a slide deck telling you what to do next.', 'Cada projeto resulta em software funcionando ou uma implantação funcionando — não uma apresentação dizendo o que fazer a seguir.')],
    [t('Grounded in real practice, not theory.', 'Baseado em prática real, não em teoria.'), t("Every recommendation comes from work I've actually shipped — not trend-chasing takes on what AI might do someday.", 'Cada recomendação vem de trabalho que eu de fato entreguei — não de opiniões correndo atrás de tendências sobre o que a IA talvez faça algum dia.')],
    [t('Credible in the boardroom and the codebase.', 'Credível na sala da diretoria e no código.'), t('I can present to leadership and pair with your engineers in the same week — that dual fluency is the whole point.', 'Posso apresentar para a liderança e programar em par com seus engenheiros na mesma semana — essa fluência dupla é o diferencial.')],
    [t('Every AI rollout is measured.', 'Toda implantação de IA é medida.'), t("If it's not faster or better afterward, we say so. No vanity metrics.", 'Se não ficar mais rápido ou melhor depois, a gente fala isso claramente. Sem métricas de vaidade.')],
  ];
  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={S.sectionHead}>
          <span style={S.eyebrow}>{t('HOW I WORK', 'COMO EU TRABALHO')}</span>
          <h2 style={S.h2}>{t('Why teams choose bloo', 'Por que os times escolhem a bloo')}</h2>
        </div>
        <div style={AboutS.valuesGrid} className="site-grid-2">
          {VALUES.map(([title, body]) => (
            <Card key={title} padding="lg">
              <h3 style={S.h3}>{title}</h3>
              <p style={{ ...S.cardBody, marginTop: 8 }}>{body}</p>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const { t } = useT();
  const TESTIMONIALS = [
    {
      name: 'Ilo Rivero',
      role: t('PhD candidate in Computer Science, PPGInf PUC Minas', 'Doutorando em Ciência da Computação, PPGInf PUC Minas'),
      url: 'https://www.linkedin.com/in/ilorivero/',
      quote: t(
        "Bruno is an exceptional professional \u2014 his work on UX/UI projects, and how he integrates those interfaces into Flutter, is second to none. He understands the problem at hand and handles interaction design, implementation, and follow-up fixes and improvements himself. He's also easy to work with across teams and disciplines. Any development team has a lot to gain from having Bruno on their squad.",
        'O Bruno é um profissional excepcional \u2014 o trabalho dele em projetos de UX/UI, e a forma como integra essas interfaces ao Flutter, não fica atrás de ninguém. Ele entende o problema em questão e cuida sozinho do design de interação, da implementação e dos ajustes e melhorias posteriores. Também é fácil de trabalhar com ele entre diferentes times e áreas. Qualquer time de desenvolvimento tem muito a ganhar com o Bruno no squad.'
      ),
    },
    {
      name: 'Cássio Gusson',
      role: t('Journalist, Cointelegraph Brasil', 'Jornalista, Cointelegraph Brasil'),
      url: 'https://www.linkedin.com/in/cassio-gusson/',
      quote: t(
        "Bruno is a fantastic developer \u2014 committed, efficient, proactive, and beyond hitting deadlines, he suggests changes with usability and user experience in mind. On any project I'm involved in that touches app development, Bruno is always the first name that comes to mind.",
        'O Bruno é um desenvolvedor fantástico \u2014 comprometido, eficiente, proativo e, além de cumprir prazos, sugere mudanças pensando em usabilidade e experiência do usuário. Em qualquer projeto que eu participe e que envolva desenvolvimento de aplicativos, o Bruno é sempre o primeiro nome que me vem à cabeça.'
      ),
    },
    {
      name: 'Jean Santos',
      role: 'Atoms',
      url: 'https://www.linkedin.com/in/jhemarcos/',
      quote: t(
        "Bruno is definitely an exceptional professional. His commitment to delivering quality results shows in every interaction \u2014 he handles situations properly, whether the context is abstract or highly specific. We'll certainly keep working together on great projects.",
        'O Bruno é, sem dúvida, um profissional excepcional. O comprometimento dele em entregar resultados de qualidade aparece em cada interação \u2014 ele lida bem com as situações, seja em contextos abstratos ou bem específicos. Com certeza vamos continuar trabalhando juntos em grandes projetos.'
      ),
    },
    {
      name: 'Henrique Andrade',
      role: 'Quality Education For Everyone',
      url: 'https://www.linkedin.com/in/henrique-andrade-cefis/',
      quote: t(
        "On every project we've worked on together, Bruno has shown strong technical skill along with real communication and coordination ability. Always a pleasure partnering with him.",
        'Em todos os projetos que fizemos juntos, o Bruno mostrou forte capacidade técnica, além de comunicação e coordenação de verdade. Sempre um prazer trabalhar em parceria com ele.'
      ),
    },
  ];
  return (
    <section style={S.section}>
      <div style={S.container} className="site-container">
        <div style={S.sectionHead}>
          <span style={S.eyebrow}>{t('RECOMMENDATIONS', 'RECOMENDAÇÕES')}</span>
          <h2 style={S.h2}>{t('What people say', 'O que dizem sobre o trabalho')}</h2>
        </div>
        <div style={AboutS.quoteGrid} className="site-grid-2">
          {TESTIMONIALS.map((person) => (
            <Card key={person.name} padding="lg" style={AboutS.quoteCard}>
              <span style={AboutS.quoteMark} aria-hidden="true">{'\u201C'}</span>
              <p style={AboutS.quoteText}>{person.quote}</p>
              <div style={AboutS.quoteFoot}>
                {person.url ? (
                  <a href={person.url} {...EXT} style={{ ...AboutS.quoteName, textDecoration: 'none' }}>{person.name}</a>
                ) : (
                  <div style={AboutS.quoteName}>{person.name}</div>
                )}
                <div style={AboutS.quoteRole}>{person.role}</div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutContent() {
  const { t } = useT();
  return (
    <>
      <Bio />
      <Values />
      <Testimonials />
      <CTASection heading={t('Want to talk specifics?', 'Quer falar dos detalhes?')} body={t('A short call is the fastest way to find out if bloo is a fit.', 'Uma call rápida é o jeito mais rápido de saber se a bloo é a escolha certa.')} />
    </>
  );
}

window.Pages = window.Pages || {};
window.Pages.about = { Content: AboutContent, label: 'About' };
})();