// App — page dispatcher.
// Each HTML file sets window.EVE_RICHE_PAGE = 'home' | 'about' | 'books' | 'series' | 'bonuses' | 'warnings'.
// Header, footer, background, cursor, and modals are shared across all pages.

const { useState, useEffect, useMemo } = React;

function App() {
  const [t, setTweak] = useTweaks(window.EVE_RICHE_DEFAULTS);
  const [bookOpen, setBookOpen] = useState(null);

  const page = (window.EVE_RICHE_PAGE || 'home').toLowerCase();

  const featured = useMemo(() => {
    if (t.seriesMode === 'gods') return BOOKS.find((b) => b.id === 'taint');
    if (t.seriesMode === 'cuc')  return BOOKS.find((b) => b.id === 'cuc-1');
    return BOOKS.find((b) => b.id === 'what-we-bury');
  }, [t.seriesMode]);

  function signup() {
    scrollToId('newsletter');
    setTimeout(() => {
      const input = document.querySelector('.er-form input');
      if (input) input.focus();
    }, 700);
  }

  function pickSeries(k) {
    setTweak('seriesMode', k);
  }

  // --- background-preview mode (dev only) -------------------
  if (t.bgOnly) {
    return (
      <div
        className="er-shell"
        data-palette={t.palette}
        data-density={t.density}
        data-bg={t.bg}
      >
        <div className="er-bg-decor" />
        <div style={{ height: '300vh' }} />
        <div style={{
          position: 'fixed', top: 24, left: 24, zIndex: 200,
          fontFamily: 'var(--er-label)',
          fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase',
          color: 'var(--er-ink-dim)' }}>
          Background preview · toggle off in Tweaks to see the site
        </div>
        <TweaksPanel title="Tweaks" startOpen={true}>
          <TweakSection label="Preview" />
          <TweakToggle label="Background only" value={t.bgOnly} onChange={(v) => setTweak('bgOnly', v)} />
          <TweakSection label="Background" />
          <TweakSelect
            label="Style"
            value={t.bg}
            options={[
              { value: 'clean',          label: 'Clean noir' },
              { value: 'damask',         label: 'Damask wallpaper' },
              { value: 'smoke',          label: 'Drifting smoke' },
              { value: 'snake',          label: 'Snake · gold' },
              { value: 'snake-crimson',  label: 'Snake · crimson' },
              { value: 'gold-spot',      label: 'Noir + gold halo' },
              { value: 'crimson-spot',   label: 'Noir + crimson halo' },
            ]}
            onChange={(v) => setTweak('bg', v)}
          />
          <TweakSection label="Palette" />
          <TweakRadio
            label="Mood"
            value={t.palette}
            options={[
              { value: 'noir',  label: 'Noir' },
              { value: 'ivory', label: 'Ivory' },
            ]}
            onChange={(v) => setTweak('palette', v)}
          />
        </TweaksPanel>
      </div>
    );
  }

  // --- per-page body --------------------------------------
  let body;
  if (page === 'about') {
    body = <AboutPage />;
  } else if (page === 'books') {
    body = <BooksPage seriesMode={t.seriesMode} onPickSeries={pickSeries} onOpenBook={setBookOpen} />;
  } else if (page === 'bonuses') {
    body = <BonusesPage />;
  } else if (page === 'warnings') {
    body = <WarningsPage />;
  } else if (page === 'arc') {
    body = <ArcPage />;
  } else if (page === 'reading-order') {
    body = <ReadingOrderPage onOpenBook={setBookOpen} />;
  } else if (page === 'media') {
    body = <MediaPage />;
  } else if (page === 'privacy') {
    body = <PrivacyPage />;
  } else if (page === 'terms') {
    body = <TermsPage />;
  } else if (page === 'accessibility') {
    body = <AccessibilityPage />;
  } else {
    body = (
      <HomePage
        featured={featured}
        seriesMode={t.seriesMode}
        onSignup={signup}
        onOpenBook={setBookOpen}
        onPickSeries={pickSeries}
      />
    );
  }

  return (
    <div
      className="er-shell"
      data-palette={t.palette}
      data-hero={t.heroLayout}
      data-density={t.density}
      data-imagery={t.imagery ? 'true' : 'false'}
      data-bg={t.bg}
      data-page={page}
    >
      <div className="er-bg-decor" />
      {t.cursor && <CustomCursor enabled={t.cursor} />}

      <Header onSignup={signup} current={page} />

      {body}

      <Footer />

      {bookOpen && <BookTakeover book={bookOpen} onClose={() => setBookOpen(null)} />}

      <TweaksPanel title="Tweaks" startOpen={false}>
        <TweakSection label="Preview" />
        <TweakToggle label="Background only" value={t.bgOnly} onChange={(v) => setTweak('bgOnly', v)} />

        <TweakSection label="Background" />
        <TweakSelect
          label="Style"
          value={t.bg}
          options={[
            { value: 'clean',          label: 'Clean noir' },
            { value: 'damask',         label: 'Damask wallpaper' },
            { value: 'smoke',          label: 'Drifting smoke' },
            { value: 'snake',          label: 'Snake · gold' },
            { value: 'snake-crimson',  label: 'Snake · crimson' },
            { value: 'gold-spot',      label: 'Noir + gold halo' },
            { value: 'crimson-spot',   label: 'Noir + crimson halo' },
          ]}
          onChange={(v) => setTweak('bg', v)}
        />

        <TweakSection label="Palette" />
        <TweakRadio
          label="Mood"
          value={t.palette}
          options={[
            { value: 'noir',  label: 'Noir' },
            { value: 'ivory', label: 'Ivory' },
          ]}
          onChange={(v) => setTweak('palette', v)}
        />

        <TweakSection label="Series Focus (Books page)" />
        <TweakSelect
          label="Series"
          value={t.seriesMode}
          options={[
            { value: 'all',     label: 'All books (universe)' },
            { value: 'hangmen', label: 'The Hangmen Trilogy' },
            { value: 'gods',    label: 'Gods of Corruption' },
            { value: 'cuc',     label: 'Clean Up Crew' },
          ]}
          onChange={(v) => setTweak('seriesMode', v)}
        />

        <TweakSection label="Atmosphere" />
        <TweakToggle label="Custom cursor" value={t.cursor}  onChange={(v) => setTweak('cursor', v)} />
        <TweakToggle label="Show covers"   value={t.imagery} onChange={(v) => setTweak('imagery', v)} />
      </TweaksPanel>
    </div>
  );
}

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