// Top-level App: hero + about + 3 genre sections + footer + tweaks panel.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "paper": "#ece1c8",
  "ink": "#1c1410",
  "accent": "#a84a32",
  "displayFont": "Cormorant Garamond",
  "showHero": true,
  "compact": false,
  "stripeAngle": 32
}/*EDITMODE-END*/;

function AppInner() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { t: i18n } = useI18n();

  // Apply tokens to :root so CSS picks them up everywhere.
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--paper", t.paper);
    r.setProperty("--ink", t.ink);
    r.setProperty("--accent", t.accent);
    r.setProperty("--font-display", `"${t.displayFont}", "EB Garamond", Georgia, serif`);
    r.setProperty("--stripe-angle", `${t.stripeAngle}deg`);
    document.body.dataset.compact = t.compact ? "1" : "0";
  }, [t]);

  const tw = i18n.tweaks;

  return (
    <div className="page">
      <SiteHeader />

      {t.showHero && <Hero tweaks={t} />}

      <main className="main">
        <section className="portfolio" id="portfolio" data-screen-label="Portfolio">
          <PortfolioHead />

          <div className="track-list">
            {CATALOG.flatMap((g) => g.tracks.map((tr) => ({ tr, g }))).map(
              ({ tr, g }, i) => (
                <TrackCard
                  key={tr.id}
                  track={{ ...tr, no: String(i + 1).padStart(2, "0") }}
                  genre={{ ...g, code: "P" }}
                  accent={t.accent}
                />
              )
            )}
          </div>
        </section>

        <About />
      </main>

      <SiteFooter />

      <TweaksPanel title={tw.title}>
        <TweakSection label={tw.palette} />
        <TweakColor  label={tw.paper}  value={t.paper}  onChange={(v) => setTweak("paper", v)} />
        <TweakColor  label={tw.ink}    value={t.ink}    onChange={(v) => setTweak("ink", v)} />
        <TweakColor  label={tw.accent} value={t.accent} onChange={(v) => setTweak("accent", v)} />

        <TweakSection label={tw.type} />
        <TweakSelect
          label={tw.displayFont}
          value={t.displayFont}
          options={[
            "EB Garamond",
            "Cormorant Garamond",
            "Fraunces",
            "DM Serif Display",
            "Playfair Display",
          ]}
          onChange={(v) => setTweak("displayFont", v)}
        />

        <TweakSection label={tw.layout} />
        <TweakToggle label={tw.showHero} value={t.showHero}  onChange={(v) => setTweak("showHero", v)} />
        <TweakToggle label={tw.compact}  value={t.compact}   onChange={(v) => setTweak("compact", v)} />
        <TweakSlider
          label={tw.angle}
          value={t.stripeAngle}
          min={0}
          max={90}
          unit="°"
          onChange={(v) => setTweak("stripeAngle", v)}
        />

        <TweakSection label={tw.quick} />
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <TweakButton
            label={tw.pDefault}
            secondary
            onClick={() =>
              setTweak({ paper: "#ece1c8", ink: "#1c1410", accent: "#a84a32" })
            }
          />
          <TweakButton
            label={tw.pBone}
            secondary
            onClick={() =>
              setTweak({ paper: "#e6dcc4", ink: "#1a1b14", accent: "#6b6a2f" })
            }
          />
          <TweakButton
            label={tw.pSand}
            secondary
            onClick={() =>
              setTweak({ paper: "#e2d5b8", ink: "#161616", accent: "#2a3340" })
            }
          />
          <TweakButton
            label={tw.pNight}
            secondary
            onClick={() =>
              setTweak({ paper: "#1d1612", ink: "#ebdcc1", accent: "#d99a55" })
            }
          />
        </div>
      </TweaksPanel>
    </div>
  );
}

function App() {
  return (
    <I18nProvider>
      <AppInner />
    </I18nProvider>
  );
}

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