function Autoridade() {
  const imgRef = useRef(null);
  const p = useScrollProgress(imgRef);
  const y = (p - 0.5) * 100;
  const [founderErr, setFounderErr] = useState(false);
  const [productErr, setProductErr] = useState(false);

  return (
    <Section id="autoridade" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--line-soft)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60, marginBottom: 70 }} className="aut-head">
          <Label n="07">Autoridade</Label>
          <MaskLines
            tag="h2"
            className="serif"
            style={{ fontSize: 'clamp(38px, 5vw, 72px)', lineHeight: 1, letterSpacing: '-0.03em' }}
            lines={[
              <>O que falam sobre <em className="italic">meu trabalho?</em></>,
            ]}
          />
        </div>

        {/* Testimonial com fotos */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60, alignItems: 'center' }} className="aut-testi">

          {/* Left column — founder + product images */}
          <div ref={imgRef} className="aut-img-col" style={{ position: 'relative', paddingBottom: '30%' }}>

            {/* Founder image — main card */}
            <div style={{ position: 'relative', aspectRatio: '3/4', overflow: 'hidden', background: 'var(--bg)' }}>
              {!founderErr ? (
                <img
                  src="images/autoridade-cliente.webp"
                  alt=""
                  onError={() => setFounderErr(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={{ position: 'absolute', inset: '-10%', background: 'repeating-linear-gradient(135deg, oklch(0.22 0.008 230) 0 14px, oklch(0.19 0.008 230) 14px 28px)', transform: `translate3d(0,${y}px,0) scale(1.1)`, willChange: 'transform' }} />
                  <div style={{ position: 'absolute', inset: 0, background: 'oklch(0.18 0.005 85 / 0.5)' }} />
                </>
              )}
              <div style={{ position: 'absolute', left: 20, bottom: 20, right: 20, zIndex: 4, pointerEvents: 'none' }}>
                <span className="serif" style={{ fontSize: 22, letterSpacing: '-0.02em', color: '#fff' }}>Paula · Empório Fit</span>
              </div>
            </div>

            {/* Product image — floating card, overlaps bottom-right */}
            <div className="aut-product-card" style={{
              position: 'absolute',
              right: -28, bottom: 0,
              width: '58%', aspectRatio: '4/5',
              overflow: 'hidden',
              background: 'var(--bg)',
              border: '2px solid var(--bg-2)',
              boxShadow: '0 24px 60px oklch(0 0 0 / 0.25)',
            }}>
              {!productErr ? (
                <img
                  src="images/autoridade-produto.webp"
                  alt=""
                  onError={() => setProductErr(true)}
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              ) : (
                <>
                  <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg, oklch(0.72 0.13 70) 0 18px, oklch(0.60 0.12 60) 18px 36px)' }} />
                  <div style={{ position: 'absolute', inset: 0, background: 'oklch(0.22 0.01 70 / 0.4)' }} />
                </>
              )}
              <div style={{ position: 'absolute', left: 14, bottom: 14, zIndex: 4 }}>
                <span className="mono" style={{ fontSize: 10, color: 'oklch(0.96 0.008 85 / 0.8)', letterSpacing: '0.08em' }}>Produto</span>
              </div>
            </div>
          </div>

          {/* Right column — quote */}
          <Reveal delay={150}>
            <blockquote className="serif" style={{ fontSize: 'clamp(22px, 2.8vw, 38px)', letterSpacing: '-0.02em', lineHeight: 1.3, color: 'var(--fg)' }}>
              "Fidel, antes de conhecer você já tinha passado por diversos profissionais que não souberam identificar o meu desejo sobre minha linha de produtos. E com isso a linha ficava uma bagunça, sem personalidade e nada marcante. Quando contratei você gostei da forma como organizou desde a primeira reunião, até o briefing e as demais reuniões para poder de fato saber o que estava buscando. E agora vejo o <em className="italic">upgrade</em> da minha linha de produtos e o quanto ela irá crescer com essa identidade profissional, moderna e de bom gosto. Obrigada por estar fazendo esse sonho se tornar realidade. Você ganhou uma cliente pra vida."
              <footer style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 16 }}>
                <span style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--accent)' }} />
                <div>
                  <div style={{ fontSize: 14, letterSpacing: '-0.005em' }}>Paula</div>
                  <div className="mono">Empório Fit</div>
                </div>
              </footer>
            </blockquote>
          </Reveal>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) {
          .aut-head, .aut-testi { grid-template-columns: 1fr !important; gap: 24px !important; }
          .aut-img-col { max-width: 440px !important; }
        }
        @media (max-width: 480px) {
          .aut-product-card { right: -8px !important; width: 48% !important; }
          .aut-img-col { padding-bottom: 26% !important; }
        }
      `}</style>
    </Section>
  );
}

window.Autoridade = Autoridade;