function WhatWeTest() {
  const tests = [
    {
      key: "asbestos", icon: IconAsbestos,
      symbol: "Asb",
      cas: "CAS · 1332-21-4",
      title: "Asbestos",
      body: "Detect asbestos-containing materials before renovation or demolition.",
      details: ["Bulk material analysis", "PLM by EPA 600/R-93/116", "Common in homes built before 1980"],
    },
    {
      key: "lead", icon: IconLead,
      symbol: "Pb",
      cas: "CAS · 7439-92-1",
      title: "Lead",
      body: "Identify lead hazards in paint, dust, or surfaces around the home.",
      details: ["Paint chip & dust wipe", "AAS / ICP analysis", "EPA RRP-aligned methodology"],
    },
    {
      key: "mold", icon: IconMold,
      symbol: "Md",
      cas: "Spore trace",
      title: "Mold",
      body: "Understand mold exposure risks and indoor air-quality concerns.",
      details: ["Surface tape lift", "Direct microscopy ID", "Genus-level identification"],
    },
  ];
  return (
    <section id="tests" className="tests">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>What we test for</div>
          <h2>Three of the most common — and most asked about — environmental hazards.</h2>
          <p className="lead">Each kit is calibrated to one panel. Choose the test that fits your concern.</p>
        </div>

        <div className="tests-grid">
          {tests.map((t) => (
            <article key={t.key} className={"card test-card test-" + t.key}>
              <header className="test-head">
                <div className="test-symbol">
                  <span className="test-symbol-mark">{t.symbol}</span>
                  <span className="test-symbol-cas">{t.cas}</span>
                </div>
                <span className="test-icon"><t.icon size={28} stroke={1.3}/></span>
              </header>
              <div className="test-rule"></div>
              <div className="test-body">
                <h3>{t.title}</h3>
                <p className="muted">{t.body}</p>
              </div>
              <ul className="test-details">
                {t.details.map((d, i) => (
                  <li key={i}>
                    <IconCheck size={14} stroke={1.8}/>
                    <span>{d}</span>
                  </li>
                ))}
              </ul>
              <footer className="test-foot">
                <a className="btn-link" href="#order">Order {t.title.toLowerCase()} kit</a>
                <span className="test-price">$89</span>
              </footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhatWeTest = WhatWeTest;