// ─────────────────────────────────────────────────────────────
// Forests v2 · join-flow embeds for the
// "Three doorways into a forest" post.
//
// Three boards, one per shipped C-flow:
//   c1       — open (one-tap, preview → joining → joined)
//   c2-user  — moderated, user side (preview → writing → pending)
//   c3       — referral (4-mark input + reveal)
//
// The C2 moderator queue is intentionally not embedded here — it's the
// other side of the moderated doorway, not a doorway in its own right.
//
// Default render (no ?board=) drops into the brainstorm-style DesignCanvas
// so the page also stands on its own if you open embed.html directly.
// ─────────────────────────────────────────────────────────────


const PHONE_W = 390;
const PHONE_H = 760;


// ─── Embed backdrop: same dark gradient used elsewhere on the blog. ───
function EmbedBackdrop({ children, padding = '12px 20px' }) {
  return (
    <div style={{
      background: 'linear-gradient(180deg, #1A2812 0%, #0B1306 100%)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding, boxSizing: 'border-box',
    }}>
      {children}
    </div>
  );
}


// ─── DesignCanvas fallback (no ?board= param) ────────────────────────
function App() {
  return (
    <DesignCanvas>
      <DCSection
        id="join-flows"
        title="C · Join forest — three shipped doorways"
        subtitle="The boards embedded in 'Three doorways into a forest'."
      >
        <DCArtboard id="c1" label="C1 · Open (one-tap)" width={PHONE_W} height={PHONE_H}>
          <Phone><JoinC1_Open/></Phone>
        </DCArtboard>
        <DCArtboard id="c2-user" label="C2 · Moderated (user side)" width={PHONE_W} height={PHONE_H}>
          <Phone><JoinC2_Moderated/></Phone>
        </DCArtboard>
        <DCArtboard id="c3" label="C3 · Referral (four-mark)" width={PHONE_W} height={PHONE_H}>
          <Phone><JoinC3_Referral/></Phone>
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}


// ─── Router: ?board=<id> renders one artboard; no param renders the
//     full DesignCanvas as the prototype was originally authored. ───
function EmbedOrApp() {
  const board = new URLSearchParams(location.search).get('board');
  switch (board) {
    case 'c1':
      return <EmbedBackdrop><Phone><JoinC1_Open/></Phone></EmbedBackdrop>;
    case 'c2-user':
      return <EmbedBackdrop><Phone><JoinC2_Moderated/></Phone></EmbedBackdrop>;
    case 'c3':
      return <EmbedBackdrop><Phone><JoinC3_Referral/></Phone></EmbedBackdrop>;
    default:
      return <App/>;
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<EmbedOrApp/>);