// iffs-app.jsx — root: tweaks, routing, palette/typography variants

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "is",
  "page": "home",
  "emblem": "angler",
  "typography": "fraunces-inter"
}/*EDITMODE-END*/;

// ── Palette variants — DARK heritage, paper-on-night ────────────────────
const PALETTES = {
  'river-night': {
    label: 'River Night',
    desc: 'Pool at dusk — deep teal-black ground, parchment paper, copper salmon belly',
    vars: {
      '--paper':   '#ead9b8',  // warm parchment for type/accents
      '--paper-2': '#1a2a2c',  // raised surface (cards) on dark
      '--paper-3': '#23373a',
      '--ink':     '#0b1517',  // near-black, deep pool
      '--ink-2':   '#e8d6b3',  // light type on dark ground
      '--ink-3':   '#bba887',
      '--ink-4':   '#8a7d63',
      '--line':    '#3a4a4c',
      '--line-2':  '#54686a',
      '--glacier': '#3e8590',
      '--moss':    '#7a965a',
      '--copper':  '#d18a3a',
      '--rust':    '#b04a1e',
      '--gold':    '#e3b25a',
    },
  },
  'peat-cellar': {
    label: 'Peat Cellar',
    desc: 'Smoked oak and lamp-light — black-brown ground, candle-paper, brass',
    vars: {
      '--paper':   '#e8d4af',
      '--paper-2': '#1f1812',
      '--paper-3': '#2c2218',
      '--ink':     '#100c08',
      '--ink-2':   '#e6d4ad',
      '--ink-3':   '#b8a380',
      '--ink-4':   '#897558',
      '--line':    '#3a2e22',
      '--line-2':  '#5a4732',
      '--glacier': '#3d6770',
      '--moss':    '#7d8a4a',
      '--copper':  '#c87a2a',
      '--rust':    '#a23a1a',
      '--gold':    '#dca846',
    },
  },
  'glacier-stone': {
    label: 'Glacier Stone',
    desc: 'Volcanic basalt at first light — slate ink, bone paper, glacier teal',
    vars: {
      '--paper':   '#e0d9c4',
      '--paper-2': '#1a1f22',
      '--paper-3': '#252c30',
      '--ink':     '#0a0e10',
      '--ink-2':   '#dfd6bd',
      '--ink-3':   '#aea591',
      '--ink-4':   '#807967',
      '--line':    '#39434a',
      '--line-2':  '#586471',
      '--glacier': '#5a99a6',
      '--moss':    '#7a8e60',
      '--copper':  '#c08540',
      '--rust':    '#9a3e22',
      '--gold':    '#d2a85a',
    },
  },
};

// ── Typography variants ─────────────────────────────────────────────────
const TYPOGRAPHY = {
  'fraunces-inter': {
    label: 'Fraunces × Inter Tight',
    display: "'Fraunces', 'Newsreader', Georgia, serif",
    body: "'Inter Tight', ui-sans-serif, system-ui, sans-serif",
  },
  'newsreader-inter': {
    label: 'Newsreader × Inter Tight',
    display: "'Newsreader', Georgia, serif",
    body: "'Inter Tight', ui-sans-serif, system-ui, sans-serif",
  },
  'dm-inter': {
    label: 'DM Serif × Inter Tight',
    display: "'DM Serif Display', Georgia, serif",
    body: "'Inter Tight', ui-sans-serif, system-ui, sans-serif",
  },
};

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

  // Apply locked River Night palette + typography variables to :root
  useEffectA(() => {
    const root = document.documentElement;
    const pal = PALETTES['river-night'].vars;
    Object.entries(pal).forEach(([k, v]) => root.style.setProperty(k, v));
    const typ = TYPOGRAPHY[t.typography];
    root.style.setProperty('--font-display', typ.display);
    root.style.setProperty('--font-body', typ.body);
  }, [t.typography]);

  const onPage = (id) => {
    setTweak('page', id);
    window.scrollTo({ top: 0, behavior: 'instant' });
  };
  const onLang = (l) => setTweak('lang', l);

  return (
    <div className="iffs-page">
      <Announce copy={copy.announce}/>
      <Nav copy={copy} page={page} onPage={onPage} lang={lang} onLang={onLang} emblem={t.emblem}/>

      {page === 'home' && <HomePage copy={copy} emblem={t.emblem} rmMark={t.rmMark} aaMark={t.aaMark} onPage={onPage}/>}
      {page === 'rm' && <RMPage copy={copy} emblem={t.emblem} rmMark={t.rmMark} onPage={onPage}/>}
      {page === 'aa' && <AAPage copy={copy} emblem={t.emblem} aaMark={t.aaMark} onPage={onPage}/>}
      {(page === 'faq' || page === 'contact') && <FAQContactPage copy={copy} lang={lang} onPage={onPage}/>}

      <Footer copy={copy} emblem={t.emblem}/>

      <TweaksPanel>
        <TweakSection label={lang==='is' ? 'Síða' : 'Page'}/>
        <TweakSelect label={lang==='is'?'Birta síðu':'Show page'} value={page}
                     options={[
                       { value: 'home', label: lang==='is'?'Forsíða':'Home' },
                       { value: 'rm', label: lang==='is'?'Umsjónarkerfið':'River Management' },
                       { value: 'aa', label: lang==='is'?'Veiðiforritið':'Angler App' },
                       { value: 'contact', label: lang==='is'?'Hafa samband':'Contact' },
                     ]}
                     onChange={(v)=>onPage(v)}/>
        <TweakRadio label={lang==='is'?'Tungumál':'Language'} value={lang}
                    options={[{ value:'is', label:'IS' }, { value:'en', label:'EN' }]}
                    onChange={(v)=>onLang(v)}/>

        <TweakSection label={lang==='is'?'Letur':'Typography'}/>
        <TweakRadio label={lang==='is'?'Pörun':'Pairing'} value={t.typography}
                    options={Object.entries(TYPOGRAPHY).map(([v, tt]) => ({ value: v, label: tt.label.split(' × ')[0] }))}
                    onChange={(v)=>setTweak('typography', v)}/>
        <div style={{ fontFamily:'var(--font-mono)', fontSize: 10, color:'rgba(255,255,255,.5)' }}>
          {TYPOGRAPHY[t.typography].label}
        </div>
      </TweaksPanel>
    </div>
  );
}

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