/* global React, ReactDOM, COPY, Sections, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle, TweakSelect */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1b6e3b",
  "fontPair": "serif-display",
  "heroVariant": "split",
  "theme": "light",
  "density": "default",
  "language": "en",
  "showDemo": true
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  "serif-display": { display: "'Instrument Serif', 'Times New Roman', serif", body: "'Geist', ui-sans-serif, system-ui, sans-serif", mono: "'Geist Mono', ui-monospace, Menlo, monospace", googleFonts: ["Instrument Serif:ital@0;1", "Geist:wght@400;500;600", "Geist Mono:wght@400;500"] },
  "swiss": { display: "'Söhne', 'Helvetica Neue', Helvetica, Arial, sans-serif", body: "'Söhne', 'Helvetica Neue', Helvetica, Arial, sans-serif", mono: "'JetBrains Mono', ui-monospace, Menlo, monospace", googleFonts: ["JetBrains Mono:wght@400;500"] },
  "editorial": { display: "'Fraunces', Georgia, serif", body: "'Inter', system-ui, sans-serif", mono: "'JetBrains Mono', monospace", googleFonts: ["Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700", "Inter:wght@400;500;600", "JetBrains Mono:wght@400;500"] },
  "mono-led": { display: "'JetBrains Mono', ui-monospace, monospace", body: "'Inter', system-ui, sans-serif", mono: "'JetBrains Mono', monospace", googleFonts: ["JetBrains Mono:wght@400;500;700", "Inter:wght@400;500"] },
};

function injectFonts(pair) {
  const id = "praatbox-fonts";
  let link = document.getElementById(id);
  if (!link) {
    link = document.createElement("link");
    link.id = id;
    link.rel = "stylesheet";
    document.head.appendChild(link);
  }
  const families = (FONT_PAIRS[pair]?.googleFonts || []).map((f) => `family=${encodeURIComponent(f)}`).join("&");
  link.href = `https://fonts.googleapis.com/css2?${families}&display=swap`;
}

function App() {
  const [tw, setTw] = useTweaks(TWEAK_DEFAULTS);

  // apply CSS variables + theme
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", tw.accent);
    root.style.setProperty("--accent-ink", "#ffffff");
    root.setAttribute("data-theme", tw.theme);
    root.setAttribute("data-density", tw.density);
    const fp = FONT_PAIRS[tw.fontPair] || FONT_PAIRS["serif-display"];
    root.style.setProperty("--font-display", fp.display);
    root.style.setProperty("--font-body", fp.body);
    root.style.setProperty("--font-mono", fp.mono);
    injectFonts(tw.fontPair);
  }, [tw.accent, tw.theme, tw.density, tw.fontPair]);

  const t = COPY[tw.language] || COPY.en;
  const { Nav, Hero, LogoStrip, HowItWorks, Features, Showcase, Pricing, Stats, Testimonials, Developer, BigCTA, Footer } = Sections;

  return (
    <>
      <Nav t={t} />
      <Hero t={t} variant={tw.heroVariant} language={tw.language} accent={tw.accent} showDemo={tw.showDemo} />
      <LogoStrip t={t} />
      <HowItWorks t={t} />
      <Features t={t} />
      <Showcase t={t} language={tw.language} accent={tw.accent} />
      <window.DashboardPreview t={t} accent={tw.accent} />
      <Pricing t={t} />
      <Stats t={t} />
      <Testimonials t={t} />
      <Developer t={t} />
      <BigCTA t={t} />
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor label="Accent" value={tw.accent} onChange={(v) => setTw("accent", v)} />
          <TweakSelect
            label="Font pairing"
            value={tw.fontPair}
            onChange={(v) => setTw("fontPair", v)}
            options={[
              { label: "Instrument Serif × Geist (default)", value: "serif-display" },
              { label: "Swiss — Helvetica all the way", value: "swiss" },
              { label: "Editorial — Fraunces × Inter", value: "editorial" },
              { label: "Mono-led — JetBrains × Inter", value: "mono-led" },
            ]}
          />
        </TweakSection>

        <TweakSection title="Layout">
          <TweakRadio
            label="Hero variant"
            value={tw.heroVariant}
            onChange={(v) => setTw("heroVariant", v)}
            options={[
              { label: "Split", value: "split" },
              { label: "Centered", value: "center" },
              { label: "Demo first", value: "demo" },
            ]}
          />
          <TweakRadio
            label="Theme"
            value={tw.theme}
            onChange={(v) => setTw("theme", v)}
            options={[
              { label: "Light", value: "light" },
              { label: "Dark", value: "dark" },
            ]}
          />
          <TweakRadio
            label="Density"
            value={tw.density}
            onChange={(v) => setTw("density", v)}
            options={[
              { label: "Compact", value: "compact" },
              { label: "Default", value: "default" },
              { label: "Airy", value: "airy" },
            ]}
          />
        </TweakSection>

        <TweakSection title="Content">
          <TweakRadio
            label="Language"
            value={tw.language}
            onChange={(v) => setTw("language", v)}
            options={[
              { label: "English", value: "en" },
              { label: "Nederlands", value: "nl" },
            ]}
          />
          <TweakToggle label="Show widget demo in hero" value={tw.showDemo} onChange={(v) => setTw("showDemo", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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