// App shell — Variant B as primary

const { useState } = React;

const AppShell = () => {
  const D = window.PORTFOLIO_DATA;
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "language": "pl",
    "showCanvas": false
  }/*EDITMODE-END*/;

  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [openProject, setOpenProject] = useState(null);

  const onProject = (id) => {
    const p = D.projects.find(x => x.id === id);
    if (p) setOpenProject(p);
  };

  const toggleLang = () => setTweak("language", tweaks.language === "pl" ? "en" : "pl");

  const variants = [
    { id: "B", title: "Cinematic Full-Bleed", subtitle: "Wybrany kierunek — pełne sekcje, hero z gameplayem, projekty jako filmowe sekwencje", Comp: window.VariantB },
    { id: "A", title: "Dark Editorial", subtitle: "Alternatywa — czarny canvas, serif, akcent złoty", Comp: window.VariantA },
  ];

  if (!tweaks.showCanvas) {
    return (
      <>
        <window.VariantB lang={tweaks.language} onProject={onProject} onToggleLang={toggleLang} />
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Język">
            <window.TweakRadio label="Lang" value={tweaks.language} onChange={(v) => setTweak("language", v)}
              options={[{label: "Polski", value: "pl"}, {label: "English", value: "en"}]} />
          </window.TweakSection>
          <window.TweakSection title="Widok">
            <window.TweakToggle label="Pokaż wszystkie warianty (canvas)" value={tweaks.showCanvas} onChange={(v) => setTweak("showCanvas", v)} />
          </window.TweakSection>
        </window.TweaksPanel>
        {openProject && <window.ProjectModal project={openProject} lang={tweaks.language} onClose={() => setOpenProject(null)} />}
      </>
    );
  }

  return (
    <>
      <window.DesignCanvas title="JOP Creativity — Portfolio" subtitle="Janusz Otto-Pawlicki · 3 kierunki wizualne · PL / EN">
        {variants.map(v => (
          <window.DCSection key={v.id} id={v.id} title={`Wariant ${v.id} — ${v.title}`} subtitle={v.subtitle}>
            <window.DCArtboard id={`${v.id}-desktop`} label="Desktop · 1440" width={1440} height={4800}>
              <v.Comp lang={tweaks.language} onProject={onProject} onToggleLang={toggleLang} />
            </window.DCArtboard>
            <window.DCArtboard id={`${v.id}-mobile`} label="Mobile · 390" width={390} height={5200}>
              <v.Comp lang={tweaks.language} onProject={onProject} onToggleLang={toggleLang} />
            </window.DCArtboard>
          </window.DCSection>
        ))}
      </window.DesignCanvas>
      <window.TweaksPanel title="Tweaks">
        <window.TweakSection title="Język">
          <window.TweakRadio label="Lang" value={tweaks.language} onChange={(v) => setTweak("language", v)}
            options={[{label: "Polski", value: "pl"}, {label: "English", value: "en"}]} />
        </window.TweakSection>
        <window.TweakSection title="Widok">
          <window.TweakToggle label="Tryb canvas (3 warianty)" value={tweaks.showCanvas} onChange={(v) => setTweak("showCanvas", v)} />
        </window.TweakSection>
      </window.TweaksPanel>
      {openProject && <window.ProjectModal project={openProject} lang={tweaks.language} onClose={() => setOpenProject(null)} />}
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<AppShell />);