// app.jsx — root, routing, theme, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "#E8643C",
  "headingFont": "Inter Tight",
  "showCases": true,
  "heroVariant": "default"
}/*EDITMODE-END*/;

const ACCENT_PRESETS = {
  '#E8643C': { soft: '#FBE7DD', deep: '#C4471F' },         // warm orange (default)
  '#D6422A': { soft: '#FBDFD7', deep: '#A82E18' },         // alert red
  '#0A0A0A': { soft: '#EEEEEC', deep: '#000000' },         // pure mono
  '#2C5BFF': { soft: '#E0E8FF', deep: '#0F3BCC' },         // trust blue
};
const FONT_PRESETS = {
  'Inter Tight': { sans: "'Inter Tight', 'Noto Sans TC', sans-serif" },
  'Geist': { sans: "'Geist', 'Inter Tight', 'Noto Sans TC', sans-serif" },
  'Helvetica': { sans: "'Helvetica Neue', Helvetica, 'Noto Sans TC', sans-serif" },
  'Noto Serif': { sans: "'Noto Serif TC', 'Inter Tight', serif" },
};

function useRoute() {
  const [route, setRoute] = useState(() => {
    const h = window.location.hash;
    if (h.startsWith('#/contact')) return 'contact';
    return 'home';
  });
  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash;
      if (h.startsWith('#/contact')) setRoute('contact');
      else setRoute('home');
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const navigate = (target) => {
    if (target === 'contact') window.location.hash = '#/contact';
    else { window.location.hash = '#/'; window.scrollTo({ top: 0, behavior: 'smooth' }); }
    setRoute(target);
  };
  return [route, navigate];
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, navigate] = useRoute();
  const [lang, setLang] = useState('zh');

  // apply theme + accent + font
  useEffect(() => {
    document.documentElement.dataset.theme = t.theme;
    const preset = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS['#E8643C'];
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-soft', preset.soft);
    document.documentElement.style.setProperty('--accent-deep', preset.deep);
    const fontPreset = FONT_PRESETS[t.headingFont] || FONT_PRESETS['Inter Tight'];
    document.documentElement.style.setProperty('--font-sans', fontPreset.sans);
  }, [t.theme, t.accent, t.headingFont]);

  // scroll to top when navigating to home or contact
  useEffect(() => {
    if (route === 'contact') window.scrollTo({ top: 0, behavior: 'auto' });
  }, [route]);

  const tr = TRANSLATIONS[lang];

  return (
    <>
      <Nav route={route} lang={lang} onNav={navigate} onLangChange={setLang} t={tr} />
      {route === 'home' && <Home t={tr} lang={lang} onNav={navigate} />}
      {route === 'contact' && <Contact t={tr} lang={lang} onNav={navigate} />}
      <Footer onNav={navigate} lang={lang} t={tr} />

      <TweaksPanel>
        <TweakSection label={lang === 'zh' ? '主題' : 'Theme'} />
        <TweakRadio label={lang === 'zh' ? '配色' : 'Mode'} value={t.theme}
                    options={['light', 'dark']}
                    onChange={(v) => setTweak('theme', v)} />
        <TweakRadio label={lang === 'zh' ? '品牌色' : 'Accent'} value={t.accent}
                    options={[
                      { value: '#E8643C', label: 'Orange' },
                      { value: '#D6422A', label: 'Red' },
                      { value: '#0A0A0A', label: 'Mono' },
                      { value: '#2C5BFF', label: 'Blue' },
                    ]}
                    onChange={(v) => setTweak('accent', v)} />

        <TweakSection label={lang === 'zh' ? '字體' : 'Typography'} />
        <TweakSelect label={lang === 'zh' ? '主字體' : 'Sans'} value={t.headingFont}
                     options={Object.keys(FONT_PRESETS)}
                     onChange={(v) => setTweak('headingFont', v)} />

        <TweakSection label={lang === 'zh' ? '內容' : 'Content'} />
        <TweakToggle label={lang === 'zh' ? '顯示案例' : 'Show cases'} value={t.showCases}
                     onChange={(v) => setTweak('showCases', v)} />
      </TweaksPanel>
    </>
  );
}

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