/* global React, ReactDOM, Icon */
// FitMyRecipe — Journal index page
(function(){
const e = React.createElement;
const { useState, useEffect } = React;

function SubNav(){
  return e('nav',{className:'nav solid', id:'nav'},
    e('a',{className:'wordmark', href:'index.html', 'aria-label':'FitMyRecipe'},
      e('img',{className:'logo-img', src:'assets/logo-mark.png', alt:'FitMyRecipe'})),
    e('div',{className:'nav-links'},
      e('a',{href:'index.html#how'},'How it works'),
      e('a',{href:'index.html#nutrition'},'Nutrition'),
      e('a',{href:'journal.html'},'Journal'),
      e('a',{href:'index.html#premium'},'Premium')),
    e('div',{className:'nav-cta'},
      e('a',{className:'btn btn-primary', href:'index.html#download'},'Get early access', e(Icon.arrowR,{size:17})))
  );
}

function meta(a){
  return e('div',{className:'jr-meta'},
    e('span',null,a.date), e('span',{className:'dot'}), e('span',null,a.readMin+' min read'));
}

function SubFooter(){
  return e('footer',{className:'footer'},
    e('div',{className:'container footer-grid'},
      e('a',{className:'wordmark',href:'index.html','aria-label':'FitMyRecipe'},
        e('img',{className:'logo-img', src:'assets/logo-mark.png', alt:'FitMyRecipe'})),
      e('div',{className:'f-links'},
        e('a',{href:'index.html#how'},'How it works'),
        e('a',{href:'index.html#nutrition'},'Nutrition'),
        e('a',{href:'journal.html'},'Journal'),
        e('a',{href:'index.html#premium'},'Premium'),
        e('a',{href:'privacy.html'},'Privacy'),
        e('a',{href:'terms.html'},'Terms'),
        e('a',{href:'mailto:info@fitmyrecipe.com'},'Contact')),
      e('div',{className:'copy'},'© 2026 FitMyRecipe. Save any recipe. Upgrade it when you want.')));
}

function JournalIndex(){
  const all = window.journalSorted || window.JOURNAL || [];
  const cats = ['All', ...Array.from(new Set(all.map(a=>a.category)))];
  const [cat,setCat] = useState('All');
  const shown = cat==='All' ? all : all.filter(a=>a.category===cat);

  useEffect(()=>{
    const io = new IntersectionObserver((ents)=>ents.forEach(en=>{ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); }}), {threshold:.12, rootMargin:'0px 0px -8% 0px'});
    document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  }, [cat]);

  return e(React.Fragment,null,
    e(SubNav),
    e('header',{className:'jx-hero container'},
      e('span',{className:'overline'},'Kitchen Science · The Journal'),
      e('h1',null,'The science of ', e('em',null,'better food')),
      e('p',null,'How ingredients behave, transform and interact — the chemistry and physics behind every upgrade, translated into swaps you can actually cook.')),
    e('div',{className:'container'},
      e('div',{className:'jx-filters'},
        cats.map(c=> e('button',{key:c, className:'jx-filter'+(c===cat?' on':''), onClick:()=>setCat(c)}, c))),
      e('div',{className:'jx-grid'},
        shown.map((a,i)=> e('a',{key:a.slug, className:'jx-card reveal sc d'+((i%3)+1)+' ac-'+a.accent, href:'article.html?a='+a.slug},
          e('div',{className:'ph'}, e('img',{src:a.thumb, alt:a.title})),
          e('div',{className:'body'},
            e('span',{className:'cat-pill'}, e('span',{className:'d'}), a.category),
            e('h3',null,a.title),
            e('p',null,a.dek),
            meta(a)))))),
    e(SubFooter)
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(e(JournalIndex));
})();