// Sections 7-10 + Footer

const SectionImpacto = () => {
  const blocks = [
    {
      k: 'Risco regulatório',
      t: 'Acesso contínuo a mercados',
      d: 'Cadeias validadas em tempo real reduzem exposição a sanções e exclusões.',
      metric: '-62%', metricLabel: 'incidentes regulatórios',
    },
    {
      k: 'Eficiência operacional',
      t: 'Menos processos manuais',
      d: 'Substituição de planilhas e auditorias pontuais por fluxo automatizado.',
      metric: '-41h', metricLabel: 'por lote auditado',
    },
    {
      k: 'Transparência',
      t: 'Confiança entre empresas',
      d: 'Dados auditáveis reforçam relações com parceiros, clientes e reguladores.',
      metric: '2.3×', metricLabel: 'taxa de recontratação',
    },
    {
      k: 'Sustentabilidade',
      t: 'Decisões baseadas em dados reais',
      d: 'ESG deixa de ser narrativa e passa a ser evidência operacional verificada.',
      metric: '100%', metricLabel: 'lotes com origem rastreada',
    },
  ];

  return (
    <section className="section section--impacto" id="impacto">
      <div className="container">
        <div className="section__head">
          <div className="section__label">
            <span className="section__label-num">07</span>
            Impacto
          </div>
          <h2 className="section__title">
            Impacto real nas cadeias <span className="accent-word">produtivas</span>.
          </h2>
        </div>
        <div className="impacto__grid">
          {blocks.map((b) => (
            <div className="impacto__card" key={b.k}>
              <div className="impacto__card-k">{b.k}</div>
              <div className="impacto__card-t">{b.t}</div>
              <div className="impacto__card-d">{b.d}</div>
              <div className="impacto__card-metric">
                <span className="impacto__card-metric-v">{b.metric}</span>
                <span className="impacto__card-metric-l">{b.metricLabel}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const SectionProof = () => {
  const logos = [
    { src: 'assets/clientes/ldc.png', alt: 'Louis Dreyfus Company' },
    { src: 'assets/clientes/cacique.png', alt: 'Cacique' },
    { src: 'assets/clientes/ipanema.png', alt: 'Ipanema Coffees' },
    { src: 'assets/clientes/casa-valduga.png', alt: 'Casa Valduga' },
    { src: 'assets/clientes/vallebranco.png', alt: 'Alimentos Valle Branco' },
    { src: 'assets/clientes/brasfruit.png', alt: 'Brasfruit' },
    { src: 'assets/clientes/igc.png', alt: 'IGC' },
  ];
  const sectors = ['Carnes & Proteínas', 'Grãos & Commodities', 'Madeira & Florestal', 'Café & Cacau', 'Têxtil & Algodão'];

  return (
    <>
    <section className="section section--proof" id="clientes">
      <div className="container">
        <div className="section__head">
          <div className="section__label">
            Clientes & Setores
          </div>
          <h2 className="section__title">
            Já está <span className="accent-word">acontecendo</span>.
          </h2>
        </div>

        <div className="proof__logos">
          {logos.map((l) => (
            <div className="proof__logo" key={l.alt}>
              <img src={l.src} alt={l.alt} />
            </div>
          ))}
          <a href="#contato" className="proof__logo proof__logo--cta">
            <span className="proof__logo-plus">+</span>
            <span className="proof__logo-cta-text">Sua empresa</span>
          </a>
        </div>

        <div className="proof__sectors">
          <div className="proof__sectors-label">SETORES ATENDIDOS</div>
          <div className="proof__sectors-list">
            {sectors.map((s, i) => (
              <span key={s} className="proof__sector">
                {s}
                {i < sectors.length - 1 && <span className="proof__sector-sep">·</span>}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>

    <section className="section section--case" id="case">
      <div className="container">
        <div className="proof__case">
          <div className="proof__case-left">
            <div className="proof__case-chip">CASE EM DESTAQUE · AGRONEGÓCIO</div>
            <div className="proof__case-company">Grupo Pampa · Carne Bovina</div>
            <h3 className="proof__case-title">
              De 14 meses de auditoria manual para <span className="accent-word">conformidade contínua em 6 semanas</span>.
            </h3>
            <p className="proof__case-body">
              Frigorífico com operação em três estados integrou 412 fornecedores
              de pecuária ao ecossistema Veros. A cadeia passou a operar com
              validação automatizada de origem, adequação ao EUDR e evidência
              auditável ponta a ponta — sem custo adicional de headcount.
            </p>
            <div className="proof__case-stats">
              <div className="proof__case-stat">
                <div className="proof__case-stat-v">412</div>
                <div className="proof__case-stat-l">fornecedores integrados</div>
              </div>
              <div className="proof__case-stat">
                <div className="proof__case-stat-v">6 sem.</div>
                <div className="proof__case-stat-l">implementação total</div>
              </div>
              <div className="proof__case-stat">
                <div className="proof__case-stat-v">100%</div>
                <div className="proof__case-stat-l">cadeia rastreada</div>
              </div>
            </div>
            <a href="#" className="btn btn--link">Ler o case completo →</a>
          </div>
          <div className="proof__case-right">
            <div className="proof__case-viz">
              <div className="proof__case-viz-label">
                <span>ORIGEM</span><span>DESTINO</span>
              </div>
              <div className="proof__case-viz-flow">
                {Array.from({ length: 5 }).map((_, col) => (
                  <div className="proof__case-col" key={col}>
                    {Array.from({ length: 4 - Math.min(col, 3) }).map((_, row) => (
                      <div
                        key={row}
                        className={`proof__case-node ${col === 4 ? 'proof__case-node--end' : ''}`}
                      />
                    ))}
                  </div>
                ))}
              </div>
              <div className="proof__case-viz-footer">
                <span className="proof__case-viz-led" />
                412 nós · validados em tempo real
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    </>
  );
};

const SectionVisao = () => {
  return (
    <section className="section section--visao" id="visao">
      <div className="container">
        <div className="visao__content">
          <h2 className="visao__title">
            O futuro será <span className="accent-word">sustentável</span><br />
            ou não existirá.
          </h2>
          <p className="visao__body">
            A Veros construiu a infraestrutura que impulsiona a sustentabilidade
            do agronegócio, conectando empresas, reguladores e mercados em um
            mesmo padrão de verdade operacional.
          </p>
        </div>
      </div>
    </section>
  );
};

const SectionCTA = () => {
  return (
    <section className="section section--cta section--dark" id="contato">
      <div className="container">
        <div className="cta__content">
          <div className="cta__eyebrow">
            <span className="cta__eyebrow-led" />
            Próximo passo
          </div>
          <h2 className="cta__title">
            Construa uma <span className="accent-word">cadeia produtiva</span> preparada para o futuro.
          </h2>
          <p className="cta__body">
            Falamos com lideranças de indústria, agronegócio e cadeias globais
            que precisam transformar conformidade em vantagem estratégica.
          </p>
          <div className="cta__actions">
            <a href="#" className="btn btn--primary btn--lg">
              Falar com especialista
              <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 btn--lg">
              Agendar demonstração
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  const cols = [
    { t: 'Soluções', l: ['Rastreabilidade', 'Conformidade', 'Transparência', 'Integração'] },
    { t: 'Empresa', l: ['Sobre a Veros', 'Propósito', 'Time', 'Carreiras'] },
    { t: 'Tecnologia', l: ['Traceply', 'Documentação', 'Segurança', 'Integrações'] },
    { t: 'Recursos', l: ['Casos', 'Biblioteca regulatória', 'Blog', 'Imprensa'] },
  ];

  return (
    <footer className="footer section--dark">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            <img src="assets/veros-logo-white.png" alt="Veros" className="footer__logo" />
            <p className="footer__tag">
              A camada de confiança<br />
              das cadeias produtivas globais.
            </p>
          </div>
          <div className="footer__cols">
            {cols.map((c) => (
              <div className="footer__col" key={c.t}>
                <div className="footer__col-title">{c.t}</div>
                {c.l.map((i) => (
                  <a key={i} href="#" className="footer__link">{i}</a>
                ))}
              </div>
            ))}
          </div>
        </div>
        <div className="footer__bot">
          <div className="footer__copy">© 2026 Veros · Todos os direitos reservados.</div>
          <div className="footer__legal">
            <a href="#">Privacidade</a>
            <a href="#">Termos</a>
            <a href="#">Compliance</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.SectionImpacto = SectionImpacto;
window.SectionProof = SectionProof;
window.SectionVisao = SectionVisao;
window.SectionCTA = SectionCTA;
window.Footer = Footer;