// Equipment — horizontal scroll rail of real instruments referenced in the source.
function Equipment({ t }) {
  const items = [
    { code:"GIL-200", name:"Gilian Air Sampler", tests:["CEM","CHRA"], param:"Personal sampling pump · 0.02–4 L/min" },
    { code:"SVK-104A", name:"Svantek 104A", tests:["Noise","BNM"], param:"Class 1 sound level meter · 22–140 dB" },
    { code:"QST-401", name:"Quest 401", tests:["Noise","Audiometric"], param:"Type 2 SLM · personal noise dosimeter" },
    { code:"SPT-730", name:"Spartan 730", tests:["IAQ","Asbestos"], param:"Particulate fibre counter · phase contrast" },
    { code:"TSI-AVM", name:"TSI Hot-Wire Anemometer", tests:["LEV","IAQ"], param:"Face velocity · 0–50 m/s" },
    { code:"HIO-LUX", name:"HIOKI Lux Hi-Tester", tests:["Lighting"], param:"Illuminance · 0.01–999,900 lx" },
    { code:"EXT-WBGT", name:"Extech WBGT", tests:["Heat Stress"], param:"Wet Bulb Globe Temp · ACGIH" },
    { code:"MS-2G", name:"Mini Seis MS-2G", tests:["Vibration"], param:"Tri-axial seismograph · ppv" },
    { code:"LSD-HVS", name:"High Volume Sampler", tests:["Ambient Air"], param:"PM10/PM2.5 · 1.13 m³/min" },
  ];
  return (
    <section id="equipment" className="equip section">
      <div className="wrap">
        <header className="sec-head">
          <div>
            <div className="eyebrow"><span className="dot"></span><span>INSTRUMENTATION</span></div>
            <h2 className="h-xl">Calibrated kit.<br/>Traceable data.</h2>
          </div>
          <p className="lead sec-head-lead">Every reading on every report can be traced back to a serial-numbered instrument, calibration certificate and signed-off field log. The same kit our regulators trained on.</p>
        </header>
      </div>

      <div className="equip-rail-wrap">
        <div className="equip-rail">
          {items.map((it, i) => (
            <div className="equip-card" key={it.code} style={{['--i']:i}}>
              <div className="equip-card-head">
                <span className="mono code">{it.code}</span>
                <div className="equip-tags">
                  {it.tests.map(t => <span key={t}>{t}</span>)}
                </div>
              </div>
              <div className="equip-visual">
                <EquipPlaceholder kind={it.code} />
              </div>
              <div className="equip-foot">
                <h3>{it.name}</h3>
                <div className="mono micro">{it.param}</div>
              </div>
            </div>
          ))}
          <div className="equip-card equip-card-end">
            <div className="end-stack">
              <span className="mono micro">+ many more</span>
              <h3>Full fleet on request</h3>
              <p>Ask for the complete instrument list — calibration certificates and proficiency records available.</p>
              <a href="#contact" className="btn btn-ghost">Request fleet list →</a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .equip{padding-bottom:120px}
        .equip-rail-wrap{margin-top:48px;padding:0 32px}
        .equip-rail{display:flex;gap:18px;overflow-x:auto;padding:8px 4px 28px;scroll-snap-type:x mandatory;
          -webkit-overflow-scrolling:touch}
        .equip-rail::-webkit-scrollbar{height:6px}
        .equip-rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
        .equip-card{
          flex:0 0 320px;scroll-snap-align:start;
          background:var(--bg-elev);border:1px solid var(--line);border-radius:22px;padding:20px;
          display:flex;flex-direction:column;gap:14px;
          box-shadow:var(--shadow-1);
          transition: transform .35s ease, border-color .25s;
          animation: equip-in .6s ease both;
          animation-delay: calc(var(--i,0)*.06s);
        }
        @keyframes equip-in{ from{ opacity:0; transform: translateY(16px) } to{ opacity:1; transform:none } }
        .equip-card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
        .equip-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
        .code{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);padding:4px 8px;border:1px dashed var(--line-strong);border-radius:6px}
        .equip-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
        .equip-tags span{font-family:var(--font-mono);font-size:10px;padding:3px 7px;border-radius:999px;background:color-mix(in oklab,var(--cyan) 12%,transparent);color:var(--ink-soft)}
        .equip-visual{height:170px;border-radius:16px;background:
          repeating-linear-gradient(135deg, color-mix(in oklab,var(--ink) 4%,var(--bg)) 0 12px, transparent 12px 24px),
          var(--bg);
          border:1px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
        .equip-foot h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
        .equip-foot .micro{margin-top:4px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}

        .equip-card-end{justify-content:center;align-items:center;text-align:center;
          background:linear-gradient(135deg, color-mix(in oklab,var(--ink) 90%,transparent), #0ea5e9);
          color:#fff;border-color:transparent}
        .equip-card-end .end-stack{display:flex;flex-direction:column;gap:10px;align-items:center;padding:24px}
        .equip-card-end h3{font-size:22px;font-weight:600}
        .equip-card-end p{font-size:13.5px;opacity:.85;text-wrap:pretty;max-width:24ch}
        .equip-card-end .micro{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
        .equip-card-end .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
        .equip-card-end .btn-ghost:hover{background:rgba(255,255,255,.1)}

        @media (max-width: 640px){
          .equip-rail-wrap{padding:0 20px}
          .equip-card{flex-basis:280px}
        }
      `}</style>
    </section>
  );
}

// Placeholder visuals per instrument — distinct, abstract
function EquipPlaceholder({ kind }) {
  // Different SVG silhouettes per kind so cards feel distinct
  if (kind === "GIL-200" || kind === "LSD-HVS") return (
    <svg width="100" height="120" viewBox="0 0 100 120">
      <rect x="34" y="8" width="32" height="84" rx="8" fill="none" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5"/>
      <circle cx="50" cy="44" r="10" fill="var(--cyan)" fillOpacity=".4"/>
      <rect x="40" y="60" width="20" height="6" rx="2" fill="var(--ink)" fillOpacity=".18"/>
      <path d="M 50 92 L 50 110 M 30 110 L 70 110" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
  if (kind === "SVK-104A" || kind === "QST-401") return (
    <svg width="110" height="120" viewBox="0 0 110 120">
      <rect x="28" y="14" width="54" height="92" rx="8" fill="none" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5"/>
      <rect x="36" y="22" width="38" height="22" rx="3" fill="var(--ink)" fillOpacity=".75"/>
      <text x="55" y="38" fontFamily="JetBrains Mono" fontSize="11" fontWeight="600" fill="#a3e635" textAnchor="middle">87.2</text>
      <circle cx="55" cy="68" r="10" fill="none" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5"/>
      <circle cx="55" cy="68" r="3" fill="var(--cyan)"/>
      <rect x="40" y="86" width="30" height="12" rx="2" fill="var(--ink)" fillOpacity=".12"/>
    </svg>
  );
  if (kind === "SPT-730") return (
    <svg width="110" height="120" viewBox="0 0 110 120">
      <rect x="20" y="20" width="70" height="80" rx="8" fill="none" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5"/>
      <circle cx="55" cy="55" r="18" fill="none" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5"/>
      <circle cx="55" cy="55" r="6" fill="var(--cyan)" fillOpacity=".6"/>
      <path d="M 30 90 L 80 90" stroke="var(--ink)" strokeOpacity=".25" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
  if (kind === "TSI-AVM" || kind === "HIO-LUX" || kind === "EXT-WBGT") return (
    <svg width="120" height="120" viewBox="0 0 120 120">
      <rect x="30" y="18" width="60" height="64" rx="6" fill="none" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5"/>
      <rect x="38" y="26" width="44" height="20" rx="2" fill="var(--ink)" fillOpacity=".82"/>
      <text x="60" y="41" fontFamily="JetBrains Mono" fontSize="11" fontWeight="600" fill="#22d3ee" textAnchor="middle">2.85</text>
      <path d="M 60 82 L 60 110 M 50 110 L 70 110" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5" strokeLinecap="round"/>
      <circle cx="60" cy="110" r="2" fill="var(--ink)" fillOpacity=".35"/>
    </svg>
  );
  if (kind === "MS-2G") return (
    <svg width="120" height="120" viewBox="0 0 120 120">
      <rect x="20" y="40" width="80" height="50" rx="6" fill="none" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5"/>
      <path d="M 24 65 L 36 65 L 42 50 L 50 80 L 58 55 L 66 75 L 72 60 L 96 60" stroke="var(--cyan)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
  return (
    <svg width="100" height="100" viewBox="0 0 100 100">
      <rect x="20" y="20" width="60" height="60" rx="8" fill="none" stroke="var(--ink)" strokeOpacity=".35" strokeWidth="1.5"/>
      <circle cx="50" cy="50" r="14" fill="var(--cyan)" fillOpacity=".5"/>
    </svg>
  );
}

window.Equipment = Equipment;