// app.jsx — composes everything into a DesignCanvas with Tweaks

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "density": "regular",
  "styleFocus": "both"
}/*EDITMODE-END*/;

/* Wrapper that applies style + density + dark to a screen */
function Frame({ style, density, dark, children }) {
  const cls = [
    "screen",
    style === "A" ? "style-a" : "style-b",
    dark && style === "A" ? "dark" : "",
    `density-${density}`,
  ].filter(Boolean).join(" ");
  return <div className={cls}>{children}</div>;
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { dark, density, styleFocus } = t;

  const showA = styleFocus === "both" || styleFocus === "A";
  const showB = styleFocus === "both" || styleFocus === "B";

  // For each screen, we render up to 2 artboards (A + B)
  const W = 1280, H = 800;

  return (
    <>
      <DesignCanvas>
        <DCSection id="meta" title="Arquitectura del curso" subtitle="Course Home · Module Home · Episode Hub — punto de entrada de cualquier alumno.">
          {showA && <DCArtboard id="ch-a" label="A · Course Home" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><CourseHome /></Frame>
          </DCArtboard>}
          {showB && <DCArtboard id="ch-b" label="B · Course Home" width={W} height={H}>
            <Frame style="B" density={density} dark={false}><CourseHome /></Frame>
          </DCArtboard>}
          {showA && <DCArtboard id="mh-a" label="A · Module Home M01" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><ModuleHomeM01 /></Frame>
          </DCArtboard>}
          {showB && <DCArtboard id="mh-b" label="B · Module Home M01" width={W} height={H}>
            <Frame style="B" density={density} dark={false}><ModuleHomeM01 /></Frame>
          </DCArtboard>}
          {showA && <DCArtboard id="eh-a" label="A · Episode Hub M01.E01" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><EpisodeHubM01E01 /></Frame>
          </DCArtboard>}
          {showB && <DCArtboard id="eh-b" label="B · Episode Hub M01.E01" width={W} height={H}>
            <Frame style="B" density={density} dark={false}><EpisodeHubM01E01 /></Frame>
          </DCArtboard>}
        </DCSection>

        <DCSection id="flow" title="Flujo del episodio · M01.E01" subtitle="S1 hook → S2 concepto → S3 Q-MAP lab → S4 mini-memo, cada uno en ambos estilos.">
          {showA && <DCArtboard id="s1-a" label="A · S1 · Story panel" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><S1Story /></Frame>
          </DCArtboard>}
          {showB && <DCArtboard id="s1-b" label="B · S1 · Story panel" width={W} height={H}>
            <Frame style="B" density={density} dark={false}><S1Story /></Frame>
          </DCArtboard>}

          {showA && <DCArtboard id="s2-a" label="A · S2 · Concepto anotado" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><S2Annotated /></Frame>
          </DCArtboard>}
          {showB && <DCArtboard id="s2-b" label="B · S2 · Concepto anotado" width={W} height={H}>
            <Frame style="B" density={density} dark={false}><S2Annotated /></Frame>
          </DCArtboard>}

          {showA && <DCArtboard id="s3-a" label="A · S3 · Q-MAP (drag real)" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><S3Qmap /></Frame>
          </DCArtboard>}
          {showB && <DCArtboard id="s3-b" label="B · S3 · Q-MAP (drag real)" width={W} height={H}>
            <Frame style="B" density={density} dark={false}><S3Qmap /></Frame>
          </DCArtboard>}

          {showA && <DCArtboard id="s4-a" label="A · S4 · Mini-memo" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><S4Memo /></Frame>
          </DCArtboard>}
          {showB && <DCArtboard id="s4-b" label="B · S4 · Mini-memo" width={W} height={H}>
            <Frame style="B" density={density} dark={false}><S4Memo /></Frame>
          </DCArtboard>}
        </DCSection>

        <DCSection id="labs" title="Otros arquetipos del S3" subtitle="CALC · DBG · CASE-X — interactivos. (Estilo A, para no duplicar la comparativa visual hasta decidir dirección.)">
          <DCArtboard id="lab-calc" label="S3 · CALC · Beneish M-score" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><S3CalcBeneish /></Frame>
          </DCArtboard>
          <DCArtboard id="lab-dbg" label="S3 · DBG · ROIC ajustado" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><S3DbgRoic /></Frame>
          </DCArtboard>
          <DCArtboard id="lab-casex" label="S3 · CASE-X · veredictos en cadena" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><S3CaseX /></Frame>
          </DCArtboard>
        </DCSection>

        <DCSection id="meta-tools" title="Herramientas meta" subtitle="Glosario, dashboard y el proyecto final Forensic Report Studio.">
          <DCArtboard id="gloss" label="Glosario · 48 términos" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><GlossaryIndex /></Frame>
          </DCArtboard>
          <DCArtboard id="dash" label="Dashboard · mastery + spaced recall" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><Dashboard /></Frame>
          </DCArtboard>
          <DCArtboard id="frs" label="Forensic Report Studio · proyecto final" width={W} height={H}>
            <Frame style="A" density={density} dark={dark}><ForensicReportStudio /></Frame>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel>
        <TweakSection label="Vista" />
        <TweakRadio label="Mostrar"
                    options={["both", "A", "B"]}
                    value={styleFocus}
                    onChange={v => setTweak('styleFocus', v)} />
        <TweakSection label="Apariencia" />
        <TweakRadio label="Densidad"
                    options={["compact", "regular", "comfy"]}
                    value={density}
                    onChange={v => setTweak('density', v)} />
        <TweakToggle label="Modo oscuro (sólo Estilo A)"
                     value={dark}
                     onChange={v => setTweak('dark', v)} />
        <TweakSection label="Atajos" />
        <TweakButton label="Saltar a · S3 Q-MAP"
                     onClick={() => {
                       const el = document.querySelector('[data-dc-slot] [data-cc-id], #s3-a, [id="s3-a"]');
                       const target = document.querySelector('div[label*="Q-MAP"]');
                       window.scrollTo({ top: 1400, behavior: 'smooth' });
                     }} />
        <div style={{ fontSize: 10.5, color: 'rgba(41,38,27,.55)', padding: '8px 0', lineHeight: 1.5 }}>
          C02-B · 13 artboards · estilos A · B · contenido sintético.
          <br/>
          <em>El contenido manda</em>.
        </div>
      </TweaksPanel>
    </>
  );
}

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