<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TreeHaous · M5 Buyer Landing — Design Canvas</title>
  <link rel="icon" href="treehaous/assets/mark-emerald-primary.png" />
  <style>
    html, body { margin: 0; padding: 0; background: #efe9dd; font-family: 'Geist', system-ui, sans-serif; }
    #root { min-height: 100vh; }
  </style>
</head>
<body>
  <div id="root"></div>

  <!-- React + Babel -->
  <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

  <!-- Starters -->
  <script type="text/babel" src="treehaous/design-canvas.jsx"></script>
  <script type="text/babel" src="treehaous/tweaks-panel.jsx"></script>

  <!-- Components -->
  <script type="text/babel" src="treehaous/components/tokens.jsx"></script>
  <script type="text/babel" src="treehaous/components/primitives.jsx"></script>
  <script type="text/babel" src="treehaous/components/chat-variants.jsx"></script>
  <script type="text/babel" src="treehaous/components/landing-desktop.jsx"></script>
  <script type="text/babel" src="treehaous/components/landing-mobile.jsx"></script>
  <script type="text/babel" src="treehaous/components/prototype.jsx"></script>
  <script type="text/babel" src="treehaous/components/screen-2-chat-search.jsx"></script>
  <script type="text/babel" src="treehaous/components/screen-3-stream.jsx"></script>
  <script type="text/babel" src="treehaous/components/screen-5-listing-detail.jsx"></script>
  <script type="text/babel" src="treehaous/components/screens-remaining.jsx"></script>
  <script type="text/babel" src="treehaous/components/agent-wedge.jsx"></script>
  <script type="text/babel" src="treehaous/components/admin-panel.jsx"></script>

  <!-- App -->
  <script type="text/babel">
    const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
      "chatVariant": "rotating",
      "heroCopy": "default",
      "accentIntensity": "restrained",
      "showDemoData": true
    }/*EDITMODE-END*/;

    function App() {
      const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

      return (
        <React.Fragment>
          <DesignCanvas
            title="TreeHaous · M5 — Buyer landing"
            subtitle="Screen 01 · Anonymous landing  ·  contract §8"
          >
            <DCSection
              id="landing-main"
              title="Landing — the strongest take"
              subtitle="Same direction, two form factors. Drag to reorder · click to open fullscreen."
            >
              <DCArtboard
                id="landing-desktop"
                label="Desktop · 1440 × 1750"
                width={1440}
                height={1750}
              >
                <LandingDesktop
                  chatVariant={t.chatVariant}
                  heroCopy={t.heroCopy}
                  accentIntensity={t.accentIntensity}
                  showDemoData={t.showDemoData}
                />
              </DCArtboard>
              <DCArtboard
                id="landing-mobile"
                label="Mobile · 390 × 1620"
                width={390}
                height={1620}
              >
                <LandingMobile
                  chatVariant={t.chatVariant}
                  heroCopy={t.heroCopy}
                  showDemoData={t.showDemoData}
                />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="chat-variants"
              title="Chat-input variants"
              subtitle="Three treatments for the front-door composer. Each is hero-cropped at 720 × 380."
            >
              <DCArtboard
                id="chat-expanding"
                label="A · Expanding composer (default)"
                width={720}
                height={380}
              >
                <div className="th-scope" style={{ width: 720, height: 380, padding: 40, background: 'var(--linen)' }}>
                  <DesignTokens />
                  <ChatExpanding value="" onChange={() => {}} onSubmit={() => {}} />
                </div>
              </DCArtboard>
              <DCArtboard
                id="chat-rotating"
                label="B · Rotating example prompts"
                width={720}
                height={380}
              >
                <div className="th-scope" style={{ width: 720, height: 380, padding: 40, background: 'var(--linen)' }}>
                  <DesignTokens />
                  <ChatRotating value="" onChange={() => {}} onSubmit={() => {}} />
                </div>
              </DCArtboard>
              <DCArtboard
                id="chat-palette"
                label="C · Glass command-palette"
                width={720}
                height={420}
              >
                <div className="th-scope" style={{ width: 720, height: 420, padding: 40, background: 'var(--bone)' }}>
                  <DesignTokens />
                  <ChatPalette value="" onChange={() => {}} onSubmit={() => {}} />
                </div>
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-2"
              title="Screen 02 — Chat-search results (polished)"
              subtitle="Hi-fi static spec for the split view. Desktop fills with a 2-turn refinement conversation; mobile collapses into a tabbed Chat / Results view."
            >
              <DCArtboard
                id="screen-2-desktop"
                label="Desktop · 1440 × 920"
                width={1440}
                height={920}
              >
                <Screen2ChatSearch />
              </DCArtboard>
              <DCArtboard
                id="screen-2-mobile"
                label="Mobile · 390 × 844"
                width={390}
                height={844}
              >
                <Screen2ChatSearchMobile />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-3"
              title="Screen 03 — Listing card stream (mobile)"
              subtitle="The Tinder-style swipe feed — mobile-native by design. Drag the top card or tap Pass/Save; the stack restocks behind it."
            >
              <DCArtboard
                id="screen-3-mobile"
                label="Mobile · 390 × 844 · clickable"
                width={390}
                height={844}
              >
                <Screen3StreamMobile />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-5"
              title="Screen 05 — Listing detail"
              subtitle="The full property page — hero gallery, key stats, sticky tour-request card (target price compulsory), dossier preview (links into Screen 06), matched-agents teaser (links into Screen 07), open-house RSVP slot."
            >
              <DCArtboard
                id="screen-5-desktop"
                label="Desktop · 1440 × 1800"
                width={1440}
                height={1800}
              >
                <Screen5ListingDetail />
              </DCArtboard>
              <DCArtboard
                id="screen-5-mobile"
                label="Mobile · 390 × 2080"
                width={390}
                height={2080}
              >
                <Screen5ListingDetailMobile />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-6"
              title="Screen 06 — Full property dossier"
              subtitle="The expanded insights view. Schools as a real table; every gap is disclosed in clay-dashed cards rather than silently omitted."
            >
              <DCArtboard id="screen-6-desktop" label="Desktop · 1440 × 1700" width={1440} height={1700}>
                <Screen6Dossier />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-7"
              title="Screen 07 — Matched agents shortlist"
              subtitle="Curated 04-agent list for the active listing. Tier labels visible, raw scores hidden (moat discipline), capability rendered as narrative."
            >
              <DCArtboard id="screen-7-desktop" label="Desktop · 1440 × 1100" width={1440} height={1100}>
                <Screen7Shortlist />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-8"
              title="Screen 08 — Agent profile"
              subtitle="Buyer-facing dossier surface. Capability insights as short narratives; transaction history is VOW-gated with explicit redaction."
            >
              <DCArtboard id="screen-8-desktop" label="Desktop · 1440 × 1500" width={1440} height={1500}>
                <Screen8AgentProfile />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-9"
              title="Screen 09 — Agent-request flow"
              subtitle="Target price is the hard form field, not optional. Listing + agent context on the left; form on the right; thread opens immediately on send."
            >
              <DCArtboard id="screen-9-desktop" label="Desktop · 1440 × 980" width={1440} height={980}>
                <Screen9RequestFlow />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-10"
              title="Screen 10 — Inbox"
              subtitle="Active request threads, sorted by last message. State pills (open / responded / closed), unread ring on the avatar, list price → target price band."
            >
              <DCArtboard id="screen-10-desktop" label="Desktop · 1440 × 980" width={1440} height={980}>
                <Screen10Inbox />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-11"
              title="Screen 11 — Thread detail"
              subtitle="Single conversation with target price pinned to the header. Composer at the bottom; toolbar can attach dossier / comp table / RSVP."
            >
              <DCArtboard id="screen-11-desktop" label="Desktop · 1440 × 980" width={1440} height={980}>
                <Screen11Thread />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="screen-12"
              title="Screen 12 — Saved + favorites"
              subtitle="Working shortlist as a side-by-side compare table. Same dossier numbers in adjacent columns so the decision is structured, not narrative."
            >
              <DCArtboard id="screen-12-desktop" label="Desktop · 1440 × 1100" width={1440} height={1100}>
                <Screen12Saved />
              </DCArtboard>
            </DCSection>

            <DCSection
              id="agent-wedge"
              title="Agent wedge — agent.treehaous.com"
              subtitle="The agent's daily workspace. Same brand language as the buyer wedge — Moss accent kept, no cyan substitution."
            >
              <DCArtboard id="agent-login"    label="/login · 1440 × 900"      width={1440} height={900}>  <AgentLogin />          </DCArtboard>
              <DCArtboard id="agent-hub"      label="/ · Hub · 1440 × 1100"   width={1440} height={1100}> <AgentHub />            </DCArtboard>
              <DCArtboard id="agent-thread"   label="/thread/:id · 1440 × 920" width={1440} height={920}>  <AgentThread />         </DCArtboard>
              <DCArtboard id="agent-browse"   label="/properties · 1440 × 980" width={1440} height={980}>  <AgentBrowse />         </DCArtboard>
              <DCArtboard id="agent-pdetail"  label="/property/:k · 1440 × 1200" width={1440} height={1200}> <AgentPropertyDetail /> </DCArtboard>
              <DCArtboard id="agent-favs"     label="/favorites · 1440 × 900"  width={1440} height={900}>  <AgentFavorites />      </DCArtboard>
              <DCArtboard id="agent-map"      label="/map · 1440 × 900"        width={1440} height={900}>  <AgentMap />            </DCArtboard>
              <DCArtboard id="agent-network"  label="/network · 1440 × 980"    width={1440} height={980}>  <AgentNetwork />        </DCArtboard>
              <DCArtboard id="agent-dm"       label="/network/dms/:id · 1440 × 920" width={1440} height={920}> <AgentDM />            </DCArtboard>
              <DCArtboard id="agent-edit"     label="/agent-profile/:id/edit · 1440 × 1100" width={1440} height={1100}> <AgentEditProfile /> </DCArtboard>
              <DCArtboard id="agent-analytics" label="/analytics · 1440 × 1000" width={1440} height={1000}> <AgentAnalytics />     </DCArtboard>
              <DCArtboard id="agent-wall"     label="/wall · 1440 × 1100"      width={1440} height={1100}> <AgentWall />          </DCArtboard>
            </DCSection>

            <DCSection
              id="admin-panel"
              title="Admin panel — admin.treehaous.com"
              subtitle="Operator surface. Rail-driven SPA — click the icons in the left rail to switch sections (Installed MLS / Incidents / Normalize / Secrets / Fleet / Operators / Customers)."
            >
              <DCArtboard id="admin-login"     label="/login · 1440 × 900"        width={1440} height={900}> <AdminLogin />     </DCArtboard>
              <DCArtboard id="admin-dashboard" label="Dashboard shell · clickable rail" width={1440} height={900}> <AdminDashboard /> </DCArtboard>
            </DCSection>

            <DCSection
              id="prototype"
              title="Working prototype — chat-search flow"
              subtitle="Click the example prompts (or type your own) to see the simulated /chat/search SSE response — filter chips stream in, then result cards, then the assistant's message."
            >
              <DCArtboard
                id="proto-chat-search"
                label="Chat-search · clickable"
                width={1440}
                height={900}
              >
                <ChatSearchPrototype />
              </DCArtboard>
            </DCSection>
          </DesignCanvas>

          <TweaksPanel title="Tweaks">
            <TweakSection label="Chat composer" />
            <TweakRadio
              label="Variant"
              value={t.chatVariant}
              options={[
                { value: 'expanding', label: 'Expanding' },
                { value: 'rotating',  label: 'Rotating' },
                { value: 'palette',   label: 'Palette' },
              ]}
              onChange={(v) => setTweak('chatVariant', v)}
            />
            <TweakSection label="Hero copy" />
            <TweakRadio
              label="Tone"
              value={t.heroCopy}
              options={[
                { value: 'default', label: 'Brand default' },
                { value: 'short',   label: 'Short' },
                { value: 'direct',  label: 'Direct' },
              ]}
              onChange={(v) => setTweak('heroCopy', v)}
            />
            <TweakSection label="Accent" />
            <TweakRadio
              label="Intensity"
              value={t.accentIntensity}
              options={[
                { value: 'restrained', label: 'Restrained' },
                { value: 'bold',       label: 'Bold' },
              ]}
              onChange={(v) => setTweak('accentIntensity', v)}
            />
            <TweakSection label="Demo content" />
            <TweakToggle
              label="Show plausible Austin data"
              value={t.showDemoData}
              onChange={(v) => setTweak('showDemoData', v)}
            />
          </TweaksPanel>
        </React.Fragment>
      );
    }

    ReactDOM.createRoot(document.getElementById('root')).render(<App />);
  </script>

  <style id="__om-edit-overrides"></style>
</body>
</html>
