function Portrait() {
  const ref = useRef(null);
  const p = useScrollProgress(ref);
  const y = (p - 0.5) * 120;
  const [imgErr, setImgErr] = useState(false);

  return (
    <Section id="portrait" pad="lg" style={{ borderTop: '1px solid var(--line-soft)', position: 'relative', overflow: 'hidden' }}>
      <div ref={ref} className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }} className="portrait-grid">
          <div className="portrait-img" style={{ position: 'relative' }}>
            <div style={{ position: 'relative', aspectRatio: '4/5', overflow: 'hidden', background: 'var(--bg-2)' }}>
              {!imgErr ? (
                <img
                  src="images/portrait-main.webp"
                  alt=""
                  onError={() => setImgErr(true)}
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transform: `translate3d(0,${y}px,0) scale(1.15)`, willChange: 'transform' }}
                />
              ) : (
                <div style={{ width: '100%', height: '100%', minHeight: 400, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <div style={{ transform: `translate3d(0,${y}px,0)` }}>
                    <span className="serif italic" style={{ fontSize: 'clamp(160px, 22vw, 360px)', color: 'oklch(0.78 0.05 70 / 0.35)', lineHeight: 1, display: 'block' }}>Φ</span>
                  </div>
                </div>
              )}
              {/* label strip bottom */}
              <div style={{
                position: 'absolute', left: 20, bottom: 20,
                background: 'var(--accent)', color: 'var(--bg)',
                padding: '10px 16px', borderRadius: 999,
                fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
                zIndex: 4, pointerEvents: 'none',
              }}>● Criador do Método PHI</div>
            </div>
          </div>

          <div>
            <Reveal>
              <Label n="—">Quem está por trás</Label>
            </Reveal>
            <MaskLines
              tag="h2"
              className="serif"
              delay={150}
              style={{ fontSize: 'clamp(36px, 5vw, 72px)', letterSpacing: '-0.03em', lineHeight: 1, marginTop: 24 }}
              lines={[
                <>Engenheiro.</>,
                <><em className="italic">Designer.</em></>,
                <>Apaixonado por</>,
                <>estudar o <em className="italic">mercado.</em></>,
              ]}
            />
            <Reveal delay={500}>
              <p style={{ marginTop: 40, fontSize: 17, lineHeight: 1.6, color: 'var(--fg-dim)', maxWidth: 500 }}>
                Comecei como designer. Parei quando entendi que o problema quase nunca era design —
                era falta de direção. As marcas chegavam pedindo estética, mas a elas não faltava uma
                simples "arte" e sim direcionamento. O Método PHI nasce do desconforto de ver 40+ marcas
                tentando resolver no reboco o que precisava ser resolvido na fundação. Ademais, para validar
                o que, por muitos anos, defendi aos meus clientes, criei minha própria marca de suplementos,
                a <em className="italic serif" style={{ color: 'var(--fg)' }}>Joully</em>.
              </p>
            </Reveal>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 48, borderTop: '1px solid var(--line-soft)', paddingTop: 32 }} className="portrait-stats">
              <Reveal delay={600}>
                <div>
                  <div className="serif" style={{ fontSize: 'clamp(28px, 7vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1 }}>
                    <Counter to={10} suffix="+" />
                  </div>
                  <div className="mono" style={{ marginTop: 8 }}>anos experiência</div>
                </div>
              </Reveal>
              <Reveal delay={700}>
                <div>
                  <div className="serif" style={{ fontSize: 'clamp(28px, 7vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1 }}>
                    <Counter to={40} suffix="+" />
                  </div>
                  <div className="mono" style={{ marginTop: 8 }}>marcas aplicadas</div>
                </div>
              </Reveal>
              <Reveal delay={800}>
                <div>
                  <div className="serif italic" style={{ fontSize: 'clamp(22px, 4vw, 36px)', letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: 2 }}>
                    Dono
                  </div>
                  <div className="mono" style={{ marginTop: 8 }}>da própria marca de suplementos</div>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .portrait-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .portrait-img { max-width: 480px !important; }
          .portrait-stats { gap: 16px !important; }
        }
        @media (max-width: 560px) {
          .portrait-stats { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 480px) {
          .portrait-stats { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding-top: 24px !important; }
        }
      `}</style>
    </Section>
  );
}

window.Portrait = Portrait;