function ReportPreview() {
  return (
    <section id="report" className="report">
      <div className="container report-grid">
        <div className="report-copy">
          <div className="eyebrow"><span className="dot"></span>Sample report</div>
          <h2>Clear results. Plain-language interpretation. Actionable next steps.</h2>
          <p className="lead">
            Every Haven report opens with a single, honest answer — followed by the lab
            data and a recommendation you can act on.
          </p>
          <ul className="report-bullets">
            <li><IconCheck size={16} stroke={1.6}/><span>Result summary at the top</span></li>
            <li><IconCheck size={16} stroke={1.6}/><span>Lab values with detection thresholds</span></li>
            <li><IconCheck size={16} stroke={1.6}/><span>Recommendations from environmental scientists</span></li>
            <li><IconCheck size={16} stroke={1.6}/><span>Downloadable PDF for contractors or buyers</span></li>
          </ul>
        </div>

        <div className="report-preview">
          <ReportDoc/>
        </div>
      </div>
    </section>
  );
}

function ReportDoc() {
  return (
    <div className="doc">
      <div className="doc-chrome">
        <div className="doc-dots">
          <span></span><span></span><span></span>
        </div>
        <div className="doc-url">haven.health / reports / 0024-A · ASB</div>
      </div>
      <div className="doc-body">
        <div className="doc-head">
          <div>
            <div className="doc-eyebrow">REPORT N°&nbsp;0024-A</div>
            <div className="doc-title">Asbestos — Bulk material</div>
          </div>
          <div className="doc-pill doc-pill-ok">
            <span className="doc-pill-dot"></span>None detected
          </div>
        </div>

        <div className="doc-meta">
          <div><div className="k">Sample</div><div className="v">Floor tile, kitchen</div></div>
          <div><div className="k">Method</div><div className="v">PLM · EPA 600/R-93/116</div></div>
          <div><div className="k">Analyzed</div><div className="v">May 03, 2026</div></div>
          <div><div className="k">Lab</div><div className="v">AIH Laboratory</div></div>
        </div>

        <div className="doc-section">
          <div className="doc-section-title">Result summary</div>
          <p className="doc-p">
            No asbestos fibers detected in the submitted sample at the analytical
            sensitivity of the method. The material can be considered non-asbestos
            for the purposes of renovation planning.
          </p>
        </div>

        <div className="doc-section">
          <div className="doc-section-title">Constituents identified</div>
          <table className="doc-table">
            <thead>
              <tr><th>Constituent</th><th>Type</th><th className="right">Composition</th></tr>
            </thead>
            <tbody>
              <tr><td>Calcium carbonate</td><td>Filler</td><td className="right tnum">62%</td></tr>
              <tr><td>Cellulose</td><td>Fibrous</td><td className="right tnum">18%</td></tr>
              <tr><td>Vinyl binder</td><td>Resin</td><td className="right tnum">14%</td></tr>
              <tr><td>Mineral wool</td><td>Non-asbestos fibrous</td><td className="right tnum">6%</td></tr>
            </tbody>
          </table>
        </div>

        <div className="doc-section">
          <div className="doc-section-title">Detection</div>
          <div className="doc-bars">
            <ReportBar label="Chrysotile"   value={0}    threshold={0.25}/>
            <ReportBar label="Amosite"      value={0}    threshold={0.25}/>
            <ReportBar label="Crocidolite"  value={0}    threshold={0.25}/>
            <ReportBar label="Tremolite"    value={0}    threshold={0.25}/>
          </div>
        </div>

        <div className="doc-foot">
          <span>Analysis performed by AIH Laboratory.</span>
          <span>Page 1 of 4</span>
        </div>
      </div>
    </div>
  );
}

function ReportBar({ label, value, threshold }) {
  const pct = Math.min(100, (value / Math.max(threshold * 4, 1)) * 100);
  return (
    <div className="docbar">
      <div className="docbar-label">{label}</div>
      <div className="docbar-track">
        <div className="docbar-thresh" style={{ left: `${(threshold / Math.max(threshold * 4, 1)) * 100}%` }}></div>
        <div className="docbar-fill" style={{ width: `${pct}%` }}></div>
      </div>
      <div className="docbar-val tnum">{value === 0 ? "ND" : value + "%"}</div>
    </div>
  );
}

window.ReportPreview = ReportPreview;