/* global React, Nav, Hero, About, Work, Journal, Speaking, Gallery, Contact, PageFooter, HERO_PHOTOS, useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakRadio */

const { useEffect: useAppEffect } = React;

const SECTION_PRESETS = {
  standard: { label: 'Standard', order: ['about', 'work', 'journal', 'speaking', 'gallery'] },
  speaking: { label: 'Speaking-first', order: ['about', 'speaking', 'work', 'journal', 'gallery'] },
  journal: { label: 'Journal-first', order: ['about', 'journal', 'speaking', 'work', 'gallery'] },
  work: { label: 'Work-first (CEO)', order: ['about', 'work', 'speaking', 'journal', 'gallery'] },
  family: { label: 'Personal-first', order: ['about', 'journal', 'gallery', 'speaking', 'work'] },
};

const SECTION_COMPONENTS = {
  about: About,
  work: Work,
  journal: Journal,
  speaking: Speaking,
  gallery: Gallery,
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cream",
  "heroPhoto": 1,
  "sectionOrder": "standard"
}/*EDITMODE-END*/;

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

  useAppEffect(() => {
    document.body.classList.toggle('theme-dark', t.palette === 'dark');
  }, [t.palette]);

  const jumpTo = (id) => {
    if (id === 'top') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const orderKey = SECTION_PRESETS[t.sectionOrder] ? t.sectionOrder : 'standard';
  const order = SECTION_PRESETS[orderKey].order;

  return (
    <div className="fk-app">
      <Nav
        onJump={jumpTo}
        dark={t.palette === 'dark'}
        onToggleTheme={() => setTweak('palette', t.palette === 'dark' ? 'cream' : 'dark')}
      />
      <Hero onJump={jumpTo} heroIndex={t.heroPhoto || 0} />
      {order.map((key) => {
        const C = SECTION_COMPONENTS[key];
        return C ? <C key={key} /> : null;
      })}
      <Contact />
      <PageFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette">
          <TweakRadio
            label="Theme"
            value={t.palette}
            options={[
              { value: 'cream', label: 'Cream' },
              { value: 'dark', label: 'Pacific' },
            ]}
            onChange={(v) => setTweak('palette', v)}
          />
        </TweakSection>
        <TweakSection label="Hero portrait">
          <TweakSelect
            label="Photo"
            value={String(t.heroPhoto || 0)}
            options={HERO_PHOTOS.map((p, i) => ({
              value: String(i),
              label: `${i + 1}. ${p.label}`,
            }))}
            onChange={(v) => setTweak('heroPhoto', Number(v))}
          />
        </TweakSection>
        <TweakSection label="Section order">
          <TweakSelect
            label="Preset"
            value={t.sectionOrder}
            options={Object.entries(SECTION_PRESETS).map(([k, v]) => ({ value: k, label: v.label }))}
            onChange={(v) => setTweak('sectionOrder', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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