// Services.jsx — bento assimétrico
function Services() {
  return (
    <section id="servicos">
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <span className="q-eyebrow">Do Operacional ao Estratégico</span>
          <h2 style={{ marginTop: 18, maxWidth: 800 }}>
            O que oferecemos.
          </h2>
        </div>

        {/* bento: 2 big + 6 small */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 1fr 1fr',
          gap: 2,
          background: 'var(--border)',
        }} className="svc-grid">
          <BigSvc
            num="01" tag="Core"
            title="Redução Tributária"
            desc="Análise completa da carga fiscal. Identificamos brechas legais, otimizamos regimes e reduzimos o que você paga todo mês."
            kpi={{ k: '-XX%', l: 'redução média' }}
          />
          <Svc num="02" title="Impugnação Fiscal" desc="Resposta legal e estratégica contra cobranças indevidas do fisco." />
          <Svc num="03" title="Planejamento Tributário" desc="Estratégia para economizar impostos com segurança durante o ano." />

          <BigSvc
            num="04" tag="Core"
            title="Recuperação de Impostos"
            desc="Créditos esquecidos, erros acumulados, oportunidades dormindo. A gente encontra e traz de volta para o seu caixa."
            kpi={{ k: 'R$ XMi', l: 'recuperados' }}
          />
          <Svc num="05" title="Auditoria Preventiva" desc="Encontramos os riscos antes que o fisco encontre por você." />
          <Svc num="06" title="Gestão Fiscal Contínua" desc="Acompanhamento mensal da saúde tributária da sua empresa." />

          <Svc num="07" title="Conformidade Tributária" desc="Garantia de que tudo está em ordem com as obrigações fiscais." />
          <Svc num="08" title="Mudança de Regime" desc="Transição segura e planejada entre regimes tributários." />
          <SvcCta />
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function BigSvc({ num, title, desc, tag, kpi }) {
  return (
    <div style={{
      gridColumn: 'span 1', gridRow: 'span 2',
      background: 'var(--grad-copper-soft), var(--bg2)',
      backgroundBlendMode: 'overlay',
      padding: 40, display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
      minHeight: 380,
    }} className="svc-big">
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 32 }}>
        <div style={{
          fontFamily: 'var(--display-stack)',
          fontSize: '3.2rem', fontWeight: 900,
          lineHeight: 0.9,
          background: 'var(--grad-copper-sheen)',
          backgroundSize: '200% 100%',
          WebkitBackgroundClip: 'text', backgroundClip: 'text',
          WebkitTextFillColor: 'transparent', color: 'transparent',
          letterSpacing: '-0.04em',
          animation: 'sheen 6s ease-in-out infinite',
          filter: 'drop-shadow(0 0 24px var(--signal-glow))',
        }}>{num}</div>
        <span className="badge badge-sig">{tag}</span>
      </div>
      <h3 style={{ fontSize: '2rem', marginBottom: 16, letterSpacing: '-0.02em' }}>{title}</h3>
      <p style={{ color: 'var(--t2)', marginBottom: 32, maxWidth: 420 }}>{desc}</p>
      <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <div style={{
          fontFamily: 'var(--display-stack)',
          fontSize: '2.4rem', fontWeight: 900,
          letterSpacing: '-0.03em', color: 'var(--white)',
        }}>{kpi.k}</div>
        <div className="q-micro">{kpi.l}</div>
      </div>
    </div>
  );
}

function Svc({ num, title, desc }) {
  return (
    <div className="card" style={{ padding: 32, minHeight: 180, background: 'var(--bg2)', borderRadius: 0, borderColor: 'transparent' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: '0.78rem', color: 'var(--signal)', letterSpacing: '0.14em' }}>{num}</span>
        <span style={{ color: 'var(--t3)', transition: 'color .2s, transform .2s' }} className="arrow">→</span>
      </div>
      <h3 style={{ fontSize: '1.2rem', marginBottom: 10, letterSpacing: '-0.005em' }}>{title}</h3>
      <p style={{ color: 'var(--t2)', fontSize: '0.92rem', lineHeight: 1.6 }}>{desc}</p>
    </div>
  );
}

function SvcCta() {
  return (
    <div style={{
      background: 'var(--grad-copper)', color: '#1A0D05',
      padding: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      minHeight: 180, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(100deg, transparent 40%, rgba(255,246,238,0.18) 50%, transparent 60%)',
        backgroundSize: '200% 100%',
        animation: 'sheen 5s ease-in-out infinite',
      }} />
      <div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.78rem', letterSpacing: '0.14em', marginBottom: 18 }}>—</div>
        <h3 style={{ fontSize: '1.2rem', marginBottom: 10, letterSpacing: '-0.005em', color: 'var(--black)' }}>
          Qual desses faz sentido<br />para você?
        </h3>
      </div>
      <button
        onClick={() => document.getElementById('diagnostico')?.scrollIntoView({ behavior: 'smooth' })}
        style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--display-stack)',
          fontWeight: 900, textTransform: 'uppercase',
          letterSpacing: '0.02em', fontSize: '0.9rem',
          color: 'var(--black)',
          borderBottom: '1px solid var(--black)',
          paddingBottom: 4, alignSelf: 'flex-start',
        }}>
        Descobrir no diagnóstico <span className="arrow">→</span>
      </button>
    </div>
  );
}

window.Services = Services;