// ─────────────────────────────────────────────────────────────────────────
// App — assembles the three variations into a DesignCanvas
// + a Tweaks panel that switches persona, literacy depth, density
// across all 12 artboards at once.
// ─────────────────────────────────────────────────────────────────────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "persona": "jordan",
  "depth": "standard",
  "density": "standard"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const persona = window.PERSONAS[t.persona] || window.PERSONAS.jordan;
  const shared = { persona, density: t.density, depth: t.depth };

  // Sizes per variation — each chosen to suit its content
  const SZ = {
    letters:      { w: 1000, h: 1140 },
    conversation: { w: 1080, h: 920 },
    livingMap:    { w: 1240, h: 800 },
  };

  return (
    <>
      <DesignCanvas>
        <DCSection
          id="letters"
          title="01 — Letters to you"
          subtitle="Editorial, written-to-you. Reading rhythm, drop caps, teal pull-quotes. Credibility from the writing itself.">
          <DCArtboard id="letters-intake" label="Intake · Section 3" width={SZ.letters.w} height={SZ.letters.h}>
            <LtIntake {...shared}/>
          </DCArtboard>
          <DCArtboard id="letters-story"  label="My Health Story"   width={SZ.letters.w} height={SZ.letters.h}>
            <LtStory {...shared}/>
          </DCArtboard>
          <DCArtboard id="letters-plan"   label="My Action Plan"    width={SZ.letters.w} height={SZ.letters.h}>
            <LtPlan {...shared}/>
          </DCArtboard>
          <DCArtboard id="letters-ctc"    label="Care Team · Clinical" width={SZ.letters.w} height={SZ.letters.h}>
            <LtCtc {...shared}/>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="conversation"
          title="02 — The conversation"
          subtitle="Same synthesis revealed in dialogue. Intake feels like talking to a thoughtful friend; the Story unspools in a thread you can come back to.">
          <DCArtboard id="convo-intake" label="Intake · in conversation" width={SZ.conversation.w} height={SZ.conversation.h}>
            <CvIntake {...shared}/>
          </DCArtboard>
          <DCArtboard id="convo-story"  label="My Health Story"          width={SZ.conversation.w} height={SZ.conversation.h}>
            <CvStory {...shared}/>
          </DCArtboard>
          <DCArtboard id="convo-plan"   label="My Action Plan"           width={SZ.conversation.w} height={SZ.conversation.h}>
            <CvPlan {...shared}/>
          </DCArtboard>
          <DCArtboard id="convo-ctc"    label="Care Team · with transcript" width={SZ.conversation.w} height={SZ.conversation.h}>
            <CvCtc {...shared}/>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="livingMap"
          title="03 — The living map"
          subtitle="One visualization persists. The 5-driver constellation. Conditions thread in. Levers project out. Everything navigates by zooming the map.">
          <DCArtboard id="map-intake" label="Intake · building the map" width={SZ.livingMap.w} height={SZ.livingMap.h}>
            <MpIntake {...shared}/>
          </DCArtboard>
          <DCArtboard id="map-story"  label="My Health Story"            width={SZ.livingMap.w} height={SZ.livingMap.h}>
            <MpStory {...shared}/>
          </DCArtboard>
          <DCArtboard id="map-plan"   label="My Action Plan · spokes"    width={SZ.livingMap.w} height={SZ.livingMap.h}>
            <MpPlan {...shared}/>
          </DCArtboard>
          <DCArtboard id="map-ctc"    label="Care Team · clinical map"   width={SZ.livingMap.w} height={SZ.livingMap.h}>
            <MpCtc {...shared}/>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Worked example"/>
        <TweakRadio label="Persona"
                    value={t.persona}
                    options={["jordan", "maya"]}
                    onChange={(v) => setTweak("persona", v)}/>

        <TweakSection label="Output calibration"/>
        <TweakRadio label="Depth"
                    value={t.depth}
                    options={["plain", "standard", "deep"]}
                    onChange={(v) => setTweak("depth", v)}/>

        <TweakSection label="Layout"/>
        <TweakRadio label="Density"
                    value={t.density}
                    options={["compact", "standard"]}
                    onChange={(v) => setTweak("density", v)}/>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);