/* Resume content — driven by translations via the <Trans> / t() helpers.
   Formatting (bold, italic, links) is preserved because translation strings
   may contain <b>/<i>/<a> which <Trans/> renders as real React nodes. */

const { AssetRail, Highlight, ResumeHeader, QRCode, Section, Card, Bullets, Grid2, DividerBlock, Row, preloadAssets, MuteProvider } = window;
const { I18nProvider, useTranslation, Trans, LanguagePills, PrintButton } = window;

/* Mobile-only hint bar — sits above the page and tells touch users that
   rows are tappable (the hover affordance from desktop isn't discoverable
   on a phone). Hidden on desktop via CSS. */
function MobileHint() {
  const { t } = useTranslation();
  return (
    <div className="mobile-hint" role="note">
      <span>{t("mobileHint")}</span>
    </div>
  );
}

/* QR + caption shown in the middle of the header. The URL each QR
   encodes is per-language (translations.js → print.qrUrl). The label is
   stacked one word per line by splitting on spaces — keeps "View / demos"
   tight next to the QR instead of trailing horizontally. */
function QRPromo() {
  const { t } = useTranslation();
  const words = t("print.qrLabel").split(/\s+/);
  return (
    <div className="qr-promo">
      <QRCode value={t("print.qrUrl")} />
      <span className="qr-label">
        {words.map((w, i) => <span key={i}>{w}</span>)}
      </span>
    </div>
  );
}

/* ===== Asset sets — captions are pulled via t() so they translate too. ===== */

function buildAssets(t) {
  return {
    dosCavalos_app: [
      { src: "demos/research_farm_app.mp4", portrait: true },
    ],
    dosCavalos_network: [
      { src: "demos/security_camera.mp4", noAudio: true, caption: t("captions.securityCamera") },
    ],
    dosCavalos_twin: [
      { src: "demos/interior_design_renovation walkthrough.mp4", noAudio: true, caption: t("captions.twinmotion"), hideRestart: true },
      { src: "demos/revit_model_pointcloud walkthrough.mp4", noAudio: true, caption: t("captions.revit"), hideRestart: true },
    ],
    justGo: [
      { src: "demos/grocery_delivery_app.mp4", portrait: true },
    ],
    gradeBook: [
      { src: "demos/grade_app.mp4", portrait: true },
    ],
    minesweeper: [
      { src: "demos/minesweeper.jpg.webp", caption: t("captions.minesweeper") },
    ],
    minecraftRL: [
      { src: "demos/minecraft_rl_agent_playthrough.mp4", noAudio: true, caption: t("captions.minecraft1"), hideRestart: true },
      { src: "demos/minecraft_agent_input_demo.mp4", noAudio: true, caption: t("captions.minecraft2"), hideRestart: true },
    ],
    door: [
      { src: "demos/automatic_door_demo.mp4", noAudio: true },
    ],
    portrait: [
      { src: "demos/portrait.png", portrait: true },
    ],
  };
}

function ResumeBody() {
  const { t, lang } = useTranslation();
  // Re-bind ASSETS when language changes so captions translate. The `src`
  // arrays stay referentially different across renders, which is fine —
  // AssetItem keys on src and Highlight re-registers cleanly.
  const ASSETS = React.useMemo(() => buildAssets(t), [lang, t]);

  return (
    <MuteProvider>
    <AssetRail>
      <ResumeHeader
        left={<>
          <Highlight assets={ASSETS.portrait}>
            <div className="name">{t("header.name")}</div>
            <div className="subtitle">{t("header.subtitle")}</div>
          </Highlight>
        </>}
        middle={<QRPromo />}
        right={<>
          <div><a href={`mailto:${t("header.email")}`}>{t("header.email")}</a></div>
          <div><a href="http://linkedin.com/in/arthur.facredyn">{t("header.linkedin")}</a></div>
          <div>{t("header.location")}</div>
        </>}
      />

      <Section title={t("sections.work")}>
        <Card
          left={t("work.dosCavalos.title")}
          right={<Trans i18nKey="work.dosCavalos.meta" />}
        >
          <Bullets>
            <Highlight assets={ASSETS.dosCavalos_app}><Trans i18nKey="work.dosCavalos.b1" /></Highlight>
            <Highlight assets={ASSETS.dosCavalos_network}><Trans i18nKey="work.dosCavalos.b2" /></Highlight>
            <Highlight assets={ASSETS.dosCavalos_twin}><Trans i18nKey="work.dosCavalos.b3" /></Highlight>
          </Bullets>
        </Card>

        <Highlight assets={ASSETS.justGo}>
          <Card
            left={t("work.justGo.title")}
            right={<Trans i18nKey="work.justGo.meta_pre" />}
          >
            <Bullets>
              <Trans i18nKey="work.justGo.b1" />
              <Trans i18nKey="work.justGo.b2" />
              <Trans i18nKey="work.justGo.b3" />
            </Bullets>
          </Card>
        </Highlight>

        <Highlight assets={ASSETS.gradeBook}>
          <Card
            left={t("work.gradeBook.title")}
            right={<Trans i18nKey="work.gradeBook.meta" />}
          >
            <Bullets>
              <Trans i18nKey="work.gradeBook.b1" />
            </Bullets>
          </Card>
        </Highlight>
      </Section>

      <Section title={t("sections.projects")}>
        <Grid2>
          <Highlight assets={ASSETS.minesweeper}>
            <Card left={t("projects.minesweeper.title")} meta={t("projects.minesweeper.meta")}>
              <Bullets>
                <Trans i18nKey="projects.minesweeper.b1" />
                <Trans i18nKey="projects.minesweeper.b2" />
              </Bullets>
            </Card>
          </Highlight>

          <Highlight assets={ASSETS.minecraftRL}>
            <Card left={t("projects.minecraft.title")} meta={t("projects.minecraft.meta")}>
              <Bullets>
                <Trans i18nKey="projects.minecraft.b1" />
              </Bullets>
            </Card>
          </Highlight>

          <Card left={t("projects.trading.title")} meta={<Trans i18nKey="projects.trading.meta" />}>
            <Bullets>
              <Trans i18nKey="projects.trading.b1" />
            </Bullets>
          </Card>

          <Highlight assets={ASSETS.door}>
            <Card left={t("projects.door.title")} meta={t("projects.door.meta")}>
              <Bullets>
                <Trans i18nKey="projects.door.b1" />
              </Bullets>
            </Card>
          </Highlight>
        </Grid2>
      </Section>

      <DividerBlock>
        <Row
          left={<Trans i18nKey="footer.eduLeft" />}
          right={<Trans i18nKey="footer.eduRight" />}
        />
        <p><Trans i18nKey="footer.eduLine" /></p>
        <p><Trans i18nKey="footer.languages" /></p>
        <p><Trans i18nKey="footer.interests" /></p>
      </DividerBlock>
    </AssetRail>
    </MuteProvider>
  );
}

function App() {
  return (
    <I18nProvider>
      <div className="top-bar">
        <LanguagePills />
        <PrintButton />
      </div>
      <MobileHint />
      <main className="page">
        <ResumeBody />
      </main>
    </I18nProvider>
  );
}

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

// Preload every asset referenced so first-hover playback is instant.
// (Uses default English captions dict — preload only cares about src.)
const _preloadT = (key) => {
  const en = (window.TRANSLATIONS && window.TRANSLATIONS.en) || {};
  return key.split(".").reduce((a, k) => (a == null ? a : a[k]), en) || "";
};
preloadAssets(buildAssets(_preloadT));