// Main App — assembles all sections and provides Tweaks panel

const ACCENT_COLORS = {
  orange: '#FF6B1A',
  red: '#E5223A',
  green: '#1ED760',
  pink: '#FF1F8F',
  cyan: '#3FA9F5',
  purple: '#7A2DD4',
};

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply font + bg tweaks via body data attributes
  React.useEffect(() => {
    document.body.dataset.bg = t.bg;
    document.body.dataset.font = t.font;
    document.documentElement.style.setProperty('--accent', ACCENT_COLORS[t.accent] || ACCENT_COLORS.orange);
  }, [t.bg, t.font, t.accent]);

  const tweaks = {
    ...t,
    accentColor: ACCENT_COLORS[t.accent] || ACCENT_COLORS.orange,
  };

  return (
    <>
      <Hero tweaks={tweaks} />
      <Features tweaks={tweaks} />
      <HowTo tweaks={tweaks} />
      <Voices tweaks={tweaks} />
      <FAQ tweaks={tweaks} />
      <CTA tweaks={tweaks} />
      <Footer tweaks={tweaks} />

      <TweaksPanel>
        <TweakSelect
          label="Copy"
          value={t.headline}
          options={[
            { value: 'default', label: '音楽をDIGれ。' },
            { value: 'discover', label: '知らない音楽が、聴きたくなる。' },
            { value: 'bridge', label: 'Spotifyも、Apple Musicも。' },
            { value: 'mood', label: '今日のあなたの、一曲を投げろ。' },
          ]}
          onChange={(v) => setTweak('headline', v)}
        />

        <TweakSection label="Visuals" />
        <TweakRadio
          label="Font"
          value={t.font}
          options={[
            { value: 'modern', label: 'モダン' },
            { value: 'display', label: 'ディスプレイ' },
          ]}
          onChange={(v) => setTweak('font', v)}
        />
        <TweakRadio
          label="背景"
          value={t.bg}
          options={[
            { value: 'pure', label: '漆黒' },
            { value: 'grad', label: 'グラデ' },
            { value: 'noise', label: 'ノイズ' },
          ]}
          onChange={(v) => setTweak('bg', v)}
        />
        <TweakRadio
          label="ヒーロー"
          value={t.heroLayout}
          options={[
            { value: 'tilted', label: '斜め' },
            { value: 'left', label: '左' },
            { value: 'center', label: '中央' },
          ]}
          onChange={(v) => setTweak('heroLayout', v)}
        />
        <TweakColor
          label="アクセント"
          value={ACCENT_COLORS[t.accent]}
          options={[
            ACCENT_COLORS.orange,
            ACCENT_COLORS.red,
            ACCENT_COLORS.green,
            ACCENT_COLORS.pink,
            ACCENT_COLORS.cyan,
            ACCENT_COLORS.purple,
          ]}
          onChange={(hex) => {
            const key = Object.keys(ACCENT_COLORS).find(k => ACCENT_COLORS[k] === hex) || 'orange';
            setTweak('accent', key);
          }}
        />
      </TweaksPanel>
    </>
  );
}

window.App = App;