// BeforeAfter.jsx — calendar comparison
const PlumbBeforeAfter = () => {
  const CU = window.CountUp;
  return (
    <section id="before-after" className="section ba reveal-fx" data-screen-label="before-after">
      <div className="section-corner">
        <span>04 · before / after</span>
        <span>same week · two outcomes</span>
      </div>
      <div className="page">
        <p className="eyebrow">04 · before / after</p>
        <h2 className="section-h" style={{ maxWidth: '22ch' }}>
          The same Tuesday. Two weeks apart.
        </h2>
        <p className="lead" style={{ marginTop: 24, marginBottom: 56 }}>
          Without Plumb, the shop closes the loop on Thursday and the revision lands the following week.
          With Plumb, the loop closes at the desk while the part is still in the head.
        </p>

        <div className="ba-grid stagger">
          {/* BEFORE */}
          <div className="ba-col before stx">
            <div className="ba-head">
              <span className="ba-tag">before plumb</span>
              <span className="readout ba-meta">tape-out slips. prototype slips.</span>
            </div>
            <div className="ba-week">
              {[
                { d: 'tue', date: '03', e: 'design', detail: 'wall set to 2.4mm. cheaper.', state: 'ok' },
                { d: 'wed', date: '04', e: '—', detail: 'in CAD', state: 'idle' },
                { d: 'thu', date: '05', e: 'quote returns', detail: '"Mesa Fab can\'t run that wall."', state: 'redline' },
                { d: 'fri', date: '06', e: 'phone call', detail: 'redline meeting scheduled', state: 'idle' },
                { d: 'mon', date: '09', e: 'rev 4 starts', detail: 'a week downstream of the change', state: 'idle' },
                { d: 'tue', date: '10', e: 'rev 4 lands', detail: 'tape-out delayed by 7 days', state: 'redline' },
              ].map((row, idx) => (
                <div key={idx} className={`ba-row ${row.state}`}>
                  <span className="ba-day">{row.d} {row.date}</span>
                  <span className="ba-dot" />
                  <span className="ba-event">
                    <span className="ba-evt-t">{row.e}</span>
                    <span className="ba-evt-d">{row.detail}</span>
                  </span>
                </div>
              ))}
            </div>
            <div className="ba-foot">
              <div className="ba-stat">
                <span className="readout ba-stat-v r">
                  {CU ? <><span className="cu-sign">+ </span><CU to={7} /> days</> : '+ 7 days'}
                </span>
                <span className="ba-stat-l">slipped</span>
              </div>
              <div className="ba-stat">
                <span className="readout ba-stat-v r">
                  {CU ? <CU to={40000} prefix="$ " thousands /> : '$ 40,000'}
                </span>
                <span className="ba-stat-l">scrap risk on the precedent part</span>
              </div>
            </div>
          </div>

          {/* AFTER */}
          <div className="ba-col after stx">
            <div className="ba-head">
              <span className="ba-tag prussian">with plumb</span>
              <span className="readout ba-meta">tape-out holds.</span>
            </div>
            <div className="ba-week">
              {[
                { d: 'tue', date: '03', t: '09:14', e: 'design', detail: 'wall set to 2.4mm', state: 'ok' },
                { d: 'tue', date: '03', t: '09:14', e: 'plumb flags', detail: '"wall under 3mm. al will not bend that."', state: 'flag' },
                { d: 'tue', date: '03', t: '09:18', e: 'precedent', detail: 'rev 3 of MNT-0042. same fix.', state: 'cite' },
                { d: 'tue', date: '03', t: '09:24', e: 'fix applied', detail: 'wall to 3.2mm. cost − $1.30.', state: 'ok' },
                { d: 'tue', date: '03', t: '09:25', e: 'rev 4 saved', detail: '8 minutes from flag to fix', state: 'ok' },
                { d: 'thu', date: '05', t: '—', e: 'tape-out', detail: 'on schedule', state: 'win' },
              ].map((row, idx) => (
                <div key={idx} className={`ba-row ${row.state}`}>
                  <span className="ba-day">{row.d} {row.date}<span className="ba-time">· {row.t}</span></span>
                  <span className="ba-dot" />
                  <span className="ba-event">
                    <span className="ba-evt-t">{row.e}</span>
                    <span className="ba-evt-d">{row.detail}</span>
                  </span>
                </div>
              ))}
            </div>
            <div className="ba-foot">
              <div className="ba-stat">
                <span className="readout ba-stat-v p">
                  {CU ? <><CU to={8} /> minutes</> : '8 minutes'}
                </span>
                <span className="ba-stat-l">flag to fix</span>
              </div>
              <div className="ba-stat">
                <span className="readout ba-stat-v p">− 1 revision</span>
                <span className="ba-stat-l">prototype rounds, on average</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .ba-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 1px;
          background: var(--border-default);
          border: 1px solid var(--border-default);
          border-radius: 3px;
          overflow: hidden;
        }
        @media (min-width: 900px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
        .ba-col { background: var(--bg-primary); padding: 28px 28px 24px; }
        .ba-col.after { background: #f4f0e8; }
        .ba-head {
          display: flex; align-items: center; justify-content: space-between;
          padding-bottom: 16px;
          border-bottom: 1px solid var(--border-default);
          margin-bottom: 20px;
        }
        .ba-tag {
          font-family: var(--font-mono); font-size: 10px;
          letter-spacing: 0.12em; text-transform: lowercase;
          color: var(--color-redline);
          padding: 4px 8px;
          background: rgba(184,58,45,0.07);
          border: 1px solid rgba(184,58,45,0.25);
          border-radius: 2px;
        }
        .ba-tag.prussian {
          color: var(--color-prussian);
          background: rgba(27,58,92,0.07);
          border-color: rgba(27,58,92,0.25);
        }
        .ba-meta { font-size: 10px; color: rgba(26,26,26,0.55); letter-spacing: 0.06em; }

        .ba-week { display: flex; flex-direction: column; gap: 0; }
        .ba-row {
          display: grid;
          grid-template-columns: 100px 16px 1fr;
          align-items: flex-start;
          gap: 14px;
          padding: 12px 0;
          border-bottom: 1px solid rgba(26,26,26,0.07);
        }
        .ba-row:last-child { border-bottom: 0; }
        .ba-day {
          font-family: var(--font-mono);
          font-size: 11px;
          color: rgba(26,26,26,0.62);
          letter-spacing: 0.06em;
          padding-top: 2px;
        }
        .ba-time { color: rgba(26,26,26,0.4); margin-left: 2px; }
        .ba-dot {
          width: 7px; height: 7px;
          border-radius: 50%;
          background: rgba(26,26,26,0.18);
          margin-top: 7px; justify-self: center;
          border: 1px solid transparent;
        }
        .ba-row.ok .ba-dot { background: rgba(26,26,26,0.4); }
        .ba-row.redline .ba-dot { background: var(--color-redline); }
        .ba-row.flag .ba-dot { background: var(--color-redline); box-shadow: 0 0 0 3px rgba(184,58,45,0.15); }
        .ba-row.cite .ba-dot { background: var(--color-prussian); }
        .ba-row.win .ba-dot { background: var(--color-prussian); box-shadow: 0 0 0 3px rgba(27,58,92,0.15); }
        .ba-event { display: flex; flex-direction: column; gap: 2px; }
        .ba-evt-t {
          font-size: 14px; font-weight: 500; color: var(--color-graphite);
          letter-spacing: -0.005em;
        }
        .ba-row.redline .ba-evt-t, .ba-row.flag .ba-evt-t { color: var(--color-redline); }
        .ba-row.cite .ba-evt-t, .ba-row.win .ba-evt-t { color: var(--color-prussian); }
        .ba-evt-d {
          font-size: 12px; color: rgba(26,26,26,0.62);
          font-style: italic;
        }

        .ba-foot {
          display: grid; grid-template-columns: 1fr 1fr;
          gap: 16px; margin-top: 24px;
          padding-top: 20px;
          border-top: 1px solid var(--border-default);
        }
        .ba-stat { display: flex; flex-direction: column; gap: 4px; }
        .ba-stat-v {
          font-size: 22px; font-weight: 500;
          letter-spacing: -0.015em;
        }
        .ba-stat-v.r { color: var(--color-redline); }
        .ba-stat-v.p { color: var(--color-prussian); }
        .ba-stat-l {
          font-family: var(--font-grotesk);
          font-size: 11px; color: rgba(26,26,26,0.55);
        }
      `}</style>
    </section>
  );
};

window.PlumbBeforeAfter = PlumbBeforeAfter;