// sections-mid.jsx — Benefits, SocialProof (giant numbers), Offer

const BENEFITS = [
  {
    title: "Elimine o risco de autuação",
    body: "Antes que o auditor apareça na sua empresa. Diagnóstico completo de cada item do checklist do MTE.",
  },
  {
    title: "PGR completo e auditável",
    body: "Elaborado por quem conhece os critérios que o auditor do Ministério do Trabalho realmente aplica em campo.",
  },
  {
    title: "Riscos psicossociais mapeados",
    body: "Metodologia juridicamente válida para o ponto mais sensível — e mais autuado — da nova NR-1.",
  },
  {
    title: "Liderança treinada presencialmente",
    body: "Para que a conformidade não fique só no papel. RH e gestores aplicam o programa no dia a dia.",
  },
  {
    title: "Guia prático de conformidade",
    body: "Material completo para sua equipe manter a adequação ao longo do tempo, sem depender de terceiros.",
  },
  {
    title: "Proteção contra ações trabalhistas",
    body: "Saúde mental e condições de trabalho são hoje um dos maiores vetores de litígio nas TRTs. Blindamos esse flanco.",
  },
];

const Benefits = () => (
  <section className="section benefits reveal">
    <div className="container">
      <div className="benefits__header">
        <p className="eyebrow-lg">O que você ganha</p>
        <span className="gold-rule center" style={{ marginTop: 16 }} />
        <h2 className="display-2">
          Conformidade que protege a operação — não que enche prateleira.
        </h2>
      </div>
      <div className="benefits__grid">
        {BENEFITS.map((b, i) => (
          <div key={i} className="benefit">
            <span className="benefit__num">{String(i + 1).padStart(2, '0')}</span>
            <h4>{b.title}</h4>
            <p>{b.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const SocialProof = () => (
  <section className="section proof reveal">
    <div className="proof__bg" aria-hidden="true" />
    <div className="proof__overlay" aria-hidden="true" />
    <div className="proof__inner container">
      <div className="proof__header">
        <p className="eyebrow-lg on-dark">Os números falam</p>
        <span className="gold-rule center" style={{ marginTop: 16, background: 'var(--gold-light)' }} />
        <h2 className="display-2" style={{ color: 'var(--off-white)' }}>
          Enquanto os depoimentos chegam, a matemática da fiscalização não espera.
        </h2>
      </div>

      <div className="proof__stats">
        <div className="stat">
          <div className="stat__label">Multa por item</div>
          <div className="stat__big">
            <span className="currency">R$</span>1.700
            <span className="unit">a 5.200</span>
          </div>
          <p className="stat__caption">
            Empresas autuadas por descumprimento da NR-1 podem receber este valor <em>por cada item descumprido</em>.
          </p>
        </div>
        <div className="stat">
          <div className="stat__label">Numa única visita</div>
          <div className="stat__big">
            <span className="currency">R$</span>20.000
          </div>
          <p className="stat__caption">
            Um diagnóstico com três não-conformidades pode resultar em R$ 15.000 a R$ 20.000 em multas — em uma só visita.
          </p>
        </div>
        <div className="stat">
          <div className="stat__label">Risco adicional</div>
          <div className="stat__big">
            +<span className="unit" style={{ fontSize: '0.36em', color: 'var(--gold-light)' }}>ações</span>
          </div>
          <p className="stat__caption">
            Sem contar ações judiciais movidas por colaboradores que venham a alegar danos à saúde mental.
          </p>
        </div>
      </div>

      <p className="proof__footnote">
        Espaço reservado para depoimentos de clientes — em breve.
      </p>
    </div>
  </section>
);

const OFFER_ROWS = [
  { title: "Diagnóstico inicial", body: "Análise do estágio atual de conformidade da sua empresa." },
  { title: "GRO — Gerenciamento de Riscos Ocupacionais", body: "Mapeamento completo de todos os riscos relevantes para seu porte e atividade." },
  { title: "PGR — Programa de Gerenciamento de Riscos", body: "Documento elaborado conforme os critérios exigidos pela fiscalização do MTE." },
  { title: "Mapeamento de riscos psicossociais", body: "Inventário das condições de trabalho com foco em saúde mental — o ponto mais autuado hoje." },
  { title: "Guia completo de conformidade", body: "Material prático para sua equipe manter a adequação ao longo do tempo." },
  { title: "Treinamento presencial na sua empresa", body: "Capacitação de lideranças e RH para aplicar e sustentar o programa." },
  { title: "Segurança jurídica", body: "Assessoria de advogada especializada em direito do trabalho." },
];

const Offer = () => (
  <section className="section offer reveal">
    <div className="container">
      <div className="offer__header">
        <p className="eyebrow-lg">A oferta</p>
        <span className="gold-rule" style={{ marginTop: 16 }} />
        <h2 className="display-2">
          O que está incluso na assessoria de adequação à NR-1.
        </h2>
      </div>
      <div className="offer__table">
        {OFFER_ROWS.map((r, i) => (
          <div key={i} className="offer__row">
            <div className="offer__row-head">
              <span className="offer__row-num">{String(i + 1).padStart(2, '0')}</span>
              <span className="offer__row-title">{r.title}</span>
            </div>
            <div className="offer__row-body">{r.body}</div>
          </div>
        ))}
      </div>
      <div className="offer__note">
        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#B07C4B" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="10" />
          <path d="M12 8v4" />
          <circle cx="12" cy="16" r="0.5" fill="#B07C4B" />
        </svg>
        <p>
          <strong>Não trabalhamos com pacotes fechados.</strong> O valor da assessoria é definido após entendermos o tamanho e a complexidade da sua operação. Por isso, o próximo passo é uma consultoria — <em>sem compromisso</em> — para que possamos apresentar uma proposta adequada à sua realidade.
        </p>
      </div>
    </div>
  </section>
);

Object.assign(window, { Benefits, SocialProof, Offer });