<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<script src="store.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif; }
</style>
</helmet>
<div style="min-width:100%; min-height:100vh; width:max-content; box-sizing:border-box; padding:48px 56px 64px; background:#e7e5df; display:flex; flex-direction:column;">
  <div style="font:700 22px 'IBM Plex Sans'; color:#161b22; letter-spacing:-0.01em;">Ten31 CRM — mobile prototype</div>
  <div style="font:400 14px 'IBM Plex Sans'; color:#5a5f66; margin-top:8px; max-width:620px; line-height:1.5;">All four surfaces in one navigable app. The bottom tab bar switches between Grid, Pipeline, Reminders, and Contacts; theme and data are shared — a stage move, a logged communication, or a reminder edit on one tab shows up on the others. Tap around.</div>
  <div style="display:flex; gap:48px; align-items:flex-start; margin-top:36px;">
    <div style="display:flex; flex-direction:column; gap:16px; flex:none;">
      <div style="font:600 12px 'IBM Plex Mono'; color:#46505b; letter-spacing:0.08em; text-transform:uppercase;">Ten31 CRM · {{ tabLabel }}</div>
      <div style="width:393px; height:812px; background:#05080c; border-radius:52px; padding:11px; box-shadow:0 40px 80px -20px rgba(10,20,35,0.45), 0 0 0 2px #1c2530; flex:none;">
        <div style="width:100%; height:100%; border-radius:42px; overflow:hidden; position:relative; background:{{ frameBg }};">
          <sc-if value="{{ isGrid }}" hint-placeholder-val="{{ true }}">
            <dc-import name="GridApp" theme="{{ theme }}" variant="compact" hint-size="100%,100%"></dc-import>
          </sc-if>
          <sc-if value="{{ isPipeline }}" hint-placeholder-val="{{ false }}">
            <dc-import name="PipelineApp" theme="{{ theme }}" mode="swipe" hint-size="100%,100%"></dc-import>
          </sc-if>
          <sc-if value="{{ isReminders }}" hint-placeholder-val="{{ false }}">
            <dc-import name="RemindersApp" theme="{{ theme }}" hint-size="100%,100%"></dc-import>
          </sc-if>
          <sc-if value="{{ isContacts }}" hint-placeholder-val="{{ false }}">
            <dc-import name="ContactsApp" theme="{{ theme }}" hint-size="100%,100%"></dc-import>
          </sc-if>
        </div>
      </div>
    </div>
  </div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:620,&quot;height&quot;:980}}">
class Component extends DCLogic {
  componentDidMount() {
    if (window.T31Store) this._unsub = window.T31Store.subscribe(() => this.forceUpdate());
  }
  componentWillUnmount() { if (this._unsub) this._unsub(); }

  renderVals() {
    const S = window.T31Store || { tab: 'grid', theme: 'dark' };
    const map = { grid: 'GridApp', pipeline: 'PipelineApp', reminders: 'RemindersApp', contacts: 'ContactsApp' };
    const labels = { grid: 'Grid', pipeline: 'Pipeline', reminders: 'Reminders', contacts: 'Contacts' };
    const tab = map[S.tab] ? S.tab : 'grid';
    return {
      tabLabel: labels[tab],
      theme: S.theme,
      frameBg: S.theme === 'light' ? '#eaeef3' : '#0b1118',
      isGrid: tab === 'grid', isPipeline: tab === 'pipeline',
      isReminders: tab === 'reminders', isContacts: tab === 'contacts',
    };
  }
}
</script>
</body>
</html>
