/* global React, ReactDOM, Sidebar, TopNav, Footer, Hero, About, Services, Gallery, Blog, Contact, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "natural",
  "headingFont": "shippori",
  "heroLayout": "split"
}/*EDITMODE-END*/;

const PALETTES = {
  natural: { '--c-paper': '#f6f1e8', '--c-paper-2': '#efe6d4', '--c-ink': '#2a1d14', '--c-ink-2': '#4a3a2c', '--c-line': '#d9cdb5', '--c-line-soft': '#e8dcc6', '--c-accent': '#c47b4f', '--c-accent-2': '#8a4a2a', '--c-sand': '#e6d8bf', '--c-stone': '#b09879' },
  smoke:   { '--c-paper': '#efece5', '--c-paper-2': '#e6e2d8', '--c-ink': '#22201c', '--c-ink-2': '#3d3a33', '--c-line': '#cfcabd', '--c-line-soft': '#dcd6c8', '--c-accent': '#8a6a48', '--c-accent-2': '#5d432a', '--c-sand': '#d8d2c2', '--c-stone': '#a0967f' },
  plum:    { '--c-paper': '#f5efe8', '--c-paper-2': '#ebe2d4', '--c-ink': '#2a1820', '--c-ink-2': '#4a2f3a', '--c-line': '#d9c8c0', '--c-line-soft': '#e8d8d0', '--c-accent': '#9c4860', '--c-accent-2': '#6a2e44', '--c-sand': '#e0c8c8', '--c-stone': '#aa8a8a' },
  matcha:  { '--c-paper': '#f3f0e2', '--c-paper-2': '#e9e4cf', '--c-ink': '#1f2818', '--c-ink-2': '#3a4a2c', '--c-line': '#c8cdb0', '--c-line-soft': '#d8dcc0', '--c-accent': '#6a8048', '--c-accent-2': '#445e2a', '--c-sand': '#d8dcb8', '--c-stone': '#9aa07e' },
};

const HEADING_FONTS = {
  shippori: '"Shippori Mincho", "Noto Serif JP", serif',
  klee:     '"Klee One", "Noto Serif JP", serif',
  zenold:   '"Zen Old Mincho", "Noto Serif JP", serif',
  rampart:  '"Rampart One", "Noto Serif JP", serif',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState('home');

  // apply palette to :root
  useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES.natural;
    Object.entries(p).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
    document.documentElement.style.setProperty('--f-mincho', HEADING_FONTS[t.headingFont] || HEADING_FONTS.shippori);
  }, [t.palette, t.headingFont]);

  // intersection-based active section
  useEffect(() => {
    const ids = ['home','about','services','gallery','blog','contact'];
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: '-30% 0px -60% 0px' });
    ids.forEach(id => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 68;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <div className="shell">
      <Sidebar />
      <TopNav active={active} onNav={scrollTo} />
      <main className="main">
        <Hero layout={t.heroLayout} />
        <About />
        <Services />
        <Gallery />
        <Blog />
        <Contact />
        <Footer onNav={scrollTo} />
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection title="カラーパレット">
          <TweakRadio
            label="tone"
            value={t.palette}
            onChange={v => setTweak('palette', v)}
            options={[
              { value: 'natural', label: 'ナチュラル' },
              { value: 'smoke', label: 'スモーク' },
              { value: 'plum', label: '梅' },
              { value: 'matcha', label: '抹茶' },
            ]}
          />
        </TweakSection>
        <TweakSection title="見出し書体">
          <TweakRadio
            label="font"
            value={t.headingFont}
            onChange={v => setTweak('headingFont', v)}
            options={[
              { value: 'shippori', label: 'しっぽり明朝' },
              { value: 'klee', label: 'Klee One' },
              { value: 'zenold', label: 'Zen Old' },
              { value: 'rampart', label: 'Rampart' },
            ]}
          />
        </TweakSection>
        <TweakSection title="ヒーロー構成">
          <TweakRadio
            label="layout"
            value={t.heroLayout}
            onChange={v => setTweak('heroLayout', v)}
            options={[
              { value: 'split', label: '左右分割' },
              { value: 'centered', label: '中央寄せ' },
              { value: 'vertical', label: '縦書き' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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