// Cabinet-by-cabinet intake — replaces the old "Areas" model
// Each area now holds a list of cabinets, each with structured fields,
// plus a toe-kick block, special instructions, and a pre-review checklist.

const { useState, useEffect, useMemo, useRef } = React;

const BOX_MATERIALS = [
  'Birch plywood',
  'Hardrock maple',
  'Maple plywood',
  'Cherry plywood',
  'Oak plywood',
  'Walnut plywood',
  'Melamine — white',
  'Melamine — wood-look',
  'MDF',
  'Particle board',
  'Other',
];

const TOE_KICK_THICKNESS = ['1/4"', '1/2"', '5/8"', '3/4"'];

// ============================================================
// Client info
// ============================================================
function ClientStep({ data, setData }) {
  const update = (k, v) => setData({ ...data, [k]: v });
  return (
    <>
      <div className="page-head">
        <span className="eyebrow">Step 01 · Vendor, Customer & Site</span>
        <h1>Who and where?</h1>
        <p>Capture the vendor (our client) and the end customer (the vendor's client), then the project site and timing.</p>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Vendor <span style={{ fontSize: 12, color: 'var(--ink-faint)', fontFamily: 'var(--mono)', fontWeight: 400, marginLeft: 8, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Our client</span></h3>
        </div>
        <div className="field-grid">
          <div className="field">
            <label>Vendor / company name <span className="req">*</span></label>
            <input className="input" value={data.vendorName || ''} onChange={e => update('vendorName', e.target.value)} placeholder="e.g. Sun Valley Cabinets"/>
          </div>
          <div className="field">
            <label>Vendor contact</label>
            <input className="input" value={data.vendorContact || ''} onChange={e => update('vendorContact', e.target.value)} placeholder="Project manager / point of contact"/>
          </div>
          <div className="field">
            <label>Vendor phone</label>
            <input className="input mono" value={data.vendorPhone || ''} onChange={e => update('vendorPhone', e.target.value)} placeholder="(480) 555-0100"/>
          </div>
          <div className="field">
            <label>Vendor email</label>
            <input className="input" value={data.vendorEmail || ''} onChange={e => update('vendorEmail', e.target.value)} placeholder="pm@sunvalleycabinets.com"/>
          </div>
          <div className="field span-2">
            <label>PO / job reference</label>
            <input className="input mono" value={data.vendorPO || ''} onChange={e => update('vendorPO', e.target.value)} placeholder="Vendor's PO or job number"/>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Customer <span style={{ fontSize: 12, color: 'var(--ink-faint)', fontFamily: 'var(--mono)', fontWeight: 400, marginLeft: 8, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Vendor's client / homeowner</span></h3>
        </div>
        <div className="field-grid">
          <div className="field">
            <label>Customer name <span className="req">*</span></label>
            <input className="input" value={data.clientName || ''} onChange={e => update('clientName', e.target.value)} placeholder="e.g. Sarah Coleman"/>
          </div>
          <div className="field">
            <label>Phone</label>
            <input className="input mono" value={data.clientPhone || ''} onChange={e => update('clientPhone', e.target.value)} placeholder="(480) 555-0142"/>
          </div>
          <div className="field">
            <label>Email</label>
            <input className="input" value={data.clientEmail || ''} onChange={e => update('clientEmail', e.target.value)} placeholder="sarah@example.com"/>
          </div>
          <div className="field">
            <label>Preferred contact</label>
            <div className="segmented">
              {['Phone', 'Text', 'Email'].map(opt => (
                <button key={opt} className={data.preferredContact === opt ? 'on' : ''}
                  onClick={() => update('preferredContact', opt)}>{opt}</button>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Project Site</h3></div>
        <div className="field-grid">
          <div className="field span-2">
            <label>Project address <span className="req">*</span></label>
            <input className="input" value={data.address || ''} onChange={e => update('address', e.target.value)} placeholder="Street, city, state, ZIP"/>
          </div>
          <div className="field">
            <label>Install needed?</label>
            <div className="segmented">
              {['Yes', 'No', 'Unsure'].map(opt => (
                <button key={opt} className={data.installNeeded === opt ? 'on' : ''}
                  onClick={() => update('installNeeded', opt)}>{opt}</button>
              ))}
            </div>
          </div>
          <div className="field">
            <label>Home type</label>
            <div className="segmented">
              {['Single fam.', 'Condo', 'Rental', 'Commercial'].map(opt => (
                <button key={opt} className={data.homeType === opt ? 'on' : ''}
                  onClick={() => update('homeType', opt)}>{opt}</button>
              ))}
            </div>
          </div>
          <div className="field span-2">
            <label>Access notes</label>
            <textarea className="textarea" value={data.accessNotes || ''} onChange={e => update('accessNotes', e.target.value)}
              placeholder="Gate code, pets, parking, best entry…"/>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Timeframe</h3></div>
        <div className="field-grid one">
          <div className="field">
            <label>Completion date requested</label>
            <input className="input mono" type="date" value={data.completionRequested || ''} onChange={e => update('completionRequested', e.target.value)} style={{ maxWidth: 240 }}/>
            <div className="hint">Date received auto-stamps on submit ({new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}).</div>
          </div>
          <div className="field">
            <label>Priority</label>
            <div className="chips">
              {[
                { v: 'asap', l: 'ASAP' },
                { v: '2wk', l: 'Within 2 weeks' },
                { v: '1mo', l: 'Within 1 month' },
                { v: '3mo', l: 'Within 3 months' },
                { v: 'flex', l: 'Flexible' },
              ].map(o => (
                <button key={o.v} className={'chip' + (data.timeframe === o.v ? ' on' : '')}
                  onClick={() => update('timeframe', o.v)}>
                  <span className="dot"></span>{o.l}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// ============================================================
// CabinetsStep — list of cabinets with detailed specs
// ============================================================
function CabinetsStep({ data, setData, onProceed }) {
  const cabinets = data.cabinets || [];
  const [activeIdx, setActiveIdx] = useState(0);
  const [showChecklist, setShowChecklist] = useState(false);

  useEffect(() => {
    if (cabinets.length === 0) {
      setData({ ...data, cabinets: [makeCabinet(1)] });
      setActiveIdx(0);
    }
  }, []);

  const active = cabinets[activeIdx];

  const updateActive = (patch) => {
    const next = cabinets.map((c, i) => i === activeIdx ? { ...c, ...patch } : c);
    setData({ ...data, cabinets: next });
  };

  const updateField = (key, value) => updateActive({ [key]: value });

  const addCabinet = () => {
    const next = [...cabinets, makeCabinet(cabinets.length + 1)];
    setData({ ...data, cabinets: next });
    setActiveIdx(next.length - 1);
  };

  const removeCabinet = (idx) => {
    if (cabinets.length <= 1) return;
    const next = cabinets.filter((_, i) => i !== idx);
    setData({ ...data, cabinets: next });
    setActiveIdx(Math.max(0, Math.min(activeIdx, next.length - 1)));
  };

  const updateToeKick = (patch) => {
    setData({ ...data, toeKick: { ...(data.toeKick || {}), ...patch } });
  };

  const tk = data.toeKick || {};

  if (!active) return null;

  return (
    <>
      <div className="page-head">
        <span className="eyebrow">Step 02 · Cabinets & Toe Kick</span>
        <h1>Build the order</h1>
        <p>Add each cabinet with its construction details. After all cabinets are entered, fill in the toe kick spec and any special instructions.</p>
      </div>

      <div className="area-tabs">
        {cabinets.map((c, i) => (
          <button key={c.id}
            className={'area-tab' + (activeIdx === i ? ' active' : '')}
            onClick={() => setActiveIdx(i)}>
            <span>Cab {String(i + 1).padStart(2, '0')}</span>
            <span className="badge">{c.w && c.h ? `${c.w}×${c.h}` : '—'}</span>
          </button>
        ))}
        <button className="area-tab add" onClick={addCabinet}>
          <Icon.Plus/> Add cabinet
        </button>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <div className="eyebrow">Cabinet {String(activeIdx + 1).padStart(2, '0')}</div>
            <input className="input" value={active.name || ''}
              onChange={e => updateField('name', e.target.value)}
              placeholder="Label this cabinet (e.g. Sink base, Upper L)"
              style={{ fontFamily: 'var(--serif)', fontSize: 20, border: 'none', background: 'transparent', padding: 0, width: '100%', fontWeight: 500, marginTop: 4 }}/>
          </div>
          {cabinets.length > 1 && (
            <button className="btn danger" onClick={() => removeCabinet(activeIdx)}>
              <Icon.Trash/> Remove cabinet
            </button>
          )}
        </div>

        {/* Photo + markup (optional) */}
        <div className="section" style={{ marginTop: 16 }}>
          <div className="section-head"><h3>Photo & markup</h3><span className="eyebrow">Optional · pin damage</span></div>
          {!active.photo ? (
            <div className="photo-dropzone">
              <div className="icon"><Icon.Camera/></div>
              <p>Capture or upload a photo of this cabinet</p>
              <div className="capture-buttons">
                <PhotoCaptureButton kind="camera" onSet={(src) => updateField('photo', src)}/>
                <PhotoCaptureButton kind="upload" onSet={(src) => updateField('photo', src)}/>
                <button className="btn ghost" onClick={() => updateField('photo', PLACEHOLDER_PHOTO)}>
                  Use sample photo
                </button>
              </div>
              <div className="tiny">Camera uses your device lens · JPG, PNG, HEIC up to 20MB</div>
            </div>
          ) : (
            <>
              <MarkupCanvas
                photo={active.photo}
                annotations={active.annotations || []}
                setAnnotations={(ann) => updateField('annotations', ann)}
              />
              <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 10 }}>
                <button className="btn ghost" onClick={() => { updateField('photo', null); updateField('annotations', []); }}>
                  <Icon.X/> Replace photo
                </button>
              </div>
            </>
          )}
        </div>

        {/* Dimensions */}
        <div className="section">
          <div className="section-head"><h3>Dimensions</h3><span className="eyebrow">Cabinet body</span></div>
          <div className="field-grid three">
            <DimField label="Width" value={active.w} unit={active.wu} onValue={v => updateField('w', v)} onUnit={u => updateField('wu', u)}/>
            <DimField label="Height" value={active.h} unit={active.hu} onValue={v => updateField('h', v)} onUnit={u => updateField('hu', u)}/>
            <DimField label="Depth" value={active.d} unit={active.du} onValue={v => updateField('d', v)} onUnit={u => updateField('du', u)}/>
          </div>
        </div>

        {/* Components */}
        <div className="section">
          <div className="section-head"><h3>Components</h3><span className="eyebrow">Counts & shelf size</span></div>
          <div className="field-grid three">
            <div className="field">
              <label># of doors</label>
              <NumberStepper value={active.doors} onChange={v => updateField('doors', v)}/>
            </div>
            <div className="field">
              <label># of drawers</label>
              <NumberStepper value={active.drawers} onChange={v => updateField('drawers', v)}/>
            </div>
            <div className="field">
              <label># of shelves</label>
              <NumberStepper value={active.shelves} onChange={v => updateField('shelves', v)}/>
            </div>
            <div className="field span-2">
              <label>Shelf size (W × D)</label>
              <div style={{ display: 'flex', gap: 8 }}>
                <input className="input mono" value={active.shelfW || ''} onChange={e => updateField('shelfW', e.target.value)} placeholder="W"/>
                <span style={{ alignSelf: 'center', color: 'var(--ink-faint)' }}>×</span>
                <input className="input mono" value={active.shelfD || ''} onChange={e => updateField('shelfD', e.target.value)} placeholder="D"/>
                <select className="select" style={{ width: 80 }} value={active.shelfU || 'in'} onChange={e => updateField('shelfU', e.target.value)}>
                  <option>in</option><option>mm</option>
                </select>
              </div>
              <div className="hint">Leave blank if no shelves.</div>
            </div>
          </div>
        </div>

        {/* Finished side */}
        <div className="section">
          <div className="section-head"><h3>Finished side</h3><span className="eyebrow">Exposed end panel</span></div>
          <div className="field-grid">
            <div className="field">
              <label>Finished side?</label>
              <div className="segmented">
                {['Yes', 'No'].map(opt => (
                  <button key={opt} className={active.finishedSide === opt ? 'on' : ''}
                    onClick={() => updateField('finishedSide', opt)}>{opt}</button>
                ))}
              </div>
            </div>
            {active.finishedSide === 'Yes' && (
              <div className="field">
                <label>Which side?</label>
                <div className="segmented">
                  {['Left', 'Right', 'Both'].map(opt => (
                    <button key={opt} className={active.finishedWhich === opt ? 'on' : ''}
                      onClick={() => updateField('finishedWhich', opt)}>{opt}</button>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Box material */}
        <div className="section">
          <div className="section-head"><h3>Box material</h3><span className="eyebrow">Species & thickness</span></div>
          <div className="field-grid">
            <div className="field">
              <label>Material</label>
              <select className="select" value={active.boxMaterial || ''} onChange={e => updateField('boxMaterial', e.target.value)}>
                <option value="">Select material…</option>
                {BOX_MATERIALS.map(m => <option key={m}>{m}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Thickness</label>
              <div style={{ display: 'flex', gap: 6 }}>
                <input className="input mono" value={active.boxThickness || ''} onChange={e => updateField('boxThickness', e.target.value)} placeholder='e.g. 3/4"'/>
                <div className="segmented" style={{ flex: 'none' }}>
                  {['1/2"', '5/8"', '3/4"'].map(opt => (
                    <button key={opt} className={active.boxThickness === opt ? 'on' : ''}
                      onClick={() => updateField('boxThickness', opt)}>{opt}</button>
                  ))}
                </div>
              </div>
            </div>
            {active.boxMaterial === 'Other' && (
              <div className="field span-2">
                <label>Specify material</label>
                <input className="input" value={active.boxMaterialOther || ''} onChange={e => updateField('boxMaterialOther', e.target.value)} placeholder="Describe the box material"/>
              </div>
            )}
          </div>
        </div>

        {/* Cabinet type */}
        <div className="section">
          <div className="section-head"><h3>Cabinet type</h3><span className="eyebrow">Layout</span></div>
          <div className="field-grid one">
            <div className="field">
              <label>Is this an island or peninsula?</label>
              <div className="segmented" style={{ maxWidth: 460 }}>
                {['Standard wall', 'Island', 'Peninsula'].map(opt => (
                  <button key={opt} className={active.cabType === opt ? 'on' : ''}
                    onClick={() => updateField('cabType', opt)}>{opt}</button>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="section">
          <div className="section-head"><h3>Cabinet notes</h3><span className="eyebrow">Optional</span></div>
          <textarea className="textarea" value={active.notes || ''}
            onChange={e => updateField('notes', e.target.value)}
            placeholder="Anything specific to this cabinet — damage callouts, finish details, hardware to match…"/>
        </div>
      </div>

      {/* TOE KICK BLOCK */}
      <div className="card">
        <div className="card-head">
          <h3>Toe kick</h3>
          <span className="eyebrow">For the whole order</span>
        </div>
        <div className="field-grid three">
          <DimField label="Height" value={tk.height} unit={tk.heightU} onValue={v => updateToeKick({ height: v })} onUnit={u => updateToeKick({ heightU: u })}/>
          <DimField label="Depth" value={tk.depth} unit={tk.depthU} onValue={v => updateToeKick({ depth: v })} onUnit={u => updateToeKick({ depthU: u })}/>
          <DimField label="Setback from face edge" value={tk.setback} unit={tk.setbackU} onValue={v => updateToeKick({ setback: v })} onUnit={u => updateToeKick({ setbackU: u })}/>
        </div>
        <div className="field-grid" style={{ marginTop: 16 }}>
          <div className="field">
            <label>Thickness</label>
            <div className="segmented">
              {TOE_KICK_THICKNESS.map(opt => (
                <button key={opt} className={tk.thickness === opt ? 'on' : ''}
                  onClick={() => updateToeKick({ thickness: opt })}>{opt}</button>
              ))}
            </div>
          </div>
          <div className="field">
            <label>Total length needed (linear feet)</label>
            <div style={{ display: 'flex', gap: 6 }}>
              <input className="input mono" value={tk.linearFt || ''} onChange={e => updateToeKick({ linearFt: e.target.value })} placeholder="0"/>
              <span style={{ alignSelf: 'center', color: 'var(--ink-faint)', fontFamily: 'var(--mono)', fontSize: 13 }}>lin. ft</span>
            </div>
          </div>
        </div>
      </div>

      {/* SPECIAL INSTRUCTIONS */}
      <div className="card">
        <div className="card-head">
          <h3>Special instructions</h3>
          <span className="eyebrow">Optional</span>
        </div>
        <textarea className="textarea" value={data.specialInstructions || ''}
          onChange={e => setData({ ...data, specialInstructions: e.target.value })}
          placeholder="Color match notes, hardware preferences, scheduling constraints, anything else we need to know…"
          style={{ minHeight: 100 }}/>
      </div>

      {/* Continue → checklist popup */}
      <div className="nav-foot no-print">
        <div></div>
        <button className="btn primary lg" onClick={() => setShowChecklist(true)}>
          Continue to review <Icon.ArrowR/>
        </button>
      </div>

      {showChecklist && (
        <ChecklistModal onClose={() => setShowChecklist(false)} onProceed={() => { setShowChecklist(false); onProceed(); }}/>
      )}
    </>
  );
}

// ============================================================
// Checklist popup — shown before review
// ============================================================
function ChecklistModal({ onClose, onProceed }) {
  return (
    <div style={{
      position: 'fixed', inset: 0, background: 'oklch(22% 0.01 80 / 0.55)',
      display: 'grid', placeItems: 'center', zIndex: 100, padding: 20,
      backdropFilter: 'blur(2px)',
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()}
        style={{
          background: 'var(--bg-raised)', borderRadius: 14,
          maxWidth: 540, width: '100%', padding: 32,
          boxShadow: '0 30px 80px rgba(0,0,0,0.3)',
        }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16, marginBottom: 18 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 10,
            background: 'var(--accent)', color: 'var(--ink)',
            display: 'grid', placeItems: 'center', flexShrink: 0,
            border: '1px solid var(--ink)',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
              <polyline points="14 2 14 8 20 8"/>
              <polyline points="9 14 11 16 15 12"/>
            </svg>
          </div>
          <div style={{ flex: 1 }}>
            <h2 style={{ fontFamily: 'var(--serif)', fontSize: 22, marginBottom: 4 }}>Before we send this order</h2>
            <p style={{ margin: 0, color: 'var(--ink-soft)', fontSize: 14 }}>
              Please confirm you are sending the following with the cabinets:
            </p>
          </div>
        </div>

        <ul style={{ listStyle: 'none', padding: 0, margin: '20px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { t: 'All face frames', s: 'Every face frame from every cabinet in the order.' },
            { t: 'At least one side panel (if available)', s: 'Preferably a finished side so we can color-match.' },
            { t: 'All drawers and slides', s: 'Including hardware — track on slides, screws, anything attached.' },
          ].map((it, i) => (
            <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--rule)' }}>
              <div style={{
                width: 22, height: 22, borderRadius: '50%',
                background: 'var(--accent)', color: 'var(--ink)',
                display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 1,
              }}>
                <Icon.Check/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 500, fontSize: 14 }}>{it.t}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{it.s}</div>
              </div>
            </li>
          ))}
        </ul>

        <div style={{ background: 'var(--accent-soft)', border: '1px solid var(--accent)', borderRadius: 8, padding: '12px 14px', fontSize: 13, color: 'var(--ink)', marginBottom: 20 }}>
          <strong>Why we need this:</strong> face frames define the profile, side panels confirm color match, and intact drawer hardware lets us replicate the original action and fit.
        </div>

        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
          <button className="btn ghost" onClick={onClose}>Back to cabinets</button>
          <button className="btn primary" onClick={onProceed}>OK — review the order <Icon.ArrowR/></button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Small reusable controls
// ============================================================
function DimField({ label, value, unit, onValue, onUnit }) {
  return (
    <div className="field">
      <label>{label}</label>
      <div style={{ display: 'flex', gap: 6 }}>
        <input className="input mono" value={value || ''} onChange={e => onValue(e.target.value)} placeholder="0"/>
        <select className="select" style={{ width: 72 }} value={unit || 'in'} onChange={e => onUnit(e.target.value)}>
          <option>in</option><option>mm</option>
        </select>
      </div>
    </div>
  );
}

function NumberStepper({ value, onChange }) {
  const v = parseInt(value) || 0;
  return (
    <div className="qty-box" style={{ width: 'fit-content' }}>
      <button onClick={() => onChange(Math.max(0, v - 1))}><Icon.Minus/></button>
      <input value={v}
        onChange={e => onChange(Math.max(0, parseInt(e.target.value) || 0))}/>
      <button onClick={() => onChange(v + 1)}><Icon.Plus/></button>
    </div>
  );
}

function PhotoCaptureButton({ kind, onSet }) {
  const ref = useRef(null);
  const onFile = (e) => {
    const f = e.target.files?.[0];
    if (!f) return;
    const reader = new FileReader();
    reader.onload = () => onSet(reader.result);
    reader.readAsDataURL(f);
  };
  return (
    <>
      <button className="btn primary" onClick={() => ref.current?.click()}>
        {kind === 'camera' ? <><Icon.Camera/> Take photo</> : <><Icon.Upload/> Upload</>}
      </button>
      <input ref={ref} type="file" accept="image/*"
        capture={kind === 'camera' ? 'environment' : undefined}
        onChange={onFile} style={{ display: 'none' }}/>
    </>
  );
}

function makeCabinet(n) {
  return {
    id: 'cab_' + Date.now() + '_' + n,
    name: '',
    photo: null,
    annotations: [],
    w: '', wu: 'in', h: '', hu: 'in', d: '', du: 'in',
    doors: 0, drawers: 0, shelves: 0,
    shelfW: '', shelfD: '', shelfU: 'in',
    finishedSide: 'No', finishedWhich: '',
    boxMaterial: '', boxMaterialOther: '', boxThickness: '',
    cabType: 'Standard wall',
    notes: '',
  };
}

// Placeholder photo
const PLACEHOLDER_PHOTO = 'data:image/svg+xml;utf8,' + encodeURIComponent(`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <linearGradient id="wood" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#8b5e3c"/>
      <stop offset="0.3" stop-color="#a77349"/>
      <stop offset="0.5" stop-color="#965f38"/>
      <stop offset="0.7" stop-color="#a77349"/>
      <stop offset="1" stop-color="#7a5030"/>
    </linearGradient>
    <pattern id="grain" patternUnits="userSpaceOnUse" width="4" height="80">
      <rect width="4" height="80" fill="url(#wood)" opacity="0.3"/>
      <line x1="2" y1="0" x2="2" y2="80" stroke="#5a3a20" stroke-width="0.5" opacity="0.4"/>
    </pattern>
  </defs>
  <rect width="800" height="600" fill="#d4c9b8"/>
  <rect x="100" y="80" width="600" height="440" fill="url(#wood)" stroke="#5a3a20" stroke-width="3"/>
  <rect x="120" y="100" width="560" height="400" fill="url(#grain)"/>
  <rect x="140" y="120" width="260" height="360" fill="url(#wood)" stroke="#5a3a20" stroke-width="1.5"/>
  <rect x="410" y="120" width="260" height="360" fill="url(#wood)" stroke="#5a3a20" stroke-width="1.5"/>
  <circle cx="380" cy="300" r="6" fill="#3a2510"/>
  <circle cx="430" cy="300" r="6" fill="#3a2510"/>
  <ellipse cx="270" cy="450" rx="50" ry="14" fill="#3a2510" opacity="0.6"/>
</svg>
`);

Object.assign(window, { ClientStep, CabinetsStep, PLACEHOLDER_PHOTO, makeCabinet });