// Browser-framed placeholder mocks for the 4 product screenshots.
// Drop real screenshots into ../assets/ and replace each <Placeholder*> with
// <img src="../assets/dispatch.png" /> inside <BrowserFrame>.

function BrowserFrame({ url, children, accent = 'green' }) {
  return (
    <div style={{
      background: 'var(--rac-surface)',
      border: '1px solid var(--rac-line)',
      borderRadius: 14,
      overflow: 'hidden',
      boxShadow: '0 1px 0 rgba(15,20,17,0.03)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        padding: '12px 16px',
        borderBottom: '1px solid var(--rac-line-soft)',
        background: 'var(--rac-surface-2)',
      }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#d6cfbf' }}/>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#d6cfbf' }}/>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: '#d6cfbf' }}/>
        <div style={{
          marginLeft: 18, fontFamily: 'var(--rac-mono)',
          fontSize: 11, color: 'var(--rac-ink-4)',
        }}>{url}</div>
      </div>
      {children}
    </div>
  );
}

// Shared card styling — mirrors the product's shadcn/ui rounded-2xl + soft elevation.
const cardStyle = {
  background: 'var(--rac-surface)',
  borderRadius: 16,
  border: '1px solid rgba(15,20,17,0.06)',
  boxShadow: '0 1px 0 rgba(15,20,17,0.03), 0 14px 32px -18px rgba(15,20,17,0.10)',
};
const sectionLabelStyle = {
  fontSize: 11,
  fontWeight: 600,
  textTransform: 'uppercase',
  letterSpacing: '0.08em',
  color: 'var(--rac-ink-4)',
};
const tabularStyle = { fontFeatureSettings: '"tnum","cv11"', fontVariantNumeric: 'tabular-nums' };

// 1) Dispatch — the same DispatchMini, scaled up.
function PlaceholderDispatch() {
  const techs = [
    { name: 'Mike Summit',  grad: ['#b9583e','#6b3f5c'], role: 'Senior tech', jobs: [
      { t:'8:00',  w: 18, label:'AC tune-up · Marin',     tone:'green', meta:'Lafayette · 1.5h' },
      { t:'10:30', w: 16, label:'No-cool · Wexler',       tone:'amber' },
      { t:'13:00', w: 22, label:'Install · Gutierrez',    tone:'green', meta:'$8,420 · 4h' },
    ]},
    { name: 'Jake Ramirez', grad: ['#6b3f5c','#4a5560'], role: 'Tech', jobs: [
      { t:'8:30',  w: 14, label:'Furnace inspect · Lee',  tone:'slate' },
      { t:'11:30', w: 12, label:'Diagnostic · Park',      tone:'plum'  },
      { t:'14:00', w: 18, label:'Membership svc',         tone:'green' },
    ]},
    { name: 'Sarah Torres', grad: ['#6f7a3a','#0e7c5a'], role: 'Tech', jobs: [
      { t:'9:00',  w: 14, label:'Estimate · Han',         tone:'plum'  },
      { t:'12:00', w: 24, label:'Heat pump install',      tone:'green', meta:'$11,200 · 5h' },
    ]},
    { name: 'Diego Patel',  grad: ['#4a5560','#39444f'], role: 'Apprentice', jobs: [
      { t:'8:00',  w: 14, label:'No-heat · Brubaker',     tone:'amber' },
      { t:'11:00', w: 16, label:'Membership · Kaur',      tone:'green', meta:'Lafayette · 1h' },
      { t:'14:30', w: 14, label:'Repair · Owens',         tone:'slate' },
    ]},
    { name: 'Tess Hwang',   grad: ['#0e7c5a','#14916b'], role: 'Tech', jobs: [
      { t:'9:30',  w: 16, label:'Estimate · Pereira',     tone:'plum'  },
      { t:'13:30', w: 16, label:'Tune-up · Kim',          tone:'green' },
    ]},
  ];
  const toneBg = { green:'#e6efe8', amber:'#f4ebd7', slate:'#e3e7eb', plum:'#ebe1e7' };
  const toneFg = { green:'#2c5a3c', amber:'#7a5215', slate:'#39444f', plum:'#5a3450' };
  const toneBar = { green:'#0e7c5a', amber:'#b07a16', slate:'#4a5560', plum:'#6b3f5c' };
  const unassigned = [
    { label: 'No-cool · Ortega',     win: 'Today, before 12pm', urgent: true  },
    { label: 'Tune-up · Whitfield',  win: 'Today, pm window',   urgent: false },
    { label: 'Estimate · Bao',       win: 'Fri, open',          urgent: false },
  ];

  return (
    <div style={{
      background: 'var(--rac-surface-2)', padding: 24,
    }}>
      <div style={{ ...cardStyle, overflow: 'hidden' }}>
        {/* Toolbar */}
        <div style={{
          padding: '18px 24px', display: 'flex', alignItems: 'center', gap: 14,
          flexWrap: 'wrap',
        }}>
          <div style={{
            fontFamily: 'var(--rac-display)', fontSize: 17, fontWeight: 600,
            letterSpacing: '-0.012em', color: 'var(--rac-ink)',
          }}>Dispatch</div>
          <div style={{
            fontSize: 12, color: 'var(--rac-ink-4)', ...tabularStyle,
          }}>Thu, Nov 12 · 14 scheduled · 3 unassigned</div>
          <div style={{
            marginLeft: 'auto', display: 'inline-flex',
            background: 'var(--rac-surface-2)', borderRadius: 999, padding: 3, gap: 2,
          }}>
            {['Day','Week','Map'].map((t,i) => (
              <span key={t} style={{
                padding: '5px 14px', borderRadius: 999,
                fontSize: 12, fontWeight: 500,
                background: i===0 ? 'var(--rac-surface)' : 'transparent',
                color: i===0 ? 'var(--rac-ink)' : 'var(--rac-ink-3)',
                boxShadow: i===0 ? '0 1px 2px rgba(15,20,17,0.06)' : 'none',
              }}>{t}</span>
            ))}
          </div>
        </div>

        {/* Unassigned strip — the friction. */}
        <div style={{
          margin: '0 24px 16px', padding: '12px 14px',
          display: 'flex', alignItems: 'center', gap: 12,
          background: 'rgba(244,235,215,0.45)',
          borderRadius: 12,
          flexWrap: 'wrap',
        }}>
          <div style={{ ...sectionLabelStyle, color: '#7a5215' }}>Unassigned · 3</div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {unassigned.map((u, i) => (
              <div key={i} style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 11px',
                background: 'var(--rac-surface)',
                border: '1px dashed rgba(176,122,22,0.35)',
                borderRadius: 10,
                fontSize: 12, color: 'var(--rac-ink-2)',
              }}>
                {u.urgent && (
                  <span style={{
                    width: 6, height: 6, borderRadius: '50%',
                    background: '#c8423a', flex: '0 0 auto',
                  }}/>
                )}
                <span style={{ fontWeight: 500 }}>{u.label}</span>
                <span style={{ fontSize: 11, color: 'var(--rac-ink-4)' }}>{u.win}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Schedule grid (scrolls horizontally on small screens) */}
        <div className="dispatch-scroll">
        <div className="dispatch-grid" style={{
          display: 'grid', gridTemplateColumns: '180px repeat(10, 1fr)',
        }}>
          <div/>
          {['8','9','10','11','12','1','2','3','4','5'].map((h,i) => (
            <div key={h} style={{
              padding: '8px 10px',
              fontSize: 11, color: 'var(--rac-ink-4)', fontWeight: 500,
              borderBottom: '1px solid rgba(15,20,17,0.05)',
              ...tabularStyle,
            }}>{h}{i < 4 ? 'AM' : 'PM'}</div>
          ))}
          {techs.map((tech, idx) => (
            <React.Fragment key={tech.name}>
              <div style={{
                padding: '14px 16px 14px 24px',
                borderBottom: idx < techs.length-1 ? '1px solid rgba(15,20,17,0.04)' : 'none',
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: `linear-gradient(135deg, ${tech.grad[0]}, ${tech.grad[1]})`,
                  color: '#fff',
                  fontSize: 11, fontWeight: 600,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flex: '0 0 auto',
                }}>{tech.name.split(' ').map(n=>n[0]).join('')}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{
                    fontSize: 13, fontWeight: 600, color: 'var(--rac-ink)',
                    overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis',
                  }}>{tech.name}</div>
                  <div style={{
                    fontSize: 10.5, color: 'var(--rac-ink-4)', marginTop: 1,
                    display: 'flex', alignItems: 'center', gap: 6,
                  }}>
                    <span style={{ textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 500 }}>{tech.role}</span>
                    <span style={tabularStyle}>· {tech.jobs.length} jobs</span>
                  </div>
                </div>
              </div>
              <div style={{
                gridColumn: 'span 10',
                borderBottom: idx < techs.length-1 ? '1px solid rgba(15,20,17,0.04)' : 'none',
                position: 'relative', minHeight: 60,
                background: idx % 2 ? 'transparent' : 'rgba(241,239,232,0.35)',
              }}>
                {tech.jobs.map((j,i) => {
                  const [hh, mm] = j.t.split(':').map(Number);
                  const left = (hh - 8 + (mm||0)/60) * 10;
                  return (
                    <div key={i} style={{
                      position: 'absolute', top: 10, bottom: 10,
                      left: `${left}%`, width: `${j.w}%`,
                      background: toneBg[j.tone], color: toneFg[j.tone],
                      borderLeft: `3px solid ${toneBar[j.tone]}`,
                      borderRadius: 10,
                      boxShadow: '0 1px 2px rgba(15,20,17,0.04)',
                      padding: '7px 11px',
                      fontSize: 11.5, fontWeight: 500, lineHeight: 1.25,
                      overflow: 'hidden',
                    }}>
                      <div style={{ fontSize: 10, opacity: 0.6, ...tabularStyle }}>{j.t}</div>
                      <div style={{ whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }}>{j.label}</div>
                      {j.meta && (
                        <div style={{
                          fontSize: 10, opacity: 0.55, marginTop: 1,
                          whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden',
                          ...tabularStyle,
                        }}>{j.meta}</div>
                      )}
                    </div>
                  );
                })}
              </div>
            </React.Fragment>
          ))}
        </div>
        </div>
      </div>
    </div>
  );
}

// 2) Memberships — owner dashboard. Active members, MRR, renewals, at-risk.
function PlaceholderMembership() {
  const stats = [
    { label: 'Active members',     value: '27',     sub: '+2 this month',                  tone: 'plain' },
    { label: 'Recurring revenue',  value: '$548',   sub: '+$284 since Jan',                tone: 'plain' },
    { label: 'Renewing this month', value: '3',     sub: 'across 2 plans',                 tone: 'plain' },
    { label: 'At risk',            value: '1',      sub: 'payment failed · retry pending', tone: 'risk' },
  ];
  // 12 months of recurring revenue (dollars) — quiet upward line.
  const mrr = [264, 295, 312, 348, 376, 405, 432, 458, 478, 498, 522, 548];
  const mrrMin = 240, mrrMax = 580;
  const months = ['J','F','M','A','M','J','J','A','S','O','N','D'];
  const renewals = [
    { name: 'Marin, Carla',    plan: 'Gold',   tone: '#7a5215', mrr: '$24', renews: 'Dec 02', last: 'Nov 14', status: null },
    { name: 'Wexler, Jonathan',plan: 'Silver', tone: '#39444f', mrr: '$19', renews: 'Dec 04', last: 'Nov 06', status: { dot: '#b07a16', label: 'Payment failed · retry Nov 16' } },
  ];
  const planBg = { Gold: '#f4ebd7', Silver: '#e3e7eb', Bronze: '#f3e2db' };
  const planFg = { Gold: '#7a5215', Silver: '#39444f', Bronze: '#8a3520' };
  const tuneups = [
    { name: 'Marin, Carla',     date: 'Apr 18' },
    { name: 'Han, Daniel',      date: 'Apr 22' },
    { name: 'Kim, Michael',     date: 'Apr 26' },
    { name: 'Pereira, Lucia',   date: 'May 04' },
  ];

  return (
    <div style={{
      background: 'var(--rac-surface-2)',
      padding: 24,
      display: 'flex', flexDirection: 'column', gap: 20,
    }}>
      {/* ── Stat tiles ──────────────────────────────────────── */}
      <div className="membership-stats" style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14,
      }}>
        {stats.map(s => (
          <div key={s.label} style={{
            ...cardStyle,
            padding: '18px 20px',
            background: s.tone === 'risk' ? 'rgba(244,235,215,0.55)' : 'var(--rac-surface)',
            borderColor: s.tone === 'risk' ? 'rgba(176,122,22,0.20)' : 'rgba(15,20,17,0.06)',
          }}>
            <div style={{
              fontSize: 11, color: s.tone === 'risk' ? '#7a5215' : 'var(--rac-ink-4)',
              textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600,
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              {s.tone === 'risk' && (
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#b07a16' }}/>
              )}
              {s.label}
            </div>
            <div style={{
              marginTop: 6,
              fontFamily: 'var(--rac-display)', fontSize: 28, fontWeight: 600,
              letterSpacing: '-0.018em', color: 'var(--rac-ink)',
              ...tabularStyle,
            }}>{s.value}</div>
            <div style={{
              marginTop: 4,
              fontSize: 11.5, color: s.tone === 'risk' ? '#7a5215' : 'var(--rac-ink-4)',
            }}>{s.sub}</div>
          </div>
        ))}
      </div>

      {/* ── Chart + tune-ups row ────────────────────────────── */}
      <div className="customers-split" style={{
        display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20,
        alignItems: 'stretch',
      }}>
        {/* MRR chart card */}
        <div style={{ ...cardStyle, padding: '22px 26px', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div>
              <div style={sectionLabelStyle}>Recurring revenue</div>
              <div style={{
                marginTop: 4, fontSize: 12, color: 'var(--rac-ink-4)',
              }}>Last 12 months</div>
            </div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 999,
              background: 'var(--rac-green-50)', color: 'var(--rac-green-900)',
              fontSize: 11.5, fontWeight: 600,
            }}>
              <span style={{ fontSize: 10 }}>↑</span>
              <span style={tabularStyle}>+$284 since Jan</span>
            </div>
          </div>

          {/* Bars */}
          <div style={{
            marginTop: 22, height: 120,
            display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)',
            gap: 8, alignItems: 'flex-end',
          }}>
            {mrr.map((v, i) => {
              const pct = ((v - mrrMin) / (mrrMax - mrrMin)) * 100;
              const isLast = i === mrr.length - 1;
              return (
                <div key={i} style={{
                  height: `${pct}%`,
                  borderRadius: 6,
                  background: isLast ? 'var(--rac-green)' : 'var(--rac-green-100)',
                }}/>
              );
            })}
          </div>
          <div style={{
            marginTop: 8,
            display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)',
            gap: 8,
            fontSize: 10.5, color: 'var(--rac-ink-4)',
            textAlign: 'center', ...tabularStyle,
          }}>
            {months.map((m, i) => (
              <span key={i} style={{
                fontWeight: i === months.length - 1 ? 600 : 400,
                color: i === months.length - 1 ? 'var(--rac-ink-2)' : 'var(--rac-ink-4)',
              }}>{m}</span>
            ))}
          </div>
        </div>

        {/* Tune-ups due */}
        <div style={{ ...cardStyle, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: '18px 22px 12px' }}>
            <div style={sectionLabelStyle}>Tune-ups due this month</div>
            <div style={{ marginTop: 4, fontSize: 11.5, color: 'var(--rac-ink-4)' }}>
              {tuneups.length} members · plan visits
            </div>
          </div>
          <div style={{ flex: 1 }}>
            {tuneups.map((t, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 22px',
                borderTop: '1px solid rgba(15,20,17,0.05)',
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 12.5, fontWeight: 500, color: 'var(--rac-ink)',
                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  }}>{t.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--rac-ink-4)', marginTop: 1, ...tabularStyle }}>
                    {t.date}
                  </div>
                </div>
                <button className="rac btn" style={{
                  height: 26, padding: '0 10px', fontSize: 11.5,
                  background: 'var(--rac-surface)', color: 'var(--rac-ink-2)',
                  border: '1px solid rgba(15,20,17,0.10)',
                  borderRadius: 8, fontWeight: 500,
                }}>Schedule</button>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* ── Upcoming renewals table ─────────────────────────── */}
      <div style={{ ...cardStyle, overflow: 'hidden' }}>
        <div style={{
          padding: '18px 24px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        }}>
          <div>
            <div style={sectionLabelStyle}>Upcoming renewals</div>
            <div style={{ marginTop: 4, fontSize: 12, color: 'var(--rac-ink-4)' }}>
              Next 30 days · sorted by renewal date
            </div>
          </div>
          <span style={{ fontSize: 11.5, color: 'var(--rac-ink-4)', ...tabularStyle }}>
            3 total
          </span>
        </div>
        {/* Header */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '2fr 88px 64px 80px 80px 1.4fr',
          gap: 14, padding: '8px 24px',
          background: 'rgba(241,239,232,0.55)',
          borderTop: '1px solid rgba(15,20,17,0.05)',
          borderBottom: '1px solid rgba(15,20,17,0.05)',
          fontSize: 10.5, fontWeight: 600,
          textTransform: 'uppercase', letterSpacing: '0.06em',
          color: 'var(--rac-ink-4)',
        }}>
          <span>Customer</span>
          <span>Plan</span>
          <span style={{ textAlign: 'right' }}>Revenue</span>
          <span>Renews</span>
          <span>Last contact</span>
          <span>Status</span>
        </div>
        {/* Rows */}
        {renewals.map((r, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: '2fr 88px 64px 80px 80px 1.4fr',
            gap: 14, padding: '12px 24px',
            borderBottom: i < renewals.length - 1 ? '1px solid rgba(15,20,17,0.04)' : 'none',
            fontSize: 13, alignItems: 'center',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                background: `linear-gradient(135deg, ${r.tone}, #4a5560)`,
                color: '#fff', fontSize: 10.5, fontWeight: 600,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flex: '0 0 auto',
              }}>{r.name.split(',')[0].slice(0,1)}{r.name.split(' ').slice(-1)[0].slice(0,1)}</div>
              <span style={{
                color: 'var(--rac-ink)', fontWeight: 500,
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }}>{r.name}</span>
            </div>
            <span style={{
              display: 'inline-flex', alignItems: 'center',
              height: 22, padding: '0 9px', borderRadius: 999,
              fontSize: 11, fontWeight: 600,
              background: planBg[r.plan], color: planFg[r.plan],
              alignSelf: 'center', width: 'fit-content',
            }}>{r.plan}</span>
            <span style={{ textAlign: 'right', color: 'var(--rac-ink)', fontWeight: 500, ...tabularStyle }}>{r.mrr}</span>
            <span style={{ color: 'var(--rac-ink-2)', ...tabularStyle }}>{r.renews}</span>
            <span style={{ color: 'var(--rac-ink-4)', ...tabularStyle }}>{r.last}</span>
            {r.status ? (
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                fontSize: 11.5,
                color: r.status.muted ? 'var(--rac-ink-4)' : 'var(--rac-ink-2)',
                fontStyle: r.status.muted ? 'normal' : 'normal',
                minWidth: 0,
              }}>
                <span style={{
                  width: 7, height: 7, borderRadius: '50%',
                  background: r.status.dot, flex: '0 0 auto',
                }}/>
                <span style={{
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>{r.status.label}</span>
              </span>
            ) : (
              <span style={{ color: 'var(--rac-ink-4)' }}>—</span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// 2b) Original customer list — kept as a reference, no longer rendered.
function PlaceholderCustomers() {
  const rows = [
    { name: 'Marin, Carla',     city: 'Lafayette, CO',   eq: 'Carrier 24ABC6 · 2019',     mem: 'Gold',  bal: '$0',     last: 'Oct 14' },
    { name: 'Wexler, Jonathan', city: 'Boulder, CO',     eq: 'Trane XR16 · 2014',         mem: '—',     bal: '$842',   last: 'Nov 06' },
    { name: 'Pereira, Lucia',   city: 'Louisville, CO',  eq: 'Lennox EL296V · 2021',      mem: 'Silver',bal: '$0',     last: 'Aug 22' },
    { name: 'Han, Daniel',      city: 'Boulder, CO',     eq: 'Goodman GMSS96 · 2017',     mem: '—',     bal: '$0',     last: 'Sep 30' },
    { name: 'Brubaker, Eve',    city: 'Erie, CO',        eq: 'Mitsubishi MZ-FH · 2022',   mem: 'Gold',  bal: '$0',     last: 'Oct 28' },
    { name: 'Owens, Ray',       city: 'Longmont, CO',    eq: 'Rheem RA17 · 2016',         mem: '—',     bal: '$1,210', last: 'Nov 02' },
    { name: 'Kaur, Simran',     city: 'Lafayette, CO',   eq: 'Carrier 25HCB6 · 2020',     mem: 'Bronze',bal: '$0',     last: 'Sep 12' },
    { name: 'Kim, Michael',     city: 'Boulder, CO',     eq: 'Trane S9V2 · 2023',         mem: 'Gold',  bal: '$0',     last: 'Oct 30' },
  ];
  return (
    <div className="customers-split" style={{ background: 'var(--rac-surface)', display: 'grid', gridTemplateColumns: '1.4fr 1fr' }}>
      {/* List */}
      <div style={{ borderRight: '1px solid var(--rac-line-soft)' }}>
        <div style={{
          padding: '14px 22px', display: 'flex', alignItems: 'center', gap: 14,
          borderBottom: '1px solid var(--rac-line-soft)',
        }}>
          <div className="rac eyebrow" style={{ color: 'var(--rac-ink)' }}>Customers</div>
          <span style={{ color: 'var(--rac-ink-4)' }}>·</span>
          <div style={{ fontFamily: 'var(--rac-mono)', fontSize: 11, color: 'var(--rac-ink-3)' }}>
            2,418 RECORDS
          </div>
          <div style={{
            marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8,
            padding: '5px 12px', border: '1px solid var(--rac-line)',
            borderRadius: 999, fontSize: 12, color: 'var(--rac-ink-4)',
            fontFamily: 'var(--rac-mono)',
          }}>
            ⌘K · search by name, address, equipment
          </div>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
          <thead>
            <tr style={{
              fontFamily: 'var(--rac-mono)', fontSize: 10,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'var(--rac-ink-4)',
            }}>
              <th style={{ textAlign:'left', padding:'10px 22px', borderBottom:'1px solid var(--rac-line-soft)', fontWeight:500 }}>Customer</th>
              <th style={{ textAlign:'left', padding:'10px 12px', borderBottom:'1px solid var(--rac-line-soft)', fontWeight:500 }}>Equipment</th>
              <th style={{ textAlign:'left', padding:'10px 12px', borderBottom:'1px solid var(--rac-line-soft)', fontWeight:500 }}>Plan</th>
              <th style={{ textAlign:'right', padding:'10px 22px', borderBottom:'1px solid var(--rac-line-soft)', fontWeight:500 }}>Balance</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r,i) => (
              <tr key={r.name} style={{
                background: i === 1 ? 'var(--rac-green-50)' : 'transparent',
              }}>
                <td style={{ padding:'12px 22px', borderBottom:'1px solid var(--rac-line-soft)' }}>
                  <div style={{ fontWeight: 600, color: 'var(--rac-ink)' }}>{r.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--rac-ink-4)' }}>{r.city}</div>
                </td>
                <td style={{ padding:'12px 12px', borderBottom:'1px solid var(--rac-line-soft)', color: 'var(--rac-ink-3)' }}>{r.eq}</td>
                <td style={{ padding:'12px 12px', borderBottom:'1px solid var(--rac-line-soft)' }}>
                  {r.mem === '—'
                    ? <span style={{ color:'var(--rac-ink-4)' }}>—</span>
                    : <span style={{
                        display:'inline-flex', alignItems:'center',
                        height: 22, padding:'0 9px', borderRadius: 999,
                        fontSize: 11, fontWeight: 500,
                        background: r.mem==='Gold' ? '#f4ebd7' : r.mem==='Silver' ? '#e3e7eb' : '#f3e2db',
                        color:    r.mem==='Gold' ? '#7a5215' : r.mem==='Silver' ? '#39444f' : '#8a3520',
                      }}>{r.mem}</span>
                  }
                </td>
                <td style={{
                  padding:'12px 22px', borderBottom:'1px solid var(--rac-line-soft)',
                  textAlign:'right', fontFamily: 'var(--rac-mono)',
                  color: r.bal === '$0' ? 'var(--rac-ink-4)' : 'var(--rac-terracotta)',
                  fontWeight: r.bal === '$0' ? 400 : 600,
                }}>{r.bal}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {/* Detail */}
      <div style={{ background: 'var(--rac-surface-2)', padding: '20px 22px' }}>
        <div className="rac eyebrow" style={{ color: 'var(--rac-ink-4)', marginBottom: 6 }}>Customer · #C-2114</div>
        <div style={{ fontFamily:'var(--rac-display)', fontSize: 22, fontWeight: 600, letterSpacing:'-0.012em', color:'var(--rac-ink)' }}>
          Wexler, Jonathan
        </div>
        <div style={{ fontSize: 12.5, color:'var(--rac-ink-3)', marginTop: 4 }}>
          1422 Pine St · Boulder, CO 80302 · (303) 555-0142
        </div>
        <div style={{
          marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--rac-line)',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14,
        }}>
          {[
            ['Equipment', 'Trane XR16'], ['Installed', '2014'],
            ['Last visit', 'Nov 06'],    ['Lifetime', '$8,420'],
          ].map(([k,v]) => (
            <div key={k}>
              <div style={{ fontFamily:'var(--rac-mono)', fontSize: 9.5, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--rac-ink-4)' }}>{k}</div>
              <div style={{ fontSize: 13, color: 'var(--rac-ink-2)', marginTop: 3 }}>{v}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 18, paddingTop: 14, borderTop: '1px solid var(--rac-line)' }}>
          <div className="rac eyebrow" style={{ color: 'var(--rac-ink-4)', marginBottom: 8 }}>Service history</div>
          {[
            { d: 'Nov 06', l: 'Diagnostic — capacitor replaced', a: '$284' },
            { d: 'Aug 12', l: 'AC tune-up',                       a: '$149' },
            { d: 'Mar 04', l: 'No-cool — refrigerant top-off',    a: '$412' },
            { d: 'Oct 18', l: 'Furnace inspect',                  a: '$0'   },
          ].map(h => (
            <div key={h.d} style={{
              display:'flex', justifyContent:'space-between',
              padding: '8px 0', borderBottom: '1px solid var(--rac-line-soft)',
              fontSize: 12.5,
            }}>
              <span style={{ fontFamily:'var(--rac-mono)', color:'var(--rac-ink-4)', width: 56 }}>{h.d}</span>
              <span style={{ flex:1, color:'var(--rac-ink-2)' }}>{h.l}</span>
              <span style={{ fontFamily:'var(--rac-mono)', color: h.a==='$0' ? 'var(--rac-ink-4)' : 'var(--rac-ink-2)' }}>{h.a}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// 3) Estimates → Invoices: split panel showing the conversion.
function PlaceholderEstimate() {
  const tiers = [
    { tier: 'good',   label: 'Good',   title: '14 SEER · 2-stage',     price: '$4,890', picked: false },
    { tier: 'better', label: 'Better', title: '16 SEER · variable',    price: '$6,420', picked: true  },
    { tier: 'best',   label: 'Best',   title: '18 SEER · full + IAQ',  price: '$8,920', picked: false },
  ];
  const items = [
    { d: 'Carrier 25HCB6 · 3-ton condenser', qty: '1',    price: '$3,200',  total: '$3,200' },
    { d: 'Air handler · variable-speed',     qty: '1',    price: '$1,400',  total: '$1,400' },
    { d: 'Refrigerant line set, 3/8 × 7/8',  qty: '35\'', price: '$9.00',   total: '$315'   },
    { d: 'Labor — install & commission',     qty: '6h',   price: '$148',    total: '$888'   },
    { d: 'Permit + inspection',              qty: '1',    price: '$185',    total: '$185'   },
  ];

  return (
    <div className="estimate-split" style={{
      background: 'var(--rac-surface-2)',
      padding: 24,
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 20,
      alignItems: 'start',
    }}>
      {/* ─── LEFT — Approved estimate ──────────────────────── */}
      <div style={{ ...cardStyle, overflow: 'hidden', minWidth: 0 }}>
        {/* Header */}
        <div style={{ padding: '20px 24px 14px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
            <span style={{ ...sectionLabelStyle, color: 'var(--rac-ink-3)' }}>Estimate</span>
            <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--rac-ink)', ...tabularStyle }}>EST-2087</span>
            <span style={{
              marginLeft: 'auto',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 999,
              background: 'var(--rac-status-ok-bg)', color: 'var(--rac-status-ok-fg)',
              fontSize: 11, fontWeight: 600,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#2c5a3c' }}/>
              Approved
            </span>
          </div>
          <div style={{
            marginTop: 10,
            fontFamily: 'var(--rac-display)', fontSize: 20, fontWeight: 600,
            letterSpacing: '-0.012em', color: 'var(--rac-ink)',
          }}>Marin, Carla</div>
          <div style={{ fontSize: 12, color: 'var(--rac-ink-4)', marginTop: 2 }}>
            AC system replacement · 3-ton
          </div>

          {/* Status flow stepper */}
          <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
            {[
              { label: 'Drafted',  done: true },
              { label: 'Sent',     done: true },
              { label: 'Viewed',   done: true },
              { label: 'Approved', done: true },
            ].map((s, i, arr) => (
              <React.Fragment key={s.label}>
                {i > 0 && <div style={{ height: 1, width: 16, background: 'rgba(14,124,90,0.30)' }}/>}
                <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                  <div style={{
                    width: 16, height: 16, borderRadius: '50%',
                    background: 'var(--rac-green)', color: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 9, fontWeight: 700,
                  }}>✓</div>
                  <span style={{
                    fontSize: 11.5,
                    fontWeight: i === arr.length - 1 ? 600 : 400,
                    color: i === arr.length - 1 ? 'var(--rac-ink)' : 'var(--rac-ink-3)',
                  }}>{s.label}</span>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* Tier picker — compact 3-up */}
        <div style={{ padding: '0 24px 12px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
            {tiers.map(t => (
              <div key={t.tier} style={{
                position: 'relative',
                padding: '11px 11px 10px',
                borderRadius: 12,
                border: t.picked ? '2px solid var(--rac-green)' : '1px solid rgba(15,20,17,0.08)',
                background: t.picked ? 'var(--rac-green-50)' : 'var(--rac-surface)',
              }}>
                {t.picked && (
                  <span style={{
                    position: 'absolute', top: -8, right: 10,
                    width: 18, height: 18, borderRadius: '50%',
                    background: 'var(--rac-green)', color: '#fff',
                    fontSize: 10, fontWeight: 700,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>✓</span>
                )}
                <div style={{
                  fontSize: 10, color: 'var(--rac-ink-4)',
                  textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600,
                }}>{t.label}</div>
                <div style={{
                  marginTop: 1, fontSize: 11.5, color: 'var(--rac-ink-3)',
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>{t.title}</div>
                <div style={{
                  marginTop: 4,
                  fontFamily: 'var(--rac-display)', fontSize: 15, fontWeight: 600,
                  letterSpacing: '-0.010em', color: 'var(--rac-ink)',
                  ...tabularStyle,
                }}>{t.price}</div>
              </div>
            ))}
          </div>
        </div>

        {/* What's included in the chosen tier */}
        <div style={{
          padding: '14px 24px 16px',
          borderTop: '1px solid rgba(15,20,17,0.05)',
        }}>
          <div style={sectionLabelStyle}>What's included · Better</div>
          <div style={{
            marginTop: 10,
            display: 'grid', gridTemplateColumns: '1fr 1fr', columnGap: 14, rowGap: 8,
            fontSize: 12.5, color: 'var(--rac-ink-2)',
          }}>
            {[
              'Carrier 25HCB6 · 16 SEER',
              'Variable-speed air handler',
              'New refrigerant line set',
              'Permit + inspection',
              '10-yr parts warranty',
              'Removal of old system',
            ].map(b => (
              <div key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                <span style={{
                  width: 14, height: 14, borderRadius: '50%',
                  background: 'rgba(14,124,90,0.10)', color: 'var(--rac-green)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 9, fontWeight: 700, flex: '0 0 auto', marginTop: 2,
                }}>✓</span>
                <span style={{ minWidth: 0 }}>{b}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Customer chose label + signed footer */}
        <div style={{
          padding: '14px 24px',
          background: 'var(--rac-green-50)',
          borderTop: '1px solid rgba(14,124,90,0.12)',
        }}>
          <div style={{
            fontSize: 12, color: 'var(--rac-green-900)', lineHeight: 1.5,
          }}>
            <span style={{ fontWeight: 600 }}>Customer picked Better.</span>
            {' '}Signed via SMS Nov 14, 2:18 PM. Deposit $1,500 charged.
          </div>
        </div>
      </div>

      {/* Flow arrow (desktop only — sits between the two cards) */}
      <div className="estimate-arrow" style={{
        position: 'absolute', display: 'none',
      }}/>

      {/* ─── RIGHT — Generated invoice document ─────────────── */}
      <div style={{ ...cardStyle, overflow: 'hidden', minWidth: 0 }}>
        {/* Doc header */}
        <div style={{
          padding: '24px 28px 18px',
          background: 'var(--rac-surface)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
            <div>
              <div style={{
                width: 28, height: 28, borderRadius: 7,
                background: 'var(--rac-green)', color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 700,
                marginBottom: 8,
              }}>R</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--rac-ink)' }}>
                Run a Call HVAC
              </div>
              <div style={{ fontSize: 11, color: 'var(--rac-ink-4)', lineHeight: 1.5, marginTop: 1 }}>
                228 Walnut St, Boulder, CO 80302<br/>
                <span style={tabularStyle}>(303) 555-0188</span> · Support@runacall.com
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{
                fontSize: 10.5, color: 'var(--rac-ink-4)',
                textTransform: 'uppercase', letterSpacing: '0.10em', fontWeight: 600,
              }}>Invoice</div>
              <div style={{
                fontFamily: 'var(--rac-display)', fontSize: 22, fontWeight: 600,
                letterSpacing: '-0.012em', color: 'var(--rac-ink)', marginTop: 2,
                ...tabularStyle,
              }}>INV-1148</div>
              <span style={{
                marginTop: 6,
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '4px 10px', borderRadius: 999,
                background: 'var(--rac-status-ok-bg)', color: 'var(--rac-status-ok-fg)',
                fontSize: 10.5, fontWeight: 600,
              }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: '#2c5a3c' }}/>
                Paid
              </span>
            </div>
          </div>
        </div>

        {/* Bill to */}
        <div style={{
          padding: '14px 28px',
          borderTop: '1px solid rgba(15,20,17,0.05)',
          borderBottom: '1px solid rgba(15,20,17,0.05)',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14,
        }}>
          <div>
            <div style={{
              fontSize: 10, color: 'var(--rac-ink-4)',
              textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600,
            }}>Bill to</div>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--rac-ink)', marginTop: 4 }}>
              Marin, Carla
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--rac-ink-3)', marginTop: 1, lineHeight: 1.45 }}>
              1422 Pine St<br/>
              Boulder, CO 80302
            </div>
          </div>
          <div>
            <div style={{
              fontSize: 10, color: 'var(--rac-ink-4)',
              textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600,
            }}>Issued · Due</div>
            <div style={{
              fontSize: 12, color: 'var(--rac-ink-2)', marginTop: 4,
              ...tabularStyle,
            }}>Nov 14, 2026</div>
            <div style={{
              fontSize: 11.5, color: 'var(--rac-ink-4)', marginTop: 2,
              ...tabularStyle,
            }}>Net 1 · Nov 15</div>
          </div>
        </div>

        {/* Line items */}
        <div>
          {items.map((it, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 84px',
              padding: '9px 28px',
              borderBottom: i < items.length - 1 ? '1px solid rgba(15,20,17,0.04)' : 'none',
              fontSize: 12.5,
              alignItems: 'baseline',
            }}>
              <div style={{ minWidth: 0 }}>
                <div style={{
                  color: 'var(--rac-ink-2)',
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>{it.d}</div>
                <div style={{ fontSize: 10.5, color: 'var(--rac-ink-4)', marginTop: 1, ...tabularStyle }}>
                  {it.qty} × {it.price}
                </div>
              </div>
              <div style={{
                textAlign: 'right', color: 'var(--rac-ink)', fontWeight: 500,
                ...tabularStyle,
              }}>{it.total}</div>
            </div>
          ))}
        </div>

        {/* Totals */}
        <div style={{
          padding: '14px 28px',
          background: 'rgba(241,239,232,0.55)',
          borderTop: '1px solid rgba(15,20,17,0.06)',
        }}>
          {[
            ['Subtotal',   '$5,988'],
            ['Tax (7.5%)', '$432'],
          ].map(([k,v]) => (
            <div key={k} style={{
              display: 'flex', justifyContent: 'space-between',
              padding: '3px 0', fontSize: 12.5,
            }}>
              <span style={{ color: 'var(--rac-ink-4)' }}>{k}</span>
              <span style={{ color: 'var(--rac-ink-2)', fontWeight: 500, ...tabularStyle }}>{v}</span>
            </div>
          ))}
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            paddingTop: 8, marginTop: 4,
            borderTop: '1px solid rgba(15,20,17,0.10)',
          }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--rac-ink)' }}>Total</span>
            <span style={{
              fontFamily: 'var(--rac-display)', fontSize: 18, fontWeight: 600,
              letterSpacing: '-0.012em', color: 'var(--rac-ink)',
              ...tabularStyle,
            }}>$6,420</span>
          </div>
        </div>

        {/* Payment confirmation strip */}
        <div style={{
          padding: '12px 28px',
          background: 'var(--rac-green-50)',
          borderTop: '1px solid rgba(14,124,90,0.15)',
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 12, color: 'var(--rac-green-900)',
        }}>
          <span style={{
            width: 16, height: 16, borderRadius: '50%',
            background: 'var(--rac-green)', color: '#fff',
            fontSize: 10, fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flex: '0 0 auto',
          }}>✓</span>
          <span>
            <span style={{ fontWeight: 600 }}>Paid in full.</span>
            {' '}Visa ending 4421 · Nov 15, 9:42 AM
          </span>
        </div>
      </div>
    </div>
  );
}

// 4) Mobile — phone bezel showing job detail / signature.
function PlaceholderMobile() {
  const screens = [
    {
      n: '01',
      step: 'Morning',
      title: "Today's schedule",
      caption: 'Greeting, day-at-a-glance, and the timeline. Next job lifts to the top — one tap to navigate or text "on my way."',
      Component: window.TodaySchedule || null,
    },
    {
      n: '02',
      step: 'On site',
      title: 'Job in progress',
      caption: 'Live timer, diagnosis findings with photos, and a checklist with the active step lit. Build the estimate without leaving the job.',
      Component: window.JobInProgress || null,
    },
    {
      n: '03',
      step: 'Close out',
      title: 'Good · Better · Best',
      caption: 'Tech presents three paths to the homeowner. Pick one — the total locks. Send by text or sign on glass. Estimate becomes invoice.',
      Component: window.EstimateCloseout || null,
    },
  ];

  return (
    <div className="mobile-screens-wrap" style={{
      background: 'var(--rac-surface-2)',
      padding: '40px 24px 24px',
    }}>
      <div className="mobile-screens-grid" style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 24,
        justifyItems: 'center',
        alignItems: 'flex-start',
      }}>
        {screens.map(s => (
          <div key={s.n} className="mobile-screen-cell" style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 36,
            width: '100%',
          }}>
            <div className="mobile-screen-frame" style={{
              width: 'calc(424px * var(--ms-scale, 0.65))',
              height: 'calc(896px * var(--ms-scale, 0.65))',
              position: 'relative',
              display: 'flex', justifyContent: 'center',
            }}>
              <div style={{
                transform: 'scale(var(--ms-scale, 0.65))',
                transformOrigin: 'top center',
                width: 424,
                position: 'absolute', left: '50%', top: 0,
                marginLeft: -212,
              }}>
                {/* iPhone bezel / casing */}
                <div style={{
                  width: 424, height: 896,
                  borderRadius: 58,
                  padding: 11,
                  background: 'linear-gradient(140deg, #2a2a2c 0%, #0a0a0a 45%, #1a1a1c 100%)',
                  boxShadow: '0 50px 90px rgba(0,0,0,0.28), 0 12px 28px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.04), inset 0 0 0 2px rgba(0,0,0,0.7)',
                  position: 'relative',
                  boxSizing: 'border-box',
                }}>
                  {/* Side buttons */}
                  <span style={{ position: 'absolute', left: -3, top: 110, width: 4, height: 32, background: '#1a1a1c', borderRadius: '2px 0 0 2px' }} />
                  <span style={{ position: 'absolute', left: -3, top: 178, width: 4, height: 64, background: '#1a1a1c', borderRadius: '2px 0 0 2px' }} />
                  <span style={{ position: 'absolute', left: -3, top: 252, width: 4, height: 64, background: '#1a1a1c', borderRadius: '2px 0 0 2px' }} />
                  <span style={{ position: 'absolute', right: -3, top: 200, width: 4, height: 100, background: '#1a1a1c', borderRadius: '0 2px 2px 0' }} />

                  {s.Component ? <s.Component /> : (
                    <div style={{
                      width: 402, height: 874, borderRadius: 48,
                      background: 'var(--rac-surface)',
                      border: '1px solid var(--rac-line)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'var(--rac-mono)', fontSize: 14, color: 'var(--rac-ink-4)',
                    }}>{s.title}</div>
                  )}
                </div>
              </div>
            </div>
            <div className="mobile-screen-caption" style={{
              maxWidth: 320, textAlign: 'left', width: '100%',
            }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 6,
              }}>
                <span style={{
                  fontFamily: 'var(--rac-mono)', fontSize: 10.5, letterSpacing: '0.12em',
                  color: 'var(--rac-ink-4)', fontWeight: 500,
                }}>{s.n}</span>
                <span style={{
                  fontFamily: 'var(--rac-mono)', fontSize: 10.5, letterSpacing: '0.16em',
                  textTransform: 'uppercase', color: 'var(--rac-green)', fontWeight: 600,
                }}>{s.step}</span>
              </div>
              <div style={{
                fontFamily: 'var(--rac-display)', fontSize: 18, fontWeight: 600,
                letterSpacing: '-0.012em', color: 'var(--rac-ink)', marginBottom: 6,
              }}>{s.title}</div>
              <div style={{
                fontSize: 13.5, lineHeight: 1.55, color: 'var(--rac-ink-3)',
              }}>{s.caption}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  BrowserFrame,
  PlaceholderDispatch,
  PlaceholderCustomers,
  PlaceholderMembership,
  PlaceholderEstimate,
  PlaceholderMobile,
});