/* eslint-disable */
/* One entry per section id. The list of what renders and the list of what the
   table of contents offers are the same list, filtered from GUIDE_I18N.sections,
   so a section can never be advertised without a block behind it. */
window.GUIDE_BLOCKS = {
  github: ({ t, n, heading }) => (
    <StepBlock
      id="github" n={n} t={t} heading={heading}
      data={t.steps.github}
      screenshotSlot={
        <ScreenshotPair split cols="37fr 63fr">
          <ScreenshotSlot id="ss-github-invite" label="GitHub invite email" t={t} aspect="726/1040" fit="contain" src="/guide/screenshots/github-invite-email.png" />
          <ScreenshotSlot id="ss-github-people" label="Milton-Group → People (your row should appear here)" t={t} aspect="1641/1397" fit="contain" src="/guide/screenshots/github-milton-people-list.png" />
        </ScreenshotPair>
      }
    >
      <Callout kind="warn" title={t.steps.github.warningTitle}>{t.steps.github.warning}</Callout>
    </StepBlock>
  ),

  signin: ({ t, n, heading }) => (
    <StepBlock
      id="signin" n={n} t={t} heading={heading}
      data={t.steps.signin}
      screenshotSlot={
        <ScreenshotPair>
          <ScreenshotSlot id="ss-signin-page" label="Coder sign-in page" t={t} aspect="16/9" fit="contain" src="/guide/screenshots/coder-signin.png" />
          <ScreenshotSlot id="ss-signin-empty" label="Empty dashboard after first login" t={t} aspect="16/9" fit="contain" src="/guide/screenshots/coder-empty-workspace.png" />
        </ScreenshotPair>
      }
    >
      <Callout kind="warn" title={t.steps.signin.warningTitle}>{t.steps.signin.warning}</Callout>
    </StepBlock>
  ),

  create: ({ t, n, heading }) => (
    <StepBlock
      id="create" n={n} t={t} heading={heading}
      data={t.steps.create}
      screenshotSlot={
        <ScreenshotPair>
          <ScreenshotSlot id="ss-create-form" label="Create Workspace form" t={t} aspect="16/9" fit="contain" src="/guide/screenshots/coder-create-workspace.png" />
          <ScreenshotSlot id="ss-create-running" label="Workspace in Running state" t={t} aspect="16/9" fit="contain" src="/guide/screenshots/coder-workspace-running.png" />
        </ScreenshotPair>
      }
    >
      <Callout kind="tip" title={t.steps.create.tipTitle}>{t.steps.create.tip}</Callout>
    </StepBlock>
  ),

  connectgh: ({ t, n, heading }) => (
    <StepBlock
      id="connectgh" n={n} t={t} heading={heading}
      data={t.steps.connectgh}
      screenshotSlot={
        <>
          <ScreenshotPair>
            <ScreenshotSlot id="ss-connectgh-tile" label="Workspace page — the Connect GitHub tile" t={t} aspect="16/10" fit="contain" src="/guide/screenshots/connect-github-tile.png" />
            <ScreenshotSlot id="ss-connectgh-extauth" label="External Authentication — Click to Login" t={t} aspect="16/6" fit="contain" src="/guide/screenshots/coder-external-auth.png" />
          </ScreenshotPair>
          {/* Columns are proportional to each image's aspect so the two
              end up the same height side by side. */}
          <ScreenshotPair split cols="870fr 937fr">
            <ScreenshotSlot id="ss-connectgh-success" label="Authenticated — close the tab" t={t} aspect="1056/1214" fit="contain" src="/guide/screenshots/github-connected-success.png" />
            <ScreenshotSlot id="ss-connectgh-authorize" label="GitHub authorize screen — one click" t={t} aspect="727/776" fit="contain" src="/guide/screenshots/github-authorize.png" />
          </ScreenshotPair>
        </>
      }
    >
      <Callout kind="info" title={t.steps.connectgh.mainlandTitle}>{t.steps.connectgh.mainland}</Callout>
      <Callout kind="tip" title={t.ui.callout_tip}>{t.steps.connectgh.tip}</Callout>
    </StepBlock>
  ),

  firstrun: ({ t, n, heading }) => (
    <StepBlock
      id="firstrun" n={n} t={t} heading={heading}
      data={t.steps.firstrun}
      screenshotSlot={<ScreenshotSlot id="ss-firstrun" label={t.steps.firstrun.screenshot} t={t} aspect="3840/2434" fit="contain" src="/guide/screenshots/1password-signin.png" />}
    >
      <Callout kind="tip"  title={t.steps.firstrun.tipTitle}>{t.steps.firstrun.tip}</Callout>
      <Callout kind="warn" title={t.steps.firstrun.warningTitle}>{t.steps.firstrun.warning}</Callout>
    </StepBlock>
  ),

  outlook: ({ t, n, heading }) => (
    <StepBlock
      id="outlook" n={n} t={t} heading={heading}
      data={t.steps.outlook}
      screenshotSlot={<ScreenshotSlot id="ss-outlook" label={t.steps.outlook.screenshot} t={t} aspect="3845/2425" fit="contain" src="/guide/screenshots/outlook-inbox.png" />}
    />
  ),

  claudeai: ({ t, n, heading }) => (
    <StepBlock
      id="claudeai" n={n} t={t} heading={heading}
      data={t.steps.claudeai}
      screenshotSlot={
        <ScreenshotPair>
          <ScreenshotSlot id="ss-claudeai-login" label="claude.ai login — sign in with your @almalabs.app email" t={t} aspect="3845/2419" fit="contain" src="/guide/screenshots/claudeai-login.png" />
          <ScreenshotSlot id="ss-claudeai-signedin" label="Signed in — confirm the workspace switcher shows almalabs" t={t} aspect="3855/2436" fit="contain" src="/guide/screenshots/claudeai-signedin.png" />
        </ScreenshotPair>
      }
    />
  ),

  claudecode: ({ t, n, heading }) => (
    <StepBlock
      id="claudecode" n={n} t={t} heading={heading}
      data={t.steps.claudecode}
      screenshotSlot={
        <ScreenshotPair>
          <ScreenshotSlot id="ss-claudecode-prompt" label="`claude` running — auth URL printed and code pasted at the prompt" t={t} aspect="16/9" fit="contain" src="/guide/screenshots/claude-code-login-prompt.png" />
          <ScreenshotSlot id="ss-claudecode-signedin" label="Signed in — Claude Code prompt with Sonnet 4.6 · Claude Team" t={t} aspect="16/9" fit="contain" src="/guide/screenshots/claude-code-signed-in.png" />
        </ScreenshotPair>
      }
    >
      <Callout kind="warn" title={t.ui.callout_warning}>{t.steps.claudecode.warning}</Callout>
      <Callout kind="tip" title={t.ui.callout_tip}>{t.steps.claudecode.bottomTip}</Callout>
      <div className="trouble-mini">
        <Cmd lines={t.steps.claudecode.wrongUserCmd.split("\n")} t={t} />
      </div>
    </StepBlock>
  ),

  linear:      ({ t, n, heading }) => <StepBlock id="linear" n={n} t={t} heading={heading} data={t.steps.linear} />,
  gitidentity: ({ t, heading }) => <GitIdentityBlock t={t} heading={heading} />,
  laptop:      ({ t, heading }) => <LaptopBlock t={t} heading={heading} />,

  tools:      ({ t }) => <ToolsBlock t={t} />,
  saving:     ({ t }) => <SavingBlock t={t} />,
  gh:         ({ t }) => <GhBlock t={t} />,
  workflow:   ({ t }) => <WorkflowBlock t={t} />,
  quality:    ({ t }) => <QualityBlock t={t} />,
  rules:      ({ t }) => <RulesBlock t={t} />,
  cheatsheet: ({ t }) => <CheatsheetBlock t={t} />,
  setup:      ({ t }) => <SetupBlock t={t} />,
  daily:      ({ t }) => <DailyBlock t={t} />,
  coderclaude: ({ t }) => <CoderClaudeBlock t={t} />,
  stop:       ({ t }) => <StopBlock t={t} />,
  trouble:    ({ t }) => <TroubleBlock t={t} />,
  donts:      ({ t }) => <DontsBlock t={t} />,
  connectors: ({ t }) => <ConnectorsBlock t={t} />,
};

function CoderClaudeBlock({ t }) {
  const d = t.coderclaude;
  if (!d) return null;
  return (
    <section id="coderclaude" className="block hiw-block" data-screen-label="06b coder-claude">
      <SectionHeader kicker={d.kicker} title={d.title} lede={d.lede} />

      <div className="hop" role="list" aria-label={d.shapeTitle}>
        {d.hops.map((h, i) => (
          <React.Fragment key={i}>
            <div className="hop-box" role="listitem">
              <div className="hop-k">{h.k}</div>
              <div>{h.code && <Code>{h.code}</Code>}{h.code ? " " : ""}{h.text}</div>
            </div>
            {i < d.hops.length - 1 && <div className="hop-arrow" aria-hidden="true">{d.arrows[i]}</div>}
          </React.Fragment>
        ))}
      </div>
      <p className="block-lede">{d.shapeNote}</p>

      <h3>{d.rowsTitle}</h3>
      <p className="block-lede">{d.rowsLede}</p>
      <table className="tbl">
        <thead><tr>{d.rowsHead.map((h, i) => <th key={i} scope="col">{h}</th>)}</tr></thead>
        <tbody>
          {d.rows.map((r, i) => (
            <tr key={i}>
              {r.map((c, k) => <td key={k}>{k === 1 ? <Code>{c}</Code> : c}</td>)}
            </tr>
          ))}
        </tbody>
      </table>

      {d.phases.map((ph, i) => (
        <div key={i}>
          <h3>{String.fromCharCode(97 + i)}. {ph.h}</h3>
          <ul className="bullets">
            {ph.items.map((b, j) => <li key={j}>{rich(b)}</li>)}
          </ul>
          {ph.cmd && <Cmd lines={ph.cmd} t={t} />}
          {[ph.shot, ph.shot2].some(sh => sh && sh.src) && (
            <ScreenshotPair>
              {[ph.shot, ph.shot2].filter(sh => sh && sh.src).map(sh => (
                <ScreenshotSlot key={sh.id} id={sh.id} label={sh.label} t={t} aspect={sh.aspect || "16/10"} fit="contain" src={sh.src} />
              ))}
            </ScreenshotPair>
          )}
        </div>
      ))}

      <Callout kind="info" title={d.noteTitle}>{rich(d.note)}</Callout>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);