// Activa Soluciones — Industries pills + featured callout

const industries = [
  'Retail & e-commerce', 'Banca & seguros', 'Industrial & B2B',
  'Salud & farma', 'Educación', 'Servicios profesionales',
  'Energía & utilities', 'Real estate', 'Tecnología',
  'Consumo masivo', 'Telco', 'Logística'
];

const Industries = () => {
  return (
    <section className="section" id="industrias">
      <div className="container ind-wrap">
        <Reveal from="left" className="ind-left-wrap">
          <div className="ind-left">
            <span className="s-eyebrow">Industrias</span>
            <h2 className="s-title">Donde hemos <span className="accent">movido la aguja</span>.</h2>
            <p className="s-lead">
              Cada industria tiene sus palancas. Nuestro equipo combina veteranos de operación con consultores
              estratégicos que conocen las economías de cada vertical.
            </p>
            <a className="btn primary">Ver industria detallada <span className="arr arrow-rise">→</span></a>
          </div>
        </Reveal>
        <Reveal from="right" delay={120} className="ind-right-wrap">
          <div className="ind-right">
            <ul className="ind-list">
              {industries.map((i, idx) => (
                <li key={i} className="ind-pill" style={{ transitionDelay: `${idx * 30}ms` }}>
                  <span className="ind-dot"></span>
                  {i}
                </li>
              ))}
            </ul>
          </div>
        </Reveal>
      </div>
      <style>{`
        .ind-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
        @media (max-width: 880px) { .ind-wrap { grid-template-columns: 1fr; } }
        .ind-list {
          list-style: none; padding: 0; margin: 0;
          display: flex; flex-wrap: wrap; gap: 10px;
        }
        .ind-pill {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 12px 18px;
          background: #fff; border: 1px solid var(--color-border);
          border-radius: 999px;
          font-family: var(--font-body); font-weight: 600; font-size: 14px;
          color: var(--color-fg-1);
          transition: all 220ms var(--ease-rise);
          cursor: pointer;
        }
        .ind-pill:hover {
          border-color: var(--color-accent);
          color: var(--color-accent);
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(243,156,18,0.16);
        }
        .ind-dot {
          width: 6px; height: 6px; border-radius: 999px;
          background: var(--color-accent);
          transition: transform 220ms var(--ease-rise);
        }
        .ind-pill:hover .ind-dot { transform: scale(1.6); }
      `}</style>
    </section>
  );
};