// sectors.jsx
// Slug mapping from the homepage chip names to the deep-dive pages on
// #setores-{slug}. Order matches the chips in i18n.jsx.
const SECTOR_SLUGS = [
  'industria',
  'agronegocio',
  'saude',
  'varejo',
  'servicos',
  'construcao',
  'tecnologia',
  'family-office'
];

const Sectors = () => {
  const { t, lang } = useLang();
  const s = t.sectors;
  return (
    <section className="sectors" id="sectors">
      <Reveal><div className="eyebrow">{s.eyebrow}</div></Reveal>
      <Reveal delay={1}><h2 className="section-title">{s.title}</h2></Reveal>
      <div className="sectors-grid">
        {s.items.map((it, i) => (
          <a key={i} className="sector sector-link" href={`#setores-${SECTOR_SLUGS[i]}`}>
            <div className="sector-glyph">{it.g}</div>
            <div>
              <div className="sector-name">{it.n}</div>
              <div className="sector-tag">{it.t}</div>
            </div>
          </a>
        ))}
      </div>
      <div className="sectors-cta-row">
        <a href="#setores" className="sectors-all-link">
          {lang === 'pt' ? 'Conhecer cada setor em profundidade' : 'Explore each sector in depth'}
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M4 12 L12 4 M6 4 L12 4 L12 10"/>
          </svg>
        </a>
      </div>
    </section>
  );
};

window.Sectors = Sectors;