// WhyUs.jsx — proof section with cinematic team photo
function WhyUs() {
  return (
    <section id="porque" style={{ background: 'var(--bg2)' }}>
      <div className="wrap">

        {/* ── HEADER ── */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
          marginBottom: 64, alignItems: 'end',
        }} className="why-head">
          <div>
            <span className="q-eyebrow">Por Que Business Control</span>
            <h2 style={{ marginTop: 18 }}>
              Não somos reativos.<br />
              <span className="grad-text-sheen">Somos proativos.</span>
            </h2>
          </div>
          <p className="q-sub q-sub-md" style={{ maxWidth: 460 }}>
            Enquanto outros escritórios deixam as coisas como estão, a gente mexe nos números para fazerem mais sentido para você. 15 anos de mercado e uma certeza: sempre tem algo a otimizar.
          </p>
        </div>

        {/* ── STAT STRIP ── */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 2, background: 'var(--border)', marginBottom: 2,
        }} className="stat-strip">
          {[
            { k: '15+',   l: 'anos de atuação',    s: 'no mercado contábil' },
            { k: 'XXX+',  l: 'empresas atendidas',  s: 'em todo o Brasil' },
            { k: 'R$ XMi', l: 'em recuperação',     s: 'tributária acumulada' },
            { k: 'XX%',   l: 'redução média',       s: 'de carga fiscal' },
          ].map((s, i) => (
            <div key={i} style={{ background: 'var(--bg3)', padding: '36px 28px' }}>
              <div style={{
                fontFamily: 'var(--display-stack)',
                fontSize: 'clamp(2.4rem, 4.5vw, 3.6rem)',
                fontWeight: 900,
                background: i === 0 ? 'var(--grad-copper-sheen)' : 'none',
                backgroundSize: '200% 100%',
                WebkitBackgroundClip: i === 0 ? 'text' : 'initial',
                backgroundClip: i === 0 ? 'text' : 'initial',
                WebkitTextFillColor: i === 0 ? 'transparent' : 'initial',
                color: i === 0 ? 'transparent' : 'var(--white)',
                letterSpacing: '-0.035em', lineHeight: 0.9,
                filter: i === 0 ? 'drop-shadow(0 0 20px var(--signal-glow))' : 'none',
                animation: i === 0 ? 'sheen 6s ease-in-out infinite' : 'none',
                marginBottom: 16,
              }}>{s.k}</div>
              <div style={{
                fontFamily: 'var(--display-stack)', fontWeight: 900,
                textTransform: 'uppercase', fontSize: '1rem',
                color: 'var(--white)', marginBottom: 4,
              }}>{s.l}</div>
              <div className="q-micro" style={{ color: 'var(--t3)' }}>{s.s}</div>
            </div>
          ))}
        </div>

        {/* ── TEAM PHOTO — cinematic full-width ── */}
        <div className="why-team-photo" style={{
          position: 'relative',
          width: '100%',
          aspectRatio: '21 / 8',
          overflow: 'hidden',
          marginBottom: 2,
          background: 'var(--bg4)',
        }}>
          {/* photo */}
          <img
            src="./team.jpg"
            alt="Equipe Business Control"
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              objectPosition: 'center 30%',
              filter: 'grayscale(18%) brightness(0.75) contrast(1.05)',
              display: 'block',
            }}
            onError={e => { e.target.style.display = 'none'; }}
          />

          {/* gradient overlays */}
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(to right, rgba(10,8,6,0.72) 0%, transparent 55%)',
          }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(to top, rgba(10,8,6,0.9) 0%, rgba(10,8,6,0.2) 50%, transparent 100%)',
          }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(135deg, rgba(201,106,59,0.12) 0%, transparent 60%)',
          }} />

          {/* copper accent top line */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 2,
            background: 'var(--grad-copper-sheen)',
            backgroundSize: '200% 100%',
            animation: 'sheen 6s ease-in-out infinite',
          }} />

          {/* text overlay */}
          <div style={{
            position: 'absolute', inset: 0,
            display: 'flex', flexDirection: 'column',
            justifyContent: 'flex-end',
            padding: 'clamp(16px, 4vw, 40px) clamp(16px, 4vw, 48px)',
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
              <div>
                <div className="q-micro" style={{ color: 'var(--signal)', marginBottom: 10 }}>
                  A equipe
                </div>
                <h3 style={{
                  fontSize: 'clamp(1.6rem, 3vw, 2.6rem)',
                  letterSpacing: '-0.02em',
                  lineHeight: 1,
                  color: 'var(--white)',
                  margin: 0,
                }}>
                  Quem está por trás<br />dos resultados.
                </h3>
              </div>

              <div style={{
                display: 'flex', gap: 32, alignItems: 'flex-end',
              }} className="team-meta">
                <div style={{ textAlign: 'right' }}>
                  <div style={{
                    fontFamily: 'var(--display-stack)',
                    fontSize: '2.8rem', fontWeight: 900,
                    letterSpacing: '-0.04em', lineHeight: 1,
                    background: 'var(--grad-copper-sheen)',
                    backgroundSize: '200% 100%',
                    WebkitBackgroundClip: 'text',
                    backgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    color: 'transparent',
                    animation: 'sheen 6s ease-in-out infinite',
                  }}>10+</div>
                  <div className="q-micro" style={{ marginTop: 6 }}>especialistas</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{
                    fontFamily: 'var(--display-stack)',
                    fontSize: '2.8rem', fontWeight: 900,
                    letterSpacing: '-0.04em', lineHeight: 1,
                    color: 'var(--white)',
                  }}>15+</div>
                  <div className="q-micro" style={{ marginTop: 6 }}>anos juntos</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ── LOGOS + QUOTE ── */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.1fr',
          gap: 2, background: 'var(--border)',
          marginTop: 72,
        }} className="why-body">

          {/* LOGOS */}
          <div style={{ background: 'var(--bg3)', padding: '40px 36px' }}>
            <div className="q-micro" style={{ marginBottom: 20 }}>Empresas que recuperaram com a gente</div>
            <div className="why-logos-grid" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 2, background: 'var(--border)', marginBottom: 24,
            }}>
              {['Mercado Sul', 'Indústria PR', 'Tech MG', 'Varejo RJ', 'Constr. GO', 'Distrib. BA'].map((n, i) => (
                <div key={i} style={{
                  background: 'var(--bg4)', padding: '28px 20px',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  minHeight: 80,
                  fontFamily: 'var(--display-stack)',
                  fontWeight: 900, textTransform: 'uppercase',
                  letterSpacing: '0.04em', fontSize: '0.85rem',
                  color: 'var(--t3)',
                  transition: 'background .25s, color .25s',
                }}
                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg5)'; e.currentTarget.style.color = 'var(--t2)'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg4)'; e.currentTarget.style.color = 'var(--t3)'; }}
                >{n}</div>
              ))}
            </div>
            <p className="q-small" style={{ color: 'var(--t3)' }}>
              Logos ocultados por confidencialidade.<br />Referências reais sob solicitação.
            </p>
          </div>

          {/* QUOTE */}
          <div style={{
            background: 'var(--bg3)',
            borderLeft: '2px solid var(--signal)',
            padding: 40,
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
          }}>
            <div style={{
              fontFamily: 'var(--display-stack)', fontSize: '3rem',
              fontWeight: 900, color: 'var(--signal)', lineHeight: 0.8, marginBottom: 16,
            }}>"</div>
            <p className="q-sub q-sub-md" style={{ color: 'var(--white)', lineHeight: 1.4, marginBottom: 32 }}>
              Descobrimos que estávamos no regime errado há 3 anos. A Business Control identificou isso em 2 semanas e nos ajudou a recuperar valores que não sabíamos que existiam.
            </p>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <div style={{
                width: 44, height: 44, borderRadius: 1,
                background: 'var(--bg5)', border: '1px solid var(--border2)',
              }} />
              <div>
                <div style={{
                  fontFamily: 'var(--display-stack)', fontWeight: 900,
                  textTransform: 'uppercase', fontSize: '0.88rem', letterSpacing: '0.03em',
                }}>Cliente Business Control</div>
                <div className="q-micro" style={{ color: 'var(--t3)', marginTop: 4 }}>
                  Segmento de Serviços · Recuperação tributária
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <style>{`
        @media (max-width: 900px) {
          .why-head  { grid-template-columns: 1fr !important; gap: 32px !important; }
          .why-body  { grid-template-columns: 1fr !important; }
          .stat-strip { grid-template-columns: 1fr 1fr !important; }
          .team-meta { display: none !important; }
          .why-logos-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 480px) {
          .stat-strip { grid-template-columns: 1fr 1fr !important; }
          .why-team-photo { aspect-ratio: 4 / 3 !important; }
          .why-logos-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.WhyUs = WhyUs;