// SourceWeaver theme picker — wraps the Landing root and renders a TweaksPanel.

function ThemedLanding() {
  const [tweaks, setTweak] = useTweaks({ theme: 'terminal' });

  React.useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme;
    // Propagate theme to embedded app iframes (e.g. the hero AppShell mock).
    const frames = document.querySelectorAll('iframe[data-sw-app]');
    frames.forEach(f => {
      try { f.contentWindow.postMessage({ type: '__sw_set_theme', theme: tweaks.theme }, '*'); } catch {}
    });
  }, [tweaks.theme]);

  // Re-apply the URL hash after first paint. Babel-in-browser transpiles the
  // page async, so on a cold load with #anchor the section doesn't exist yet
  // when the browser tries to resolve it.
  React.useEffect(() => {
    const id = window.location.hash.slice(1);
    if (!id) return;
    const tryScroll = () => {
      const el = document.getElementById(id);
      if (el) el.scrollIntoView({ block: 'start' });
    };
    tryScroll();
    const t = setTimeout(tryScroll, 200);
    return () => clearTimeout(t);
  }, []);

  return (
    <>
      <Landing />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            value={tweaks.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'terminal', label: 'Terminal' },
              { value: 'mid',      label: 'Mid' },
              { value: 'light',    label: 'Light' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

Object.assign(window, { ThemedLanding });