// HowItWorks.jsx — three pillars
const PlumbHowItWorks = () => {
  return (
    <section id="how" className="section how reveal-fx" data-screen-label="how-it-works">
      <div className="section-corner">
        <span>02 · how it works</span>
        <span>three pillars</span>
      </div>
      <div className="page">
        <p className="eyebrow">02 · how it works</p>
        <h2 className="section-h" style={{ maxWidth: '22ch' }}>
          Three things, done well. Nothing else.
        </h2>
        <p className="lead" style={{ marginTop: 24 }}>
          Plumb is not a CAD tool. Not a quoting marketplace.
          Not a PLM. It is the eight-second feedback loop that lives between them.
        </p>

        <div className="pillars stagger">
          <Pillar
            num="01"
            title="Cost and lead time"
            wedge="the wedge"
            body="Live cost-per-unit and lead-time estimates against your real shops, not generic averages. Updates on every save."
            sample={
              <div className="ps">
                <div className="ps-row"><span className="ps-k">cost / unit</span><span className="ps-v readout">$24.80</span></div>
                <div className="ps-row"><span className="ps-k">lead time</span><span className="ps-v readout">9–14 d</span></div>
                <div className="ps-row delta"><span className="ps-k">since rev 3</span><span className="ps-v readout neg">−$1.30</span></div>
                <div className="ps-foot readout">updated 8s ago · Mesa Fab</div>
              </div>
            }
          />
          <Pillar
            num="02"
            title="Manufacturability"
            wedge="cited, not guessed"
            body="DFM checks that name the rule, the feature, the precedent. When the system is uncertain, it defers — to a person on your team, by name."
            sample={
              <div className="ps">
                <div className="ps-alert">
                  <span className="ps-tag-r">flag</span>
                  <div className="ps-alert-body">
                    <div className="ps-alert-t">wall under 3mm</div>
                    <div className="ps-alert-c readout">rule dfm-al-001 · same fix as MNT-0042 rev 3</div>
                  </div>
                </div>
                <div className="ps-row"><span className="ps-k">confidence</span><span className="ps-v readout">high</span></div>
                <div className="ps-foot readout">"I do not know. Ask Diego."</div>
              </div>
            }
          />
          <Pillar
            num="03"
            title="Institutional memory"
            wedge="the moat"
            body="Every constraint your shop teaches Plumb is remembered. Six months in, Plumb knows your shops better than your last hire's first year of onboarding."
            sample={
              <div className="ps">
                <div className="ps-row"><span className="ps-k">constraints captured</span><span className="ps-v readout">147</span></div>
                <div className="ps-row"><span className="ps-k">shops tracked</span><span className="ps-v readout">3</span></div>
                <div className="ps-row"><span className="ps-k">precedents recalled</span><span className="ps-v readout">42</span></div>
                <div className="ps-foot readout">since 2025-11-04 · 6 mo</div>
              </div>
            }
          />
        </div>
      </div>

      <style>{`
        .pillars {
          display: grid;
          grid-template-columns: 1fr;
          gap: 1px;
          margin-top: 64px;
          background: var(--border-default);
          border: 1px solid var(--border-default);
          border-radius: 3px;
          overflow: hidden;
        }
        @media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
        .pillar {
          background: var(--bg-primary);
          padding: 32px 28px 28px;
          display: flex; flex-direction: column;
          min-height: 420px;
          transition: background-color 200ms var(--ease-standard);
        }
        .pillar:hover { background: var(--color-surface-raised); }
        .pillar-num {
          font-family: var(--font-mono);
          font-size: 10px; letter-spacing: 0.14em;
          color: rgba(26,26,26,0.4);
          margin-bottom: 32px;
          display: flex; justify-content: space-between;
        }
        .pillar-num em {
          font-style: normal;
          color: var(--color-prussian);
        }
        .pillar h3 {
          font-family: var(--font-grotesk);
          font-size: 22px; font-weight: 500;
          letter-spacing: -0.015em;
          margin: 0 0 12px;
        }
        .pillar p {
          font-family: var(--font-grotesk);
          font-size: 14px; line-height: 1.55;
          color: rgba(26,26,26,0.7);
          margin: 0 0 28px;
          max-width: 32ch;
        }
        .ps {
          margin-top: auto;
          background: var(--color-surface-white);
          border: 1px solid var(--border-default);
          border-radius: 2px;
          padding: 14px 16px;
        }
        .ps-row {
          display: flex; justify-content: space-between;
          padding: 6px 0;
          border-bottom: 1px solid rgba(26,26,26,0.07);
          font-size: 12px;
        }
        .ps-row:last-of-type { border-bottom: 0; }
        .ps-k {
          font-family: var(--font-mono);
          color: rgba(26,26,26,0.55);
          letter-spacing: 0.04em;
          font-size: 11px;
        }
        .ps-v { font-size: 13px; color: var(--color-graphite); font-weight: 500; }
        .ps-v.neg { color: var(--color-prussian); }
        .ps-foot {
          font-size: 9px;
          color: rgba(26,26,26,0.4);
          letter-spacing: 0.06em;
          padding-top: 10px;
          margin-top: 8px;
          border-top: 1px solid rgba(26,26,26,0.07);
        }
        .ps-alert {
          display: flex; gap: 10px;
          padding-bottom: 12px;
          margin-bottom: 8px;
          border-bottom: 1px solid rgba(26,26,26,0.07);
        }
        .ps-tag-r {
          font-family: var(--font-mono);
          font-size: 9px;
          color: var(--color-redline);
          background: rgba(184,58,45,0.08);
          border: 1px solid rgba(184,58,45,0.3);
          padding: 2px 6px;
          border-radius: 2px;
          height: fit-content;
          letter-spacing: 0.06em;
        }
        .ps-alert-body { flex: 1; }
        .ps-alert-t { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
        .ps-alert-c {
          font-size: 10px;
          color: rgba(26,26,26,0.55);
          letter-spacing: 0.02em;
        }
      `}</style>
    </section>
  );
};

const Pillar = ({ num, title, wedge, body, sample }) => (
  <div className="pillar stx">
    <div className="pillar-num">
      <span>{num}</span>
      <em>{wedge}</em>
    </div>
    <h3>{title}</h3>
    <p>{body}</p>
    {sample}
  </div>
);

window.PlumbHowItWorks = PlumbHowItWorks;