function BaseCraft() {
  // Paver cross-section layers (top → down)
  const layers = [
    {h: 38, label: "Pavers", spec: "60mm concrete · ICPI-rated", color: "#D9D4C7", txt: "var(--ink-900)"},
    {h: 22, label: "Setting bed", spec: "1″ clean concrete sand", color: "#BFB49E", txt: "var(--ink-900)"},
    {h: 18, label: "Geotextile", spec: "Woven fabric · separates layers", color: "#4C5A66", txt: "var(--white)"},
    {h: 54, label: "Base aggregate", spec: "6″ minimum · 3/4″ crushed stone · 95% Proctor", color: "#7A8591", txt: "var(--white)"},
    {h: 44, label: "Subbase", spec: "Excavated + compacted subgrade", color: "#5A6069", txt: "var(--white)"},
  ];

  return (
    <section style={{background: "var(--white)", padding: "112px 32px", borderTop: "1px solid var(--n-200)"}}>
      <div style={{maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 72, alignItems: "center"}}>
        <div>
          <span className="eyebrow">How we build</span>
          <h2 style={{fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.0, marginTop: 14, textTransform: "uppercase"}}>
            Base done right.<br/>Pavers that stay flat.
          </h2>
          <p style={{fontSize: 17, lineHeight: 1.65, marginTop: 22, color: "var(--slate-600)", maxWidth: 520}}>
            Most patios fail not at the surface but at the base — undercompacted aggregate, wrong geotextile, sloppy edge restraint. We do it once, the way the manufacturer specifies, with a lifetime workmanship warranty.
          </p>

          <div style={{marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "20px 32px", maxWidth: 540}}>
            {[
              {k: "6\"", v: "Base aggregate depth on every patio install — twice the minimum most contractors quote."},
              {k: "95%", v: "Standard Proctor compaction verified with a plate compactor pass count, not eyeballed."},
              {k: "11-step", v: "Base prep checklist from excavation to edge restraint, run the same way every job."},
              {k: "Lifetime", v: "Workmanship warranty — if the base fails, we pull it and rebuild. No sunset clause."},
            ].map((s, i) => (
              <div key={i}>
                <div style={{fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 800, color: "var(--turf-700)", letterSpacing: "-0.02em", lineHeight: 1}}>{s.k}</div>
                <div style={{fontSize: 13, lineHeight: 1.55, color: "var(--slate-600)", marginTop: 8}}>{s.v}</div>
              </div>
            ))}
          </div>

          <div style={{marginTop: 36, padding: "14px 18px", border: "1px solid var(--n-200)", borderRadius: 4, display: "inline-flex", alignItems: "center", gap: 12, fontSize: 13}}>
            <Icon name="shieldCheck" size={18} color="var(--turf-700)" stroke={1.5}/>
            <span style={{color: "var(--slate-600)"}}>Built to <strong style={{color: "var(--ink-900)"}}>ICPI/CMHA specification</strong> — the manufacturer's installation standard.</span>
          </div>
        </div>

        {/* Cross-section diagram */}
        <div>
          <div style={{position: "relative", borderRadius: 6, overflow: "hidden", border: "1px solid var(--n-200)", background: "var(--n-50)", padding: "28px 28px 28px 28px"}}>
            <div style={{fontSize: 11, fontWeight: 700, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--slate-600)", marginBottom: 16}}>
              Paver cross-section · Technical spec
            </div>
            <div style={{display: "flex"}}>
              {/* Depth ruler on left */}
              <div style={{width: 42, flexShrink: 0, position: "relative", marginRight: 8}}>
                {(() => {
                  // compute cumulative heights
                  let acc = 0;
                  const marks = layers.map((l, i) => { const y = acc; acc += l.h; return {y, total: acc, i}; });
                  marks.push({y: acc, total: acc, i: "end"});
                  const totalH = acc;
                  const depthTicks = [0, 2, 4, 6, 10];
                  return (
                    <svg viewBox={`0 0 42 ${totalH}`} width="42" height={totalH + 40} style={{overflow: "visible"}}>
                      <line x1="38" y1="0" x2="38" y2={totalH} stroke="var(--slate-400)" strokeWidth="0.8"/>
                      {depthTicks.map((d, i) => {
                        // map 0" → totalH (top), 10" → 0 doesn't make sense; invert: tick 0 at top
                        // 10" depth covers full diagram height = totalH px. so y = d/10 * totalH
                        const y = (d / 10) * totalH;
                        return (
                          <g key={i}>
                            <line x1="34" y1={y} x2="40" y2={y} stroke="var(--slate-400)" strokeWidth="0.8"/>
                            <text x="30" y={y + 3} fontSize="9" fontFamily="var(--font-mono)" fill="var(--slate-500)" textAnchor="end">{d}"</text>
                          </g>
                        );
                      })}
                    </svg>
                  );
                })()}
              </div>
              {/* Stack */}
              <div style={{flex: 1, display: "flex", flexDirection: "column", borderRadius: 3, overflow: "hidden", border: "1px solid var(--n-300)"}}>
                {layers.map((l, i) => (
                  <div key={i} style={{
                    height: l.h * 2.4,
                    background: l.color,
                    color: l.txt,
                    padding: "0 16px",
                    display: "flex", alignItems: "center", justifyContent: "space-between",
                    borderTop: i > 0 ? "1px solid rgba(0,0,0,0.1)" : "none",
                    fontSize: 13,
                    overflow: "hidden",
                    gap: 10,
                  }}>
                    <span style={{fontWeight: 700, letterSpacing: "0.02em", whiteSpace: "nowrap"}}>{l.label}</span>
                    <span style={{fontSize: 11, opacity: 0.88, fontFamily: "var(--font-mono)", textAlign: "right", whiteSpace: "nowrap"}}>{l.spec}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{marginTop: 14, fontSize: 11, color: "var(--slate-500)", display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)"}}>
              <span>↑ Surface (grade)</span>
              <span>↓ Subgrade</span>
            </div>
          </div>
          <div style={{marginTop: 14, fontSize: 12, color: "var(--slate-500)", lineHeight: 1.6}}>
            Figure: Standard patio assembly, ICPI Tech Spec 2. Driveway installs add 2″ to base aggregate depth and upgrade to 80mm pavers.
          </div>
        </div>
      </div>
    </section>
  );
}
window.BaseCraft = BaseCraft;