// Main app — wraps the three variations in a design canvas, wires Tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "pl",
  "cursorStyle": "star",
  "accentE": "#6E28C7",
  "accentC": "#C9A96E",
  "accentS": "#1C1C1E",
  "highlight": "#FF1493",
  "gridCols": 4,
  "serifFont": "Cormorant Garamond",
  "darkContactFirst": false
}/*EDITMODE-END*/;

const SERIF_FONTS = [
  { value: "Cormorant Garamond", label: "Cormorant" },
  { value: "Fraunces",           label: "Fraunces"  },
  { value: "Playfair Display",   label: "Playfair"  },
];

const ACCENTS = [
  { value: "#0A0E1A", label: "Navy"      },
  { value: "#1C1C1E", label: "Graphite"  },
  { value: "#5A1F1A", label: "Burgundy"  },
];
const HIGHLIGHTS = [
  { value: "#C9A96E", label: "Champagne" },
  { value: "#B8894A", label: "Antique"   },
  { value: "#E2C98A", label: "Pale Gold" },
];
const CURSORS = [
  { value: "star",      label: "Star ✨"   },
  { value: "circle",    label: "Circle"    },
  { value: "crosshair", label: "Crosshair" },
  { value: "none",      label: "None"      },
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Shared common props
  const common = {
    lang: t.lang,
    cursorStyle: t.cursorStyle,
    highlight: t.highlight,
    gridCols: t.gridCols,
    serifFont: t.serifFont,
    darkContactFirst: t.darkContactFirst,
  };

  return (
    <>
      <VariationEditorial {...common} accent={t.accentE} />

      <TweaksPanel title="Tweaks · VWP">
        <TweakSection label="Language" />
        <TweakRadio label="Język" value={t.lang}
          options={[{value:"pl",label:"PL"},{value:"en",label:"EN"}]}
          onChange={(v)=>setTweak("lang", v)} />

        <TweakSection label="Kursor" />
        <TweakRadio label="Styl" value={t.cursorStyle}
          options={CURSORS}
          onChange={(v)=>setTweak("cursorStyle", v)} />

        <TweakSection label="Typografia" />
        <TweakSelect label="Font serif" value={t.serifFont}
          options={SERIF_FONTS}
          onChange={(v)=>setTweak("serifFont", v)} />

        <TweakSection label="Portfolio grid" />
        <TweakRadio label="Kolumny" value={t.gridCols}
          options={[{value:2,label:"2"},{value:3,label:"3"},{value:4,label:"4"}]}
          onChange={(v)=>setTweak("gridCols", Number(v))} />

        <TweakSection label="Accent — Editorial (A)" />
        <TweakColor label="Accent" value={t.accentE} onChange={(v)=>setTweak("accentE", v)} />
        <TweakRadio label="Preset" value={t.accentE}
          options={ACCENTS}
          onChange={(v)=>setTweak("accentE", v)} />

        <TweakSection label="Accent — Cinematic (B)" />
        <TweakColor label="Accent" value={t.accentC} onChange={(v)=>setTweak("accentC", v)} />

        <TweakSection label="Accent — Swiss (C)" />
        <TweakColor label="Accent" value={t.accentS} onChange={(v)=>setTweak("accentS", v)} />
        <TweakRadio label="Preset" value={t.accentS}
          options={ACCENTS}
          onChange={(v)=>setTweak("accentS", v)} />

        <TweakSection label="Highlight (gold)" />
        <TweakColor label="Color" value={t.highlight} onChange={(v)=>setTweak("highlight", v)} />
        <TweakRadio label="Preset" value={t.highlight}
          options={HIGHLIGHTS}
          onChange={(v)=>setTweak("highlight", v)} />

        <TweakSection label="Układ sekcji" />
        <TweakToggle label="Kontakt na ciemno" value={t.darkContactFirst}
          onChange={(v)=>setTweak("darkContactFirst", v)} />
      </TweaksPanel>
    </>
  );
}

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