// ─────────────────────────────────────────────────────────────
// Forests v2 · viral-leaves embeds for the
// "A feed that should never feel empty" post.
//
// Two boards:
//   e1            — full E1 velocity feed (header + ticker + cards)
//   card-anatomy  — single ViralCard at component-focus altitude
//
// The 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,
//     sized to wrap the phone with a thin border of gradient visible. ───
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>
  );
}


// ─── Card-anatomy board ──────────────────────────────────────────────
// One ViralCard at native width, centred on the gradient. Lets readers
// see the three vertically-stacked stratums (forest pip → root tease →
// branch body, with the GrowingSpur connector + VelocityBadge) as a
// component rather than as a row inside a scrolling feed.
function CardAnatomyEmbed() {
  // First entry from the design-handoff fixture is a hot card with all
  // anatomy layers visible (sparkline, sunlight count, mote drift).
  const sample = VIRAL_LEAVES[0];
  return (
    <EmbedBackdrop padding="20px 24px">
      <div style={{
        width: 358, position: 'relative',
        font: '400 13px/1.5 "Geist", system-ui, sans-serif',
      }}>
        <ViralCard v={sample} rank={1} isNew={false}/>
      </div>
    </EmbedBackdrop>
  );
}


// ─── DesignCanvas fallback (no ?board= param) ────────────────────────
function App() {
  return (
    <DesignCanvas>
      <DCSection
        id="leaves"
        title="E1 · Viral leaves"
        subtitle="The two surfaces embedded in 'A feed that should never feel empty'."
      >
        <DCArtboard id="e1" label="E1 · Velocity feed (full)" width={PHONE_W} height={PHONE_H}>
          <Phone><ViralE1_VelocityFeed/></Phone>
        </DCArtboard>
        <DCArtboard id="card-anatomy" label="ViralCard · component focus" width={420} height={520}>
          <CardAnatomyEmbed/>
        </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 'e1':
      return <EmbedBackdrop><Phone><ViralE1_VelocityFeed/></Phone></EmbedBackdrop>;
    case 'card-anatomy':
      return <CardAnatomyEmbed/>;
    default:
      return <App/>;
  }
}

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