/* Mount the document sections into their roots. */

const { createRoot } = ReactDOM;

/* ───────── Critique findings ───────── */
function CritiqueSection() {
  const findings = [
    { sev: 'hi', tag: 'Color', h: 'Rainbow KPIs carry no hierarchy',
      p: 'Six dashboard tiles each use a different hot color (#eb3349, #11998e, #f7971e, #4facfe, #a855f7, #667eea). Everything shouts equally, so nothing reads as urgent. The color palette is a legend, not a signal.' },
    { sev: 'hi', tag: 'Hierarchy', h: 'Decorative icon bubbles everywhere',
      p: '48px pastel circles with duplicated iconography sit next to every metric on Customers, Jobs, Invoices, Equipment. They double the card height without carrying new information — the label already says what it is.' },
    { sev: 'hi', tag: 'Layout', h: 'Welcome gradient steals attention',
      p: 'The "Welcome Back!" banner uses the full sidebar gradient as background — it dominates the page with a decorative greeting when this is a daily operations tool. People already know their name.' },
    { sev: 'md', tag: 'Type', h: 'No numeric typography',
      p: 'All tabular numbers — job counts, A/R amounts, due dates — render in the same proportional Inter as body text. Columns don\'t line up, and currency scanning is slow. A tabular/mono face for numerals would fix this cheaply.' },
    { sev: 'md', tag: 'Density', h: 'Two stat strips on every list page',
      p: 'Jobs, Customers, Invoices each render a desktop "stats cards" row AND a mobile "stats compact" row. That\'s 120px of chrome before the actual table. The same counts already belong on the dashboard.' },
    { sev: 'md', tag: 'Consistency', h: 'Twelve sidebar palettes, one default',
      p: 'The sidebar ships with 12 preset gradients (ocean, forest, slate, crimson, midnight, purple…) and a light/dark toggle. That\'s surface personalisation where you need identity. Pick one sidebar treatment and invest there.' },
    { sev: 'md', tag: 'Motion', h: 'Glowing critical badges',
      p: 'badge-glow-critical pulses a red shadow forever. Motion should bring attention once, not loop. It\'s visual noise that trains users to tune out the red.' },
    { sev: 'lo', tag: 'Forms', h: 'Inputs render with #9ca3af borders always',
      p: 'Form controls use a uniform 1.5px gray border regardless of state. There\'s no way for a required-but-empty field to distinguish itself from a focused one until you tab in. Low-cost lift with big payoff.' },
    { sev: 'lo', tag: 'Brand', h: 'No visual ownership of the domain',
      p: 'Nothing on screen says "this is for a powder coating shop." Powder color chips, cure temperatures, oven state, batch numbers — the core vocabulary — doesn\'t surface in the UI. The product feels like generic small-business SaaS.' },
  ];

  return (
    <section className="chapter">
      <div className="chap-head">
        <div className="chap-num">01 · Critique</div>
        <div>
          <h2 className="chap-title">Where the current design leaks value</h2>
          <p className="chap-lede">
            Nothing below is a bug — the app works. But each of these is a small
            everyday tax: on legibility, on trust, on the sense that the tool belongs
            to a shop that takes craft seriously.
          </p>
        </div>
      </div>
      <div className="findings">
        {findings.map((f, i) => (
          <div key={i} className="finding">
            <div className="finding-tag">
              <span className={`sev ${f.sev}`} />
              {f.tag}
            </div>
            <h4>{f.h}</h4>
            <p>{f.p}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ───────── Design system strip ───────── */
function SystemSection() {
  return (
    <section className="chapter">
      <div className="chap-head">
        <div className="chap-num">02 · Direction</div>
        <div>
          <h2 className="chap-title">A calmer, more industrial voice</h2>
          <p className="chap-lede">
            Warm neutrals, a single ember accent, Inter + IBM Plex Mono for numerics,
            Fraunces for occasional display type. The goal is "shop tool, not admin template."
          </p>
        </div>
      </div>

      <div className="sys">
        <div className="sys-cell">
          <h5>Foundations</h5>
          <div className="swatch-row">
            <div className="swatch"><span className="chip" style={{ background: '#0F0F10' }} /><span className="lbl">Ink</span><span className="hex">#0F0F10</span></div>
            <div className="swatch"><span className="chip" style={{ background: '#3A3A3E' }} /><span className="lbl">Slate</span><span className="hex">#3A3A3E</span></div>
            <div className="swatch"><span className="chip" style={{ background: '#6B6B70' }} /><span className="lbl">Steel</span><span className="hex">#6B6B70</span></div>
            <div className="swatch"><span className="chip" style={{ background: '#E4E2DC' }} /><span className="lbl">Rule</span><span className="hex">#E4E2DC</span></div>
            <div className="swatch"><span className="chip" style={{ background: '#F3F1EB' }} /><span className="lbl">Paper 2</span><span className="hex">#F3F1EB</span></div>
            <div className="swatch"><span className="chip" style={{ background: '#FAFAF7' }} /><span className="lbl">Paper</span><span className="hex">#FAFAF7</span></div>
          </div>
        </div>

        <div className="sys-cell">
          <h5>Signal</h5>
          <div className="swatch-row">
            <div className="swatch"><span className="chip" style={{ background: 'var(--ember)' }} /><span className="lbl">Ember · accent</span><span className="hex">oklch 0.68 / 0.17 / 50</span></div>
            <div className="swatch"><span className="chip" style={{ background: 'var(--ok)' }} /><span className="lbl">OK · on track</span><span className="hex">0.62 / 0.11 / 155</span></div>
            <div className="swatch"><span className="chip" style={{ background: 'var(--warn)' }} /><span className="lbl">Warn · tight</span><span className="hex">0.76 / 0.13 / 80</span></div>
            <div className="swatch"><span className="chip" style={{ background: 'var(--bad)' }} /><span className="lbl">Bad · overdue</span><span className="hex">0.60 / 0.19 / 25</span></div>
            <div className="swatch"><span className="chip" style={{ background: 'var(--cool)' }} /><span className="lbl">Cool · queued</span><span className="hex">0.58 / 0.09 / 240</span></div>
          </div>
          <p style={{ margin: '12px 0 0', fontSize: 11.5, color: 'var(--steel)', lineHeight: 1.5 }}>
            Shared chroma & lightness across hues. Status chips use the tinted variant + dot,
            never a full saturated fill.
          </p>
        </div>

        <div className="sys-cell">
          <h5>Type</h5>
          <div className="type-sample">
            <div className="type-meta">Display · Fraunces 500</div>
            <div className="type-val serif" style={{ fontSize: 26, letterSpacing: '-0.015em' }}>12 jobs on the floor</div>
          </div>
          <div className="type-sample">
            <div className="type-meta">UI · Inter 500 / 400</div>
            <div className="type-val" style={{ fontSize: 15, fontWeight: 500 }}>Rodriguez Metal</div>
            <div className="type-val" style={{ fontSize: 13, color: 'var(--slate)' }}>Fence gate — anodized black</div>
          </div>
          <div className="type-sample">
            <div className="type-meta">Numerics · IBM Plex Mono</div>
            <div className="type-val mono" style={{ fontSize: 18 }}>$12,450.00 · J-2041</div>
          </div>
        </div>

        <div className="sys-cell">
          <h5>Principles</h5>
          <ol style={{ margin: 0, paddingLeft: 16, fontSize: 12.5, color: 'var(--slate)', lineHeight: 1.7 }}>
            <li><b style={{ color: 'var(--ink)' }}>One accent, one loud.</b> Orange earns attention. Status colors whisper.</li>
            <li><b style={{ color: 'var(--ink)' }}>Numerics are monospace.</b> Columns align; currency scans.</li>
            <li><b style={{ color: 'var(--ink)' }}>Borders, not shadows.</b> 1px rules on paper — reads like a spec sheet.</li>
            <li><b style={{ color: 'var(--ink)' }}>Domain on screen.</b> Powder swatches, cure temps, batch IDs.</li>
            <li><b style={{ color: 'var(--ink)' }}>No decorative motion.</b> Animation marks change, not state.</li>
          </ol>
        </div>
      </div>
    </section>
  );
}

/* ───────── Screen chapters ───────── */
function ScreenChapter({ num, title, lede, before, after, delta }) {
  return (
    <section className="chapter">
      <div className="chap-head">
        <div className="chap-num">{num}</div>
        <div>
          <h2 className="chap-title">{title}</h2>
          <p className="chap-lede">{lede}</p>
        </div>
      </div>
      <Stage
        before={<Scaled width={1280} height={720}>{before}</Scaled>}
        after={<Scaled width={1280} height={720}>{after}</Scaled>}
        delta={delta}
      />
    </section>
  );
}

/* ───────── Wrap-up ───────── */
function WrapSection() {
  return (
    <section className="chapter">
      <div className="chap-head">
        <div className="chap-num">06 · Next</div>
        <div>
          <h2 className="chap-title">If you want to ship this, start here</h2>
          <p className="chap-lede">
            Ordered by impact per hour of work. The first three are the ones that carry 80% of
            the visual-quality lift — the rest compound over time.
          </p>
        </div>
      </div>
      <div style={{
        background: 'var(--card)', border: '1px solid var(--rule)', borderRadius: 8,
        overflow: 'hidden',
      }}>
        {[
          ['01', 'Replace the KPI palette and icon bubbles', 'Kill the six hot colors and the pastel circles. One monospace number, one label. Dashboard + every list page inherits the fix.', '½ day'],
          ['02', 'Pick one typeface for numerics', 'Drop IBM Plex Mono (or similar) into site.css and apply to .mono, tables, KPIs. Alignment fixes itself.', '2 h'],
          ['03', 'Demote the welcome banner', 'Turn the gradient block into a single line of kerned text + date. Reclaim 140px of dashboard real estate.', '2 h'],
          ['04', 'Introduce status chips as a component', 'One ts/cs partial: dot + tinted pill + Plex label. Reuse on Jobs, Invoices, Maintenance, Equipment.', '1 day'],
          ['05', 'Retire 11 of the 12 sidebar gradients', 'Ship Ink + Paper (dark/light) only. Personalization is a feature for consumer apps, not shop ops.', '1 h'],
          ['06', 'Add powder swatches to any powder reference', 'Tiny 10px swatch next to every powder name on Jobs, Inventory, Board, Oven. Free branding.', '½ day'],
          ['07', 'Command bar (⌘K)', 'Sidebar has 40+ items. A fuzzy jump-to turns 2 clicks into 0. Biggest productivity lift on the list.', '2 days'],
        ].map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '60px 1fr 100px',
            gap: 20, padding: '16px 22px',
            borderBottom: i < 6 ? '1px solid var(--rule-soft)' : 'none',
            alignItems: 'baseline',
          }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ember-ink)', letterSpacing: '0.06em' }}>{r[0]}</span>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14, letterSpacing: '-0.005em' }}>{r[1]}</div>
              <div style={{ fontSize: 12.5, color: 'var(--slate)', marginTop: 3, lineHeight: 1.55 }}>{r[2]}</div>
            </div>
            <span className="mono" style={{
              fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase',
              color: 'var(--steel)', textAlign: 'right', whiteSpace: 'nowrap',
            }}>{r[3]}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ───────── Mount ───────── */

createRoot(document.getElementById('critique-root')).render(<CritiqueSection />);
createRoot(document.getElementById('system-root')).render(<SystemSection />);

createRoot(document.getElementById('screen1-root')).render(
  <ScreenChapter
    num="03 · Dashboard"
    title="From decorative welcome to operational brief"
    lede="Today's single most-used screen. The current layout spends its biggest real estate on a gradient greeting and six rainbow KPIs. The proposed layout answers one question first: what needs my attention today?"
    before={<DashboardBefore />}
    after={<DashboardAfter />}
    delta={{
      wrong: [
        'Gradient "Welcome Back" banner dominates the fold',
        'Six KPI tiles in six different accent colors, no ranking',
        'Icon bubbles repeat the label',
        'A/R aging uses four more unrelated colors',
      ],
      change: [
        'Opens with a single prose summary of the day',
        'Core finance row sits beside it, monospace numerals',
        '"Needs attention" surfaces only items < 48 h or blocked',
        'Floor activity feed grounds the dashboard in real events',
      ],
    }}
  />
);

createRoot(document.getElementById('screen2-root')).render(
  <ScreenChapter
    num="04 · Jobs list"
    title="Less chrome, more scanning"
    lede="The jobs index is used all day by estimators and shop managers. Every px of chrome is a tax on scan speed. The redesign compresses four stat cards into one strip, adds keyboard-first filtering, and makes job IDs a first-class mono column."
    before={<JobsIndexBefore />}
    after={<JobsIndexAfter />}
    delta={{
      wrong: [
        '4× stat cards with icon bubbles eat 130px',
        'Status and priority pills are hard to tell apart',
        'Job IDs styled as purple links, no hierarchy with description',
        'No saved/quick views, filters hidden behind a button',
      ],
      change: [
        'Single 5-metric strip, monospace numerals, sparkline-less',
        'Tabular status chips: dot + tint + Plex label',
        'Job ID in mono, description bold, customer secondary, hot jobs carry a left bar',
        'Quick views inline (All / Due ≤48h / On floor / Ready / Mine) + ⌘K shortcut hint',
      ],
    }}
  />
);

createRoot(document.getElementById('screen3-root')).render(
  <ScreenChapter
    num="05 · Daily board"
    title="A board that knows it's a shop floor"
    lede="The current Kanban is a generic card board. The redesign adds the things this specific tool should know: powder color swatches on every card, a live oven cycle meter on the Curing column, and a hot-job edge treatment instead of colored borders fighting the priority palette."
    before={<JobsBoardBefore />}
    after={<JobsBoardAfter />}
    delta={{
      wrong: [
        'Every column uses a different pill color (red for Coating, purple for Curing…)',
        'Priority encoded as a 4px colored left border — same visual weight as column tint',
        'No domain cues: "powder" is just text, due dates aren\'t scannable',
        'Kanban chrome (gray column tint) takes space without adding info',
      ],
      change: [
        'Columns carry a Plex Mono label and a count badge — no chromatic encoding',
        'Hot jobs get a single red edge; everything else is mono',
        'Every card shows a powder swatch + parts count + priority dot in a tight footer',
        'Curing column carries a live oven meter (180 °C · 14 min)',
      ],
    }}
  />
);

createRoot(document.getElementById('wrap-root')).render(<WrapSection />);