const SectionProblema = ({ darkOverVideo = false }) => {
  const items = [
    { n: '01', t: 'Cadeias fragmentadas', d: 'Os dados são dispersos entre sistemas, fornecedores, plantas e parceiros sem uma camada comum de acesso e validação.' },
    { n: '02', t: 'Rastreabilidade frágil', d: 'As informações são inconsistentes, não-auditáveis e sem acesso em tempo real, dificultando a transparência.' },
    { n: '03', t: 'Pressão regulatória', d: 'Novas exigências globais (como EUDR, CSDDD, CSRD, CVM 193, CMN 5268, RTRS, RenovaBio) aceleram o ritmo de exigência de adaptação.' },
    { n: '04', t: 'Risco de exclusão', d: 'Empresas sem prova de conformidade perdem acesso a mercados estratégicos e correm risco de multas e banimento.' },
  ];

  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 = () => {
  const stages = [
    {
      k: 'Origem',
      d: 'Matéria-prima\ne fornecedores',
      icon: (
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M12 21V11M12 11c0-3 2-6 5-6-1 4-3 6-5 6zM12 11c0-3-2-6-5-6 1 4 3 6 5 6z" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      k: 'Processamento',
      d: 'Indústrias e etapas\nde transformação',
      icon: (
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M3 21V11l5 3V11l5 3V7l5 4v10H3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
          <path d="M7 21v-3M11 21v-3M16 21v-3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ),
    },
    {
      k: 'Logística',
      d: 'Transporte e\narmazenamento',
      icon: (
        <svg viewBox="0 0 24 24" fill="none">
          <rect x="2" y="8" width="11" height="9" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
          <path d="M13 11h5l3 3v3h-8v-6z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
          <circle cx="6.5" cy="18.5" r="1.5" stroke="currentColor" strokeWidth="1.4"/>
          <circle cx="16.5" cy="18.5" r="1.5" stroke="currentColor" strokeWidth="1.4"/>
        </svg>
      ),
    },
    {
      k: 'Mercado',
      d: 'Distribuidores,\nvarejo e clientes',
      icon: (
        <svg viewBox="0 0 24 24" fill="none">
          <circle cx="9" cy="8" r="3" stroke="currentColor" strokeWidth="1.4"/>
          <circle cx="17" cy="9" r="2.5" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M3 19c0-3 3-5 6-5s6 2 6 5M15 19c0-2 2-3.5 4-3.5s4 1.5 4 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ),
    },
  ];

  const features = [
    { k: 'Rastreabilidade\nde ponta a ponta', icon: (
      <svg viewBox="0 0 24 24" fill="none"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
    )},
    { k: 'Transparência\nem tempo real', icon: (
      <svg viewBox="0 0 24 24" fill="none"><path d="M2 12c2-4 5.5-6 10-6s8 2 10 6c-2 4-5.5 6-10 6S4 16 2 12z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/><circle cx="12" cy="12" r="2.5" stroke="currentColor" strokeWidth="1.4"/></svg>
    )},
    { k: 'Conformidade\ncontínua', icon: (
      <svg viewBox="0 0 24 24" fill="none"><rect x="5" y="3" width="14" height="18" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><path d="M9 9h6M9 13h6M9 17h4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
    )},
    { k: 'Integração\nsem barreiras', icon: (
      <svg viewBox="0 0 24 24" fill="none"><circle cx="6" cy="12" r="2" stroke="currentColor" strokeWidth="1.4"/><circle cx="18" cy="6" r="2" stroke="currentColor" strokeWidth="1.4"/><circle cx="18" cy="18" r="2" stroke="currentColor" strokeWidth="1.4"/><path d="M8 11l8-4M8 13l8 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
    )},
  ];

  return (
    <section className="section section--posicionamento" id="posicionamento">
      <div className="posic__bg" aria-hidden="true" />
      <div className="container">
        <div className="posic__grid">
          <div className="posic__left">
            <div className="posic__label">
              <span className="posic__label-led" />
              Veros — A solução
            </div>
            <h2 className="posic__title">
              A camada de{' '}<br />
              <span className="accent-word">confiança</span> das{' '}<br />
              cadeias{' '}<br />
              produtivas.
            </h2>
            <div className="posic__rule" />
            <p className="posic__lede">
              Conectamos dados, empresas e processos para tornar cadeias
              auditáveis, transparentes e preparadas para exigências globais.
            </p>
            <a href="#bridge" className="posic__more">
              <span className="posic__more-circle">
                <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>
              </span>
              Saiba como funciona nossa infraestrutura
            </a>
          </div>

          <div className="posic__right">
            <div className="posic__stages">
              {stages.map((s, i) => (
                <React.Fragment key={s.k}>
                  <div className="posic__stage">
                    <div className="posic__stage-icon">{s.icon}</div>
                    <div className="posic__stage-k">{s.k}</div>
                    <div className="posic__stage-d">{s.d}</div>
                  </div>
                  {i < stages.length - 1 && (
                    <div className="posic__chevron">
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                        <path d="M5 2l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </div>
                  )}
                </React.Fragment>
              ))}
            </div>

            <svg className="posic__connectors" viewBox="0 0 800 60" preserveAspectRatio="none" aria-hidden="true">
              <path d="M 100 0 Q 100 40 400 60" />
              <path d="M 300 0 Q 300 40 400 60" />
              <path d="M 500 0 Q 500 40 400 60" />
              <path d="M 700 0 Q 700 40 400 60" />
            </svg>

            <div className="posic__hub">
              <div className="posic__hub-shield">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <path d="M12 3l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
                  <path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                </svg>
              </div>
              <div className="posic__hub-content">
                <div className="posic__hub-brand">
                  <img src="assets/veros-logo-black.png" alt="Veros" className="posic__hub-logo posic__hub-logo--dark" />
                  <img src="assets/veros-logo-white.png" alt="Veros" className="posic__hub-logo posic__hub-logo--light" />
                </div>
                <div className="posic__hub-title">Camada de confiança</div>
                <div className="posic__hub-sub">Dados auditáveis · Governança · Inteligência</div>
              </div>
            </div>

            <svg className="posic__connectors-bottom" viewBox="0 0 800 60" preserveAspectRatio="none" aria-hidden="true">
              <path d="M 400 0 Q 400 30 100 60" />
              <path d="M 400 0 Q 400 30 300 60" />
              <path d="M 400 0 Q 400 30 500 60" />
              <path d="M 400 0 Q 400 30 700 60" />
            </svg>

            <div className="posic__features">
              {features.map((f) => (
                <div className="posic__feature" key={f.k}>
                  <div className="posic__feature-icon">{f.icon}</div>
                  <div className="posic__feature-k">{f.k}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const SectionPilares = () => {
  const pilares = [
    {
      n: '01',
      k: 'Rastreabilidade',
      d: 'Visibilidade ponta a ponta da origem ao destino, validada em cada elo da cadeia produtiva.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none">
          <circle cx="6" cy="12" r="2" stroke="currentColor" strokeWidth="1.4"/>
          <circle cx="18" cy="6" r="2" stroke="currentColor" strokeWidth="1.4"/>
          <circle cx="18" cy="18" r="2" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M8 11l8-4M8 13l8 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ),
    },
    {
      n: '02',
      k: 'Conformidade',
      d: 'Aderência contínua às regulações globais e frameworks setoriais, com atualização permanente.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M12 3l8 3v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
          <path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
    },
    {
      n: '03',
      k: 'Transparência',
      d: 'Dados auditáveis, verificáveis e prontos para validação externa e comunicação responsável.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none">
          <path d="M2 12c2-4 5.5-6 10-6s8 2 10 6c-2 4-5.5 6-10 6S4 16 2 12z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
          <circle cx="12" cy="12" r="2.5" stroke="currentColor" strokeWidth="1.4"/>
        </svg>
      ),
    },
    {
      n: '04',
      k: 'Integração',
      d: 'Conexão entre todos os agentes da cadeia, sem barreiras operacionais e com interoperabilidade real.',
      icon: (
        <svg viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="5" r="2" stroke="currentColor" strokeWidth="1.4"/>
          <circle cx="5" cy="18" r="2" stroke="currentColor" strokeWidth="1.4"/>
          <circle cx="19" cy="18" r="2" stroke="currentColor" strokeWidth="1.4"/>
          <path d="M12 7v3m0 0L7 16m5-6l5 6" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ),
    },
  ];

  const [hovered, setHovered] = React.useState(null);

  return (
    <section className="section section--pilares" id="pilares">
      <div className="pilares__bg" aria-hidden="true" />
      <div className="container">
        <div className="pilares__grid-2col">
          <div className="pilares__intro">
            <div className="pilares__label">
              <span className="pilares__label-led" />
              Nossos Pilares
            </div>
            <h2 className="pilares__title">
              Quatro dimensões{' '}<br />
              que sustentam{' '}<br />
              uma cadeia{' '}<br />
              <span className="accent-word">confiável</span>.
            </h2>
            <p className="pilares__lede">
              Tecnologia, dados e governança trabalhando juntos para garantir
              visibilidade, conformidade e decisões seguras em toda a cadeia.
            </p>
          </div>

          <div className={'pilares__cards' + (hovered != null ? ' is-hovering hovered-' + hovered : '')}>
            <svg className="pilares__connections" viewBox="0 0 600 600" preserveAspectRatio="none" aria-hidden="true">
              <defs>
                <radialGradient id="pilares-node-grad" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stopColor="#3BAF7A" stopOpacity="1"/>
                  <stop offset="100%" stopColor="#3BAF7A" stopOpacity="0"/>
                </radialGradient>
              </defs>
              {}
              <path className="pilares__line pilares__line--0" d="M 150 150 Q 300 150 300 300" />
              <path className="pilares__line pilares__line--1" d="M 450 150 Q 300 150 300 300" />
              <path className="pilares__line pilares__line--2" d="M 150 450 Q 300 450 300 300" />
              <path className="pilares__line pilares__line--3" d="M 450 450 Q 300 450 300 300" />
              <circle className="pilares__node-glow" cx="300" cy="300" r="32" fill="url(#pilares-node-grad)" />
              <circle className="pilares__node" cx="300" cy="300" r="6" />
              <circle className="pilares__node-ring" cx="300" cy="300" r="11" />
            </svg>

            {pilares.map((p, i) => (
              <div
                className={'pilar pilar--' + i}
                key={p.k}
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
              >
                <div className="pilar__top">
                  <div className="pilar__num">{p.n}</div>
                  <div className="pilar__icon">{p.icon}</div>
                </div>
                <div className="pilar__title">{p.k}</div>
                <div className="pilar__rule" />
                <div className="pilar__desc">{p.d}</div>
                <a href="contato/" className="pilar__more">
                  Saiba mais
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M1 6h10M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

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