const SectionImpacto = () => {
  const blocks = [
    {
      k: 'Risco regulatório',
      t: 'Acesso contínuo a mercados regulados',
      d: 'Cadeias validadas em tempo real reduzem exposição a sanções e exclusões.',
      metric: '100%', metricLabel: 'dos requisitos regulatórios cobertos',
    },
    {
      k: 'Eficiência operacional',
      t: 'Redução de processos manuais e planilhas',
      d: 'Substituição de planilhas e auditorias pontuais por fluxos automatizados.',
      metric: '60h', metricLabel: 'de trabalho reduzidas por lote',
    },
    {
      k: 'Retorno rápido',
      t: 'ROI em menos de 60 dias após implementação',
      d: 'Reduza até R$720 mil/ano em processos manuais com automatização ponta a ponta.',
      metric: 'R$720mil', metricLabel: 'de economia anual após setup',
    },
    {
      k: 'Sustentabilidade',
      t: 'Decisões baseadas em dados reais da operação',
      d: 'ESG deixa de ser narrativa e passa a ser evidência operacional verificada.',
      metric: '100%', metricLabel: 'dos lotes com origem rastreada',
    },
  ];

  return (
    <section className="section section--impacto" id="impacto">
      <div className="container">
        <div className="section__head">
          <div className="section__label">
            Metodologia Veros
          </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 StatIcon = ({ name }) => {
  const props = { width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'leaf':
      return (
        <svg {...props}>
          <path d="M12 21V11" />
          <path d="M12 11c0-4 3-7 8-7-1 6-4 8-8 7z" />
          <path d="M12 14c0-3-2-5-6-5 1 4 3 5 6 5z" />
        </svg>
      );
    case 'globe':
      return (
        <svg {...props}>
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12h18" />
          <path d="M12 3c2.5 2.5 4 5.5 4 9s-1.5 6.5-4 9c-2.5-2.5-4-5.5-4-9s1.5-6.5 4-9z" />
        </svg>
      );
    case 'box':
      return (
        <svg {...props}>
          <path d="M3 7l9-4 9 4-9 4-9-4z" />
          <path d="M3 7v10l9 4 9-4V7" />
          <path d="M12 11v10" />
        </svg>
      );
    case 'pin':
      return (
        <svg {...props}>
          <path d="M12 21s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z" />
          <circle cx="12" cy="9" r="2.5" />
        </svg>
      );
    default:
      return null;
  }
};

const SectorIcon = ({ name }) => {
  const props = { width: 28, height: 28, viewBox: '0 0 32 32', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'Café & Cacau':
      return (
        <svg {...props}>
          <path d="M11 5c-1 1.5-1 3 .5 4.5" />
          <path d="M14 4c-1 1.5-1 3 .5 4.5" />
          <path d="M9 12c-2 0-3 1.5-3 4 0 5 4 11 10 11s10-6 10-11c0-2.5-1-4-3-4H9z" />
        </svg>
      );
    case 'Grãos & Commodities':
      return (
        <svg {...props}>
          <path d="M16 4v24" />
          <path d="M16 9c-3-1-5-3-5-5 3 0 5 2 5 5z" />
          <path d="M16 9c3-1 5-3 5-5-3 0-5 2-5 5z" />
          <path d="M16 15c-3-1-5-3-5-5 3 0 5 2 5 5z" />
          <path d="M16 15c3-1 5-3 5-5-3 0-5 2-5 5z" />
          <path d="M16 21c-3-1-5-3-5-5 3 0 5 2 5 5z" />
          <path d="M16 21c3-1 5-3 5-5-3 0-5 2-5 5z" />
        </svg>
      );
    case 'Carnes & Proteínas':
      return (
        <svg {...props}>
          <path d="M22 7c3 3 3 8 0 11l-7 7c-3 3-8 3-11 0 0-3 1-5 3-7 1 1 3 1 4-1s1-3 0-4c2-2 4-3 7-3 1 0 3 0 4-3z" />
          <circle cx="22" cy="9" r="1.2" fill="currentColor" stroke="none" />
        </svg>
      );
    case 'Madeira & Florestal':
      return (
        <svg {...props}>
          <path d="M16 5l-5 7h3l-5 7h4l-4 5h14l-4-5h4l-5-7h3z" />
          <path d="M16 24v4" />
        </svg>
      );
    case 'Têxtil & Algodão':
      return (
        <svg {...props}>
          <circle cx="16" cy="16" r="5" />
          <circle cx="9" cy="11" r="4" />
          <circle cx="23" cy="11" r="4" />
          <circle cx="10" cy="20" r="4" />
          <circle cx="22" cy="20" r="4" />
        </svg>
      );
    default:
      return null;
  }
};

const SectionProof = () => {
  const logos = [
    { src: 'assets/clientes/ldc.png', alt: 'Louis Dreyfus Company' },
    { src: 'assets/clientes/cacique.png', alt: 'Cacique' },
    { src: 'assets/clientes/cocam.png', alt: 'Cocam' },
    { src: 'assets/clientes/igc.png', alt: 'IGC' },
    { 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/ipanema.png', alt: 'Ipanema Coffees' },
  ];
  const sectors = ['Café & Cacau', 'Grãos & Commodities', 'Carnes & Proteínas', 'Madeira & Florestal', 'Têxtil & Algodão'];

  return (
    <>
    <section className="section section--proof" id="clientes">
      <div className="container">
        <div className="proof__hero">
          <div className="proof__hero-text">
            <div className="section__label section__label--simple">
              Parceiros & Setores
            </div>
            <h2 className="section__title">
              Já está <span className="accent-word">acontecendo</span>.
            </h2>
            <p className="section__subtitle">
              Empresas líderes e setores estratégicos que já confiam na Veros para transformar cadeias produtivas em vantagens reais.
            </p>
          </div>

          <div className="proof__stats" aria-hidden="false">
            {[
              { icon: 'leaf',  value: '+1 milhão',  label: 'de hectares monitorados com\nprotocolos socioambientais' },
              { icon: 'globe', value: '+60%',       label: 'de toda exportação de café\nsolúvel do Brasil passa pela\nnossa plataforma' },
              { icon: 'box',   value: '+50 mil',    label: 'lotes de produtos e origens\nsão cadastrados e rastreados\nanualmente' },
              { icon: 'pin',   value: '+70 países', label: 'recebem produtos totalmente\nrastreados pelas nossas\nsoluções' },
            ].map((s) => (
              <div className="proof__stat" key={s.value}>
                <div className="proof__stat-icon" aria-hidden="true">
                  <StatIcon name={s.icon} />
                </div>
                <div className="proof__stat-body">
                  <div className="proof__stat-value">{s.value}</div>
                  <div className="proof__stat-label">{s.label}</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="proof__logos-wrap">
          <div className="proof__logos-label">EMPRESAS QUE CONFIAM NA VEROS</div>
          <div className="proof__logos">
            {logos.map((l) => (
              <div className="proof__logo" key={l.alt}>
                <img src={l.src} alt={l.alt} />
              </div>
            ))}
          </div>
        </div>

        <div className="proof__sectors">
          <div className="proof__sectors-hero">
            <div className="proof__sectors-icon" aria-hidden="true">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21V10" /><path d="M12 10c0-4 3-7 7-7-1 5-3 7-7 7z" /><path d="M12 13c0-3-2-5-5-5 1 4 2 5 5 5z" /></svg>
            </div>
            <div className="proof__sectors-copy">
              <div className="proof__sectors-label">SETORES ATENDIDOS</div>
              <div className="proof__sectors-headline">
                Atuamos onde a <span className="accent-word">confiança</span>{' '}<br />
                movimenta o <span className="accent-word">mundo</span>.
              </div>
            </div>
          </div>
          <div className="proof__sectors-list">
            {sectors.map((s, i) => (
              <React.Fragment key={s}>
                <span className="proof__sector">
                  <SectorIcon name={s} />
                  <span className="proof__sector-name">{s}</span>
                </span>
                {i < sectors.length - 1 && <span className="proof__sector-sep" aria-hidden="true" />}
              </React.Fragment>
            ))}
          </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">Exportador Café Solúvel</div>
            <h3 className="proof__case-title">
              De 23 dias de auditoria <span className="accent-word">{' '}<br />para 2 dias</span>.
            </h3>
            <p className="proof__case-body">
              Indústria cafeeira com operação global centralizou e padronizou os
              dados de toda sua cadeia produtiva no ecossistema Veros. Com
              visibilidade ponta a ponta de fornecedores, processos e evidências,
              o tempo de auditoria caiu de 23 para 2 dias, uma redução de 91%
              sem custo adicional de headcount.
            </p>
            <div className="proof__case-stats">
              <div className="proof__case-stat">
                <div className="proof__case-stat-v">+800</div>
                <div className="proof__case-stat-l">fornecedores diretos</div>
              </div>
              <div className="proof__case-stat">
                <div className="proof__case-stat-v">4 meses</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" />
                +1000 lotes validados diariamente
              </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="contato/" className="btn btn--primary btn--lg" style={{ backgroundColor: "rgb(47, 179, 128)", borderColor: "rgb(47, 179, 128)" }}>
              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="contato/" 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="politica-de-privacidade/">Privacidade</a>
            <a href="termos-de-uso/">Termos</a>
          </div>
        </div>
      </div>
    </footer>
  );
};

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