/* ═══════════════════════════════════════════════════════════
   Orrery explorations — three layout takes on a design canvas.
═══════════════════════════════════════════════════════════ */
const { DesignCanvas, DCSection, DCArtboard } = window;

function OrreryApp() {
  return (
    <DesignCanvas>
      <DCSection
        id="orrery"
        title="The Orrery · Time-zoom rings"
        subtitle="Now at the living centre; each ring out is a longer horizon, planets set at their real mid-June 2026 positions. Three layouts on one model — tap the rings. Round 2."
      >
        <DCArtboard id="a" label="A · The Wheel — pure orrery" width={600} height={920}>
          <TakeWheel />
        </DCArtboard>
        <DCArtboard id="b" label="B · The Almanac — wheel + live content" width={920} height={660}>
          <TakeAlmanac />
        </DCArtboard>
        <DCArtboard id="c" label="C · The Timeline — wheel + linear span" width={920} height={620}>
          <TakeTimeline />
        </DCArtboard>
        <DCArtboard id="cards" label="D · Cards — click to expand" width={600} height={1320}>
          <TakeCards />
        </DCArtboard>
        <DCArtboard id="mobile" label="Mobile · segmented control" width={360} height={720}>
          <TakeMobile />
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

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