// app.jsx — main App shell with routing + theming

const THEMES = {
  kinari: {
    name: '生成り',
    bg: '#f5f0e6',
    bg2: '#ede6d5',
    bg3: '#e2d6c0',
    fg: '#2d1f0e',
    fg2: '#6b4d2a',
    accent: '#8b4a1e',
    accent2: '#c4956a',
    border: '#cdb898',
    navBg: '#2d1f0e',
    navFg: '#f5f0e6',
  },
  sumi: {
    name: '墨',
    bg: '#161210',
    bg2: '#1e1a15',
    bg3: '#2a2420',
    fg: '#e8dfd0',
    fg2: '#a89878',
    accent: '#c9a96c',
    accent2: '#e8c990',
    border: '#3a3028',
    navBg: '#0e0b09',
    navFg: '#e8dfd0',
  },
  midori: {
    name: '緑',
    bg: '#f2f0e6',
    bg2: '#e6e2d2',
    bg3: '#d8d2bc',
    fg: '#1a2015',
    fg2: '#4a5e3a',
    accent: '#4a6741',
    accent2: '#7a9a68',
    border: '#b0c090',
    navBg: '#1a2015',
    navFg: '#f2f0e6',
  },
};

function App() {
  const [page, setPage] = React.useState('home');
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "theme": "kinari"
  }/*EDITMODE-END*/);

  const t = THEMES[tweaks.theme] || THEMES.kinari;

  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, [page]);

  const pageMap = {
    home: <HomePage setPage={setPage} theme={t} />,
    products: <ProductsPage theme={t} />,
    company: <CompanyPage theme={t} />,
    contact: <ContactPage theme={t} />,
  };

  return (
    <div style={{ fontFamily: "'Noto Sans JP', sans-serif", background: t.bg, minHeight: '100vh' }}>
      <style>{`
        @media (max-width: 768px) {
          .desktop-nav { display: none !important; }
          .hamburger { display: flex !important; }
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: ${t.bg}; }
        button:focus-visible { outline: 2px solid ${t.accent}; outline-offset: 2px; }
        input:focus, textarea:focus { border-color: ${t.accent} !important; }
        ::placeholder { opacity: 0.4; }
      `}</style>
      <KHeader page={page} setPage={setPage} theme={t} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
      <main>{pageMap[page] || pageMap.home}</main>
      <KFooter setPage={setPage} theme={t} />
      <TweaksPanel>
        <TweakSection label="カラーテーマ">
          <TweakRadio label="配色" value={tweaks.theme} options={[
            { value: 'kinari', label: '生成り' },
            { value: 'sumi', label: '墨' },
            { value: 'midori', label: '緑' },
          ]} onChange={v => setTweak('theme', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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