// Sections 5-6: Bridge (Estratégia→Execução) + Traceply  — both DARK
const SectionBridge = () => {
  const steps = [
    { n: '01', k: 'Diagnóstico', d: 'Mapeamento da cadeia, gaps regulatórios e pontos críticos de auditoria.' },
    { n: '02', k: 'Estruturação', d: 'Desenho da arquitetura de dados, governança e responsabilidades.' },
    { n: '03', k: 'Automação', d: 'Entra a plataforma Traceply para coleta, validação e auditoria contínua de dados.' },
    { n: '04', k: 'Integração', d: 'Processos em campo, integrações com ERP, fornecedores e parceiros.' },
    { n: '05', k: 'Operação', d: 'Monitoramento 24/7, atualização regulatória e evolução da cadeia.' },
  ];

  return (
    <section className="section section--bridge section--dark" id="bridge">
      <div className="container">
        <div className="section__head section__head--dark">
          <h2 className="section__title section__title--dark">
            Da <span className="accent-word">estratégia</span><br />
            à execução.
          </h2>
          <p className="bridge__lede">
            Cinco passos conectados que transformam exigência regulatória
            em vantagem operacional contínua.
          </p>
        </div>

        <div className="bridge__timeline">
          <div className="bridge__rail" />
          <div className="bridge__rail-fill" />
          {steps.map((s, i) => (
            <div className={`bridge__step ${['03','04','05'].includes(s.n) ? 'bridge__step--accent' : (['01','02'].includes(s.n) ? 'bridge__step--pre' : '')}`} key={s.n}>
              {s.n === '03' && (
                <div className="bridge__tag bridge__tag--top">
                  <span className="bridge__tag-led" />
                  TRACEPLY
                </div>
              )}
              <div className="bridge__dot">
                <div className="bridge__dot-inner" />
              </div>
              <div className="bridge__num">{s.n}</div>
              <div className="bridge__step-title">{s.k}</div>
              <div className="bridge__step-desc">{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SectionTraceply = () => {
  return (
    <section className="section section--traceply section--dark" id="traceply">
      <div className="container">
        <div className="traceply__grid">
          <div className="traceply__left">
            <div className="traceply__logo">
              <img src="assets/traceply-logo.png" alt="Traceply" />
            </div>
            <h2 className="section__title section__title--dark">
              Tecnologia que <span className="accent-lime">sustenta</span><br />
              a operação.
            </h2>
            <p className="traceply__body">
              A Traceply é a plataforma que permite automatizar, validar e
              escalar a conformidade em tempo real — transformando o método
              Veros em infraestrutura operacional.
            </p>
            <div className="traceply__ctas">
              <a href="#" className="btn btn--lime">
                Conhecer a plataforma
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a href="#" className="btn btn--ghost-dark">
                Ver documentação técnica
              </a>
            </div>
          </div>
          <div className="traceply__right">
            <div className="traceply__viz">
              <div className="traceply__viz-top">
                <div className="traceply__viz-tab traceply__viz-tab--active">
                  <span className="traceply__viz-led" />
                  Compliance Live
                </div>
                <div className="traceply__viz-tab">Auditoria</div>
                <div className="traceply__viz-tab">Fornecedores</div>
              </div>
              <div className="traceply__viz-stat">
                <div className="traceply__viz-stat-k">Lotes monitorados · 24h</div>
                <div className="traceply__viz-stat-v">
                  18,492
                  <span className="traceply__viz-stat-delta">+12.4%</span>
                </div>
              </div>
              <div className="traceply__viz-bars">
                {Array.from({ length: 24 }).map((_, i) => {
                  const h = 20 + Math.abs(Math.sin(i * 0.7 + 1.2)) * 70;
                  return (
                    <div
                      key={i}
                      className="traceply__viz-bar"
                      style={{ height: `${h}%`, opacity: i < 20 ? 1 : 0.35 }}
                    />
                  );
                })}
              </div>
              <div className="traceply__viz-rows">
                {[
                  ['SP-BR', 'COMPLIANT', 'ok'],
                  ['MG-BR', 'COMPLIANT', 'ok'],
                  ['PA-BR', 'REVIEW', 'warn'],
                  ['MT-BR', 'COMPLIANT', 'ok'],
                ].map(([node, st, k]) => (
                  <div className="traceply__viz-row" key={node}>
                    <span className="traceply__viz-row-node">{node}</span>
                    <div className="traceply__viz-row-bar">
                      <div
                        className={`traceply__viz-row-fill traceply__viz-row-fill--${k}`}
                        style={{ width: k === 'ok' ? '92%' : '64%' }}
                      />
                    </div>
                    <span className={`traceply__viz-row-status traceply__viz-row-status--${k}`}>{st}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.SectionBridge = SectionBridge;
window.SectionTraceply = SectionTraceply;