// KailiTweaks — loaded after tweaks-panel.jsx so globals are available

const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS || {
  accentColor: "#8B7355",
  bodyFont: "Jost",
  heroCopy: "Every moment seen anew.",
  showFilmography: true
};

function KailiTweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--tan', tweaks.accentColor);
  }, [tweaks.accentColor]);

  React.useEffect(() => {
    document.documentElement.style.setProperty(
      '--sans',
      `'${tweaks.bodyFont}', system-ui, sans-serif`
    );
  }, [tweaks.bodyFont]);

  React.useEffect(() => {
    const el = document.querySelector('.hero-headline');
    if (!el) return;
    const parts = tweaks.heroCopy.split('\n');
    if (parts.length > 1) {
      el.innerHTML = parts[0] + '<br /><em>' + parts[1] + '</em>';
    } else {
      el.textContent = tweaks.heroCopy;
    }
  }, [tweaks.heroCopy]);

  React.useEffect(() => {
    const filmography = document.querySelector('.filmography');
    if (filmography) filmography.style.display = tweaks.showFilmography ? 'grid' : 'none';
  }, [tweaks.showFilmography]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand">
        <TweakColor
          label="Accent colour"
          value={tweaks.accentColor}
          onChange={v => setTweak('accentColor', v)}
        />
        <TweakSelect
          label="Body typeface"
          value={tweaks.bodyFont}
          options={['Jost', 'DM Sans', 'Lato', 'Montserrat', 'Raleway']}
          onChange={v => setTweak('bodyFont', v)}
        />
      </TweakSection>
      <TweakSection label="Hero">
        <TweakText
          label="Headline (newline = italic 2nd line)"
          value={tweaks.heroCopy}
          onChange={v => setTweak('heroCopy', v)}
        />
      </TweakSection>
      <TweakSection label="Content">
        <TweakToggle
          label="Show filmography"
          value={tweaks.showFilmography}
          onChange={v => setTweak('showFilmography', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweaksRoot = document.createElement('div');
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<KailiTweaks />);