// Main App composition + Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "headingFont": "Shippori Mincho",
  "goldHue": 75,
  "windAnimation": true,
  "density": "comfortable"
}/*EDITMODE-END*/;

const FONT_OPTIONS = {
  'Shippori Mincho': "'Shippori Mincho', serif",
  'Noto Serif JP': "'Noto Serif JP', serif",
  'Zen Old Mincho': "'Zen Old Mincho', serif",
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute('data-theme', t.theme);
  root.style.setProperty('--f-jp-serif', FONT_OPTIONS[t.headingFont] || FONT_OPTIONS['Shippori Mincho']);
  root.style.setProperty('--kin', `oklch(0.78 0.09 ${t.goldHue})`);
  root.style.setProperty('--kin-dim', `oklch(0.62 0.08 ${t.goldHue - 5})`);
  if (t.density === 'compact') {
    root.style.setProperty('--section-y', 'clamp(56px, 8vw, 100px)');
  } else {
    root.style.setProperty('--section-y', 'clamp(80px, 12vw, 160px)');
  }
}

function AppInner() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('in'); obs.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  });

  return (
    <>
      <Header active="home" />
      <Hero />
      <About />
      <Profile />
      <Business />
      <Culture />
      <Footer />

      <TweaksPanel title="Tweaks · 風都">
        <TweakSection title="Theme">
          <TweakRadio label="背景"
            value={tweaks.theme}
            onChange={v => setTweak('theme', v)}
            options={[{ label: 'Dark · 玄', value: 'dark' }, { label: 'Bright · 和', value: 'bright' }]}
          />
          <TweakSelect label="見出し書体"
            value={tweaks.headingFont}
            onChange={v => setTweak('headingFont', v)}
            options={Object.keys(FONT_OPTIONS).map(k => ({ label: k, value: k }))}
          />
          <TweakSlider label="金 / 色相"
            value={tweaks.goldHue}
            min={40} max={120} step={1}
            onChange={v => setTweak('goldHue', v)}
          />
          <TweakSelect label="情報密度"
            value={tweaks.density}
            onChange={v => setTweak('density', v)}
            options={[{label:'ゆったり', value:'comfortable'},{label:'コンパクト', value:'compact'}]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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

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