// App tweaks panel & root
const { useState: useStateApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "terracotta",
  "tone": "warm",
  "fontPair": "zen-noto"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement.style;
  // Accent
  const accents = {
    terracotta: { terra: '#C76B4A', terraSoft: '#f6e6dd' },
    navy:       { terra: '#2E5984', terraSoft: '#dde8f3' },
    mustard:    { terra: '#C9A227', terraSoft: '#f6efd6' },
    plum:       { terra: '#8E4F6E', terraSoft: '#f0e0e8' },
  };
  const a = accents[t.accent] || accents.terracotta;
  root.setProperty('--terra', a.terra);
  root.setProperty('--terra-soft', a.terraSoft);

  // Tone (background warmth)
  const tones = {
    warm:    { bg: '#FAF6F0', bg2: '#F2EBDF' },
    cool:    { bg: '#F4F6F9', bg2: '#E8ECF2' },
    neutral: { bg: '#F7F7F5', bg2: '#EDEDE7' },
  };
  const tn = tones[t.tone] || tones.warm;
  root.setProperty('--bg', tn.bg);
  root.setProperty('--bg2', tn.bg2);
  document.body.style.background = tn.bg;
  // Override --bg-2 too
  root.setProperty('--bg-2', tn.bg2);

  // Font
  const fonts = {
    'zen-noto':   { disp: "'Zen Kaku Gothic New', sans-serif", body: "'Noto Sans JP', sans-serif" },
    'maru':       { disp: "'Zen Maru Gothic', sans-serif",     body: "'Noto Sans JP', sans-serif" },
    'mincho':     { disp: "'Shippori Mincho', serif",          body: "'Noto Sans JP', sans-serif" },
  };
  const f = fonts[t.fontPair] || fonts['zen-noto'];
  root.setProperty('--font-disp', f.disp);
  root.setProperty('--font-body', f.body);
}

function App() {
  // デフォルトテーマ（terracotta / warm / zen-noto）を初回マウント時に適用
  React.useEffect(() => { applyTweaks(TWEAK_DEFAULTS); }, []);

  return (
    <React.Fragment>
      <Hero />
      <Problems />
      <ScenarioSection />
      <Flow />
      <Support />
      <FAQ />
      <FinalCTA />
      <Footer />
      <FloatingCTA />
    </React.Fragment>
  );
}

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