function About() {
  const companies = ['Hotmart','PicPay','SumUp','Coca-Cola','Sprite','Pizza Hut','Crystal Water','Kibon','Rexona','Ben & Jerry\'s','Yamaha Motors','Vivo','Sadia','Tim','Globo.com','Latam','Tintas Coral','FGV','Inhotim','Infraero'];

  const headRef = React.useRef(null);
  const [headSize, setHeadSize] = React.useState(null);
  const { isMobile } = useViewport();

  /* ── fit "REPERTÓRIO" to 100% of available width, single line ── */
  React.useEffect(() => {
    const h2 = headRef.current;
    if (!h2) return;
    function fit() {
      const avail = h2.clientWidth;
      if (!avail) return;
      const m = document.createElement('span');
      m.style.cssText = 'position:absolute;left:-9999px;top:-9999px;visibility:hidden;white-space:nowrap;' +
        'font-family:HelveticaCompressed,"Arial Narrow",Arial,sans-serif;font-weight:700;font-size:200px;' +
        'letter-spacing:-0.02em;text-transform:uppercase;';
      m.textContent = 'REPERTÓRIO';
      document.body.appendChild(m);
      const w = m.offsetWidth;
      document.body.removeChild(m);
      if (!w) return;
      // 0.5% safety so the single (nowrap) line never overflows the container
      setHeadSize((200 * avail / w * 0.995) + 'px');
    }
    fit();
    const ro = new ResizeObserver(fit);
    ro.observe(h2);
    if (document.fonts && document.fonts.ready) document.fonts.ready.then(fit);
    [120, 400, 900, 1600].forEach((t) => setTimeout(fit, t));
    window.addEventListener('resize', fit);
    return () => { ro.disconnect(); window.removeEventListener('resize', fit); };
  }, []);

  return (
    <section id="sobre" style={{
      background: '#F6F3F0',
      padding: isMobile ? '64px 20px' : '100px 56px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>

        {/* ── Section header ── */}
        <div data-reveal style={{
          borderTop: '1px solid #DDD9D4', paddingTop: 20,
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          marginBottom: 64,
        }}>
          <span style={{
            fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13,
            color: '#9A9A97', letterSpacing: '.12em', textTransform: 'uppercase',
          }}>Sobre</span>
          <span style={{
            fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13,
            color: '#9A9A97', letterSpacing: '.08em',
          }}>↓</span>
        </div>

        {/* ── Name heading ── */}
        <h2 ref={headRef} style={{
          fontFamily: 'HelveticaCompressed, "Arial Narrow", Arial, sans-serif',
          fontWeight: 700,
          fontSize: headSize || 'clamp(40px, 12.8vw, 180px)',
          textTransform: 'uppercase',
          lineHeight: .88,
          color: '#1D1D1B',
          margin: isMobile ? '0 0 48px' : '0 0 72px',
          letterSpacing: '-.02em',
          width: '100%',
          display: 'block',
        }}>
          <span data-split="char" style={{display:'block', lineHeight:'.9', whiteSpace:'nowrap', overflow:'hidden', paddingBottom:'0.18em', marginBottom:'-0.18em'}}>REPERTÓRIO</span>
        </h2>

        {/* ── Photo + Bio ── */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '420px 1fr',
          gap: isMobile ? 40 : 96,
          alignItems: 'start',
          marginBottom: 80,
        }}>
          {/* Photo */}
          <div data-reveal="scale" style={{ maxWidth: isMobile ? 340 : 'none' }}>
            <img
              src="uploads/portrait_lucas_2_s.jpg"
              alt="Lucas Queiroz"
              style={{
                width: '100%',
                height: 'auto',
                display: 'block',
                filter: 'grayscale(100%)',
                borderRadius: 20,
              }}
            />
          </div>

          {/* Bio */}
          <div data-reveal style={{ paddingTop: 8 }}>
            <p style={{
              fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400,
              fontSize: 19, lineHeight: 1.75, color: '#3E3E3B',
              margin: '0 0 28px',
            }}>
              Consultoria e liderança de marketing criativo com mais de 20 anos de carreira
              em agências de publicidade, fintechs e grandes empresas e startups globais.
            </p>
            <p style={{
              fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400,
              fontSize: 19, lineHeight: 1.75, color: '#3E3E3B',
              margin: '0 0 28px',
            }}>
              Atuação flexível e sob demanda, cobrindo desde a concepção do briefing
              criativo até a entrega final, com equipes enxutas e IA integrada ao processo.
            </p>

            {/* Education */}
            <div style={{ borderTop: '1px solid #DDD9D4', marginTop: 40, paddingTop: 24, marginBottom: 32 }}>
              <p style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 11, color: '#9A9A97', letterSpacing: '.18em', textTransform: 'uppercase', margin: '0 0 16px' }}>Formação</p>
              {[
                { title: 'Inglês Avançado / Fluente', sub: 'Conversação e Escrita' },
                { title: 'Espanhol Intermediário', sub: 'Conversação e Escrita' },
                { title: 'Bacharel em Comunicação Social', sub: 'UNA, Publicidade e Propaganda' },
                { title: 'Direção de Arte Avançada II', sub: 'ESPM' },
                { title: 'IDEI.A PRO', sub: 'Curso Creative Punch' },
                { title: 'Image / Video Creator PRO', sub: 'Human Academy' },
              ].map(e => (
                <div key={e.title} style={{ marginBottom: 12, display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700, fontSize: 14, color: '#1D1D1B' }}>{e.title}</span>
                  <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13, color: '#9A9A97' }}>{e.sub}</span>
                </div>
              ))}
            </div>

            {/* Awards */}
            <div style={{ borderTop: '1px solid #DDD9D4', marginTop: 8, paddingTop: 24, marginBottom: 32 }}>
              <p style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 11, color: '#9A9A97', letterSpacing: '.18em', textTransform: 'uppercase', margin: '0 0 16px' }}>Reconhecimentos</p>
              {[
                { title: 'Lusófonos', sub: 'Bronze — TV Ad' },
                { title: 'Effie Brasil', sub: 'Finalist' },
                { title: 'TikTok For Business', sub: 'Case Study' },
                { title: 'Cannes Lions Festival', sub: 'Shortlist — Cyber' },
                { title: 'New York Festivals', sub: 'Finalist — Print' },
                { title: 'Clube de Criação Brasil', sub: 'Bronze — Digital' },
                { title: 'El Ojo de Iberoamérica', sub: 'Bronze — Print' },
                { title: 'Maximídia', sub: 'Best Use of Social Media' },
                { title: 'B9 GrandPrix', sub: 'Silver' },
                { title: 'Prêmio Abril de Publicidade', sub: 'Silver' },
                { title: 'Luerzer\'s Archive', sub: '4 issues · 9 ads' },
                { title: 'Best Ads on TV', sub: '4 Best Ads of the Week — 2 Print, 2 Digital' },
              ].map(e => (
                <div key={e.title} style={{ marginBottom: 12, display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700, fontSize: 14, color: '#1D1D1B' }}>{e.title}</span>
                  <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13, color: '#9A9A97' }}>{e.sub}</span>
                </div>
              ))}
            </div>

            {/* Contact strip */}
            <div style={{
              borderTop: '1px solid #DDD9D4', paddingTop: 24,
              display: 'flex', gap: 32, flexWrap: 'wrap', alignItems: 'center',
            }}>
              {[
                { href: 'mailto:lucasqueiroz@gmail.com', label: 'lucasqueiroz@gmail.com' },
                { href: 'https://linkedin.com/in/lucasqueiroz', label: 'LinkedIn ↗', target: '_blank' },
                { href: 'https://wa.me/5511975514667?text=Quero%20trabalhar%20com%20a%20LSQ.', label: '+55 11 97551 4667', target: '_blank' },
              ].map(l => (
                <a key={l.label} href={l.href} target={l.target || undefined} style={{
                  fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 13,
                  color: '#9A9A97', textDecoration: 'none', letterSpacing: '.06em',
                  transition: 'color 150ms',
                }}
                onMouseEnter={e=>e.currentTarget.style.color='#1D1D1B'}
                onMouseLeave={e=>e.currentTarget.style.color='#9A9A97'}
                >{l.label}</a>
              ))}
            </div>
          </div>
        </div>

        {/* ── Clients strip ── */}
        <div data-reveal style={{ borderTop: '1px solid #DDD9D4', paddingTop: 28 }}>
          <p style={{
            fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 400, fontSize: 11,
            color: '#9A9A97', letterSpacing: '.18em', textTransform: 'uppercase',
            margin: '0 0 20px',
          }}>Marcas atendidas</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 12px', alignItems: 'baseline' }}>
            {companies.map((c, i) => (
              <React.Fragment key={c}>
                <span style={{
                  fontFamily: 'HelveticaCompressed, "Arial Narrow", Arial, sans-serif',
                  fontWeight: 700, fontSize: 22, textTransform: 'uppercase',
                  color: '#1D1D1B', letterSpacing: '.01em',
                }}>{c}</span>
                {i < companies.length - 1 && (
                  <span style={{ color: '#C0BFBB', fontSize: 18, fontWeight: 400 }}>·</span>
                )}
              </React.Fragment>
            ))}
            <span style={{
              fontFamily: 'HelveticaCompressed, "Arial Narrow", Arial, sans-serif',
              fontWeight: 700, fontSize: 22, textTransform: 'uppercase',
              color: '#C0BFBB', letterSpacing: '.01em',
            }}>& More</span>
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { About });