// Industries — interactive pill cloud
function Industries({ t }) {
  const items = [
    { name:"Manufacturing", size:1.4 },
    { name:"Oil & Gas",     size:1.5 },
    { name:"Construction",  size:1.1 },
    { name:"Plantation",    size:1.2 },
    { name:"F&B",           size:.95 },
    { name:"Chemicals",     size:1.3 },
    { name:"Healthcare",    size:1.0 },
    { name:"Logistics",     size:.9 },
    { name:"Semiconductor", size:1.25 },
    { name:"Pharmaceutical",size:1.05 },
    { name:"Waste & Recycling", size:.92 },
    { name:"Power & Utilities", size:1.18 },
    { name:"Education",     size:.85 },
    { name:"Hospitality",   size:.9 },
    { name:"Aviation",      size:.95 },
    { name:"Marine & Ports",size:1.0 },
  ];
  return (
    <section id="industries" className="ind section">
      <div className="wrap">
        <header className="sec-head">
          <div>
            <div className="eyebrow"><span className="dot"></span><span>INDUSTRIES</span></div>
            <h2 className="h-xl">Trusted by 500+ operators across heavy and light industry.</h2>
          </div>
          <p className="lead sec-head-lead">A reading is a reading. The regulatory frame doesn&rsquo;t change with the smokestack — but the strategy does. We&rsquo;ve built playbooks for every sector below.</p>
        </header>

        <div className="ind-cloud">
          {items.map((x, i) => (
            <span className="ind-pill" key={x.name} style={{
              ['--s']: x.size,
              ['--d']: (i * 0.04) + 's',
            }}>{x.name}</span>
          ))}
        </div>

        <div className="ind-note mono">~ We serve because we care ~</div>
      </div>

      <style>{`
        .ind{padding-top:40px}
        .ind-cloud{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:24px 0}
        .ind-pill{
          font-size: calc(15px * var(--s,1));
          font-weight:500;
          padding: calc(8px * var(--s,1)) calc(18px * var(--s,1));
          border:1px solid var(--line-strong);border-radius:999px;
          background:var(--bg-elev);
          transition: transform .4s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s, box-shadow .25s;
          animation: pill-in .6s ease both;
          animation-delay: var(--d,0s);
          cursor: default;
        }
        @keyframes pill-in{ from{ opacity:0; transform: translateY(10px) scale(.92) } to{ opacity:1; transform:none } }
        .ind-pill:hover{
          background:var(--ink); color:var(--bg);
          border-color:transparent;
          transform: translateY(-2px) scale(1.04);
          box-shadow: 0 14px 30px -16px rgba(11,30,63,.6);
        }
        .ind-pill:nth-child(3n):hover{ background: var(--sky); color:#fff }
        .ind-pill:nth-child(5n):hover{ background: var(--cyan); color: var(--ink) }
        .ind-pill:nth-child(7n):hover{ background: var(--lime); color: var(--ink) }
        .ind-note{text-align:center;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-top:48px}
      `}</style>
    </section>
  );
}
window.Industries = Industries;