// Sections 2-4: Problema, Posicionamento, Pilares

const SectionProblema = ({ darkOverVideo = false }) => {
  const items = [
    { n: '01', t: 'Cadeias fragmentadas', d: 'Dados dispersos entre fornecedores, plantas e parceiros logísticos sem camada comum.' },
    { n: '02', t: 'Rastreabilidade frágil', d: 'Informações inconsistentes, não-auditáveis e distantes do tempo real.' },
    { n: '03', t: 'Pressão regulatória', d: 'Novas exigências globais (EUDR, CSRD, CBAM) aceleram em ritmo acima da adaptação.' },
    { n: '04', t: 'Risco de exclusão', d: 'Empresas sem prova de conformidade perdem acesso a mercados estratégicos.' },
  ];

  return (
    <section className={'section section--problema' + (darkOverVideo ? ' section--problema-over-video' : '')} id="problema">
      <div className="container">
        {darkOverVideo ? (
          <div className="section__head section__head--problema-left">
            <h2 className="section__title section__title--problema">
              O mundo exige<br />
              <span className="accent-word accent-word--light">cadeias produtivas</span><br />
              mais responsáveis e<br />
              transparentes.
            </h2>
          </div>
        ) : (
          <div className="section__head">
            <h2 className="section__title">
              O mundo exige <span className="accent-word">transparência</span>.<br />
              As cadeias ainda não entregam.
            </h2>
          </div>
        )}
        <div className={'problema__grid' + (darkOverVideo ? ' problema__grid--diagonal' : '')}>
          {items.map((it, i) => (
            <div className="problema__card" key={it.n} style={darkOverVideo ? { '--stagger': i } : {}}>
              <div className="problema__card-num">{it.n}</div>
              <div className="problema__card-title">{it.t}</div>
              <div className="problema__card-desc">{it.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SectionPosicionamento = () => {
  return (
    <section className="section section--posicionamento" id="posicionamento">
      <div className="container">
        <div className="posicionamento__grid">
          <div className="posicionamento__left">
            <h2 className="section__title section__title--lg">
              A camada de <span className="accent-word">confiança</span> das cadeias produtivas.
            </h2>
          </div>
          <div className="posicionamento__right">
            <p className="posicionamento__lede">
              A Veros conecta empresas, dados e processos para criar cadeias
              produtivas auditáveis, transparentes e alinhadas às exigências
              globais.
            </p>
            <p className="posicionamento__body">
              Não entregamos software isolado. Desenhamos a infraestrutura de
              confiança que sustenta a operação de indústrias, agronegócios e
              seus parceiros — da origem ao destino.
            </p>
            <div className="posicionamento__marks">
              <div className="posicionamento__mark">
                <div className="posicionamento__mark-k">Atuação</div>
                <div className="posicionamento__mark-v">Estratégica + Operacional</div>
              </div>
              <div className="posicionamento__mark">
                <div className="posicionamento__mark-k">Modelo</div>
                <div className="posicionamento__mark-v">Consultoria + Plataforma</div>
              </div>
              <div className="posicionamento__mark">
                <div className="posicionamento__mark-k">Alcance</div>
                <div className="posicionamento__mark-v">Cadeias globais</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const SectionPilares = () => {
  const pilares = [
    {
      k: 'Rastreabilidade',
      d: 'Visibilidade ponta a ponta da origem ao destino, validada em cada elo.',
      icon: (
        <svg viewBox="0 0 48 48" fill="none">
          <circle cx="10" cy="24" r="4" stroke="currentColor" strokeWidth="1.5"/>
          <circle cx="24" cy="24" r="4" stroke="currentColor" strokeWidth="1.5"/>
          <circle cx="38" cy="24" r="4" stroke="currentColor" strokeWidth="1.5"/>
          <path d="M14 24h6M28 24h6" stroke="currentColor" strokeWidth="1.5"/>
        </svg>
      ),
    },
    {
      k: 'Conformidade',
      d: 'Aderência contínua às regulações globais e frameworks setoriais.',
      icon: (
        <svg viewBox="0 0 48 48" fill="none">
          <path d="M24 6L10 12v10c0 9 6 16 14 20 8-4 14-11 14-20V12L24 6z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
          <path d="M18 24l4 4 8-8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      k: 'Transparência',
      d: 'Dados auditáveis, verificáveis e prontos para escrutínio externo.',
      icon: (
        <svg viewBox="0 0 48 48" fill="none">
          <path d="M6 24c4-8 11-12 18-12s14 4 18 12c-4 8-11 12-18 12S10 32 6 24z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
          <circle cx="24" cy="24" r="4" stroke="currentColor" strokeWidth="1.5"/>
        </svg>
      ),
    },
    {
      k: 'Integração',
      d: 'Conexão entre todos os agentes da cadeia, sem silos operacionais.',
      icon: (
        <svg viewBox="0 0 48 48" fill="none">
          <rect x="6" y="6" width="12" height="12" stroke="currentColor" strokeWidth="1.5"/>
          <rect x="30" y="6" width="12" height="12" stroke="currentColor" strokeWidth="1.5"/>
          <rect x="18" y="30" width="12" height="12" stroke="currentColor" strokeWidth="1.5"/>
          <path d="M12 18v6h12v6M36 18v6H24" stroke="currentColor" strokeWidth="1.5"/>
        </svg>
      ),
    },
  ];

  return (
    <section className="section section--pilares" id="pilares">
      <div className="container">
        <div className="section__head">
          <h2 className="section__title">
            Quatro dimensões que sustentam<br />
            uma cadeia <span className="accent-word">confiável</span>.
          </h2>
        </div>
        <div className="pilares__grid">
          {pilares.map((p, i) => (
            <div className="pilar" key={p.k}>
              <div className="pilar__head">
                <div className="pilar__icon">{p.icon}</div>
                <div className="pilar__num">0{i + 1}</div>
              </div>
              <div className="pilar__title">{p.k}</div>
              <div className="pilar__desc">{p.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.SectionProblema = SectionProblema;
window.SectionPosicionamento = SectionPosicionamento;
window.SectionPilares = SectionPilares;