/* global React, ReactDOM, DesignCanvas, DCSection, DCArtboard,
   P01_Home, P02_Module, P03_Shell, P06a_CASEX, P06c_CASE, P06d_MAP, P06e_MAPCASE, P06f_CALCCASE, P06g_VIDEO, P06h_GATE,
   P08_Glossary, P09_Tutor, P10_Mastery, P11_Recall, P12_Quiz, P13_Progress, P14_Capstone */

const ArtboardFrame = ({ children, width = 1400, height }) => (
  <div className="artboard-root" style={{ width, minHeight: height, height: 'auto' }}>
    {children}
  </div>
);

const App = () => {
  return (
    <DesignCanvas
      title="Finaz · C04-A Múltiplos Intro"
      subtitle="UX brief → hi-fi · 14 pantallas · dark-mode-first · datasets sintéticos"
    >
      {/* === SECTION 1 · Descubrimiento === */}
      <DCSection
        id="discovery"
        title="01 · Descubrimiento del curso"
        subtitle="P01 home · P02 module · P13 progress · entry-points del producto"
      >
        <DCArtboard id="P01" label="P01 · Course home" width={1400} height={1240}>
          <P01_Home/>
        </DCArtboard>
        <DCArtboard id="P02" label="P02 · Module overview · M01" width={1400} height={1100}>
          <P02_Module/>
        </DCArtboard>
        <DCArtboard id="P13" label="P13 · Progress dashboard" width={1400} height={950}>
          <P13_Progress/>
        </DCArtboard>
      </DCSection>

      {/* === SECTION 2 · Episode shell (interactive) === */}
      <DCSection
        id="shell"
        title="02 · Episode shell · M01.E02 trailing vs forward"
        subtitle="P03 — la pantalla más importante. Slot polimórfico S1→S4. Pulsa los pasos en el rail para alternar; abre tutor; pulsa pausa."
      >
        <DCArtboard id="P03-S3" label="P03 · Shell @ S3 lab (default · CALC en curso)" width={1400} height={1500}>
          <P03_Shell initialStep="S3_lab"/>
        </DCArtboard>
        <DCArtboard id="P03-S1" label="P03 · Shell @ S1 hook (locución + 3 voces)" width={1400} height={1450}>
          <P03_Shell initialStep="S1_hook"/>
        </DCArtboard>
        <DCArtboard id="P03-S2" label="P03 · Shell @ S2 concept (regla anotada)" width={1400} height={1350}>
          <P03_Shell initialStep="S2_concept"/>
        </DCArtboard>
        <DCArtboard id="P03-S4" label="P03 · Shell @ S4 memo (linter prohibited language)" width={1400} height={1100}>
          <P03_Shell initialStep="S4_transfer"/>
        </DCArtboard>
        <DCArtboard id="P03-tutor" label="P03 · Shell + Tutor Finaz drawer abierto" width={1400} height={1500}>
          <P03_Shell initialStep="S3_lab" showTutor/>
        </DCArtboard>
        <DCArtboard id="P03-freeze" label="P03 · Modal de pausa · scene_resume_exact" width={1400} height={1500}>
          <P03_Shell initialStep="S3_lab" showFreeze/>
        </DCArtboard>
      </DCSection>

      {/* === SECTION 3 · Lab variants P06 === */}
      <DCSection
        id="labs"
        title="03 · Variantes de Lab S3 · slot polimórfico"
        subtitle="9 resource_type comparten el shell. Cada variante demuestra la zona de trabajo central."
      >
        <DCArtboard id="P06a" label="P06a · CASE-X · árbol de bifurcación (M00.E00)" width={1400} height={1050}>
          <P06a_CASEX/>
        </DCArtboard>
        <DCArtboard id="P06c" label="P06c · CASE · ranking quality (M01.E04)" width={1400} height={900}>
          <P06c_CASE/>
        </DCArtboard>
        <DCArtboard id="P06d" label="P06d · MAP · concept graph (M03.E01)" width={1400} height={760}>
          <P06d_MAP/>
        </DCArtboard>
        <DCArtboard id="P06e" label="P06e · MAP+CASE · dispersión sectorial (M01.E05)" width={1400} height={780}>
          <P06e_MAPCASE/>
        </DCArtboard>
        <DCArtboard id="P06f" label="P06f · CALC+CASE · 7/5 layout (M02.E03)" width={1400} height={800}>
          <P06f_CALCCASE/>
        </DCArtboard>
        <DCArtboard id="P06g" label="P06g · VIDEO+Q-MAP · video interactivo (M01.E01)" width={1400} height={1000}>
          <P06g_VIDEO/>
        </DCArtboard>
        <DCArtboard id="P06h" label="P06h · GATE · veredicto multi-empresa (M01.E06)" width={1400} height={860}>
          <P06h_GATE/>
        </DCArtboard>
      </DCSection>

      {/* === SECTION 4 · Glossary & tutor === */}
      <DCSection
        id="glossary-tutor"
        title="04 · Glosario y tutor"
        subtitle="P08 flashcard expandida · P09 tutor drawer con scope acotado"
      >
        <DCArtboard id="P08" label="P08 · Glossary flashcard · P/E forward" width={1400} height={900}>
          <P08_Glossary/>
        </DCArtboard>
        <DCArtboard id="P09" label="P09 · Tutor Finaz drawer · forbidden_action interceptada" width={1400} height={900}>
          <P09_Tutor/>
        </DCArtboard>
      </DCSection>

      {/* === SECTION 5 · Mastery & spaced recall === */}
      <DCSection
        id="meta"
        title="05 · Mastery y meta-aprendizaje"
        subtitle="P10 resultado del episodio · P11 spaced recall · P12 quiz pool informal"
      >
        <DCArtboard id="P10" label="P10 · Mastery result · feedback_bank excellent" width={1400} height={1100}>
          <P10_Mastery/>
        </DCArtboard>
        <DCArtboard id="P11" label="P11 · Spaced recall · card día 7 revelada" width={1400} height={800}>
          <P11_Recall/>
        </DCArtboard>
        <DCArtboard id="P12" label="P12 · Quiz pool · anti-tesis con pauta" width={1400} height={850}>
          <P12_Quiz/>
        </DCArtboard>
      </DCSection>

      {/* === SECTION 6 · Capstone === */}
      <DCSection
        id="capstone"
        title="06 · Capstone · Gate M04 · panel 6 × 4 × 3"
        subtitle="P14 — 72 celdas con drivers, fuentes y limitaciones · top 3 ideas con anti-tesis falsable · vista móvil por sector"
      >
        <DCArtboard id="P14" label="P14 · Capstone · desktop + preview móvil" width={1500} height={1600}>
          <P14_Capstone/>
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
};

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