/* global React, ReactDOM, Icon */
// FitMyRecipe — Article page. Reads ?a=<slug>, renders the article from window.JOURNAL.
(function(){
const e = React.createElement;
const { useEffect } = React;

const CAT_ICON = { 'Ingredient Science':'flask', 'Kitchen Chemistry':'atom', 'Nutrition Science':'thermo' };

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',{className:'back-home', href:'journal.html'}, e(Icon.arrowL,{size:16}), 'All articles')),
    e('div',{className:'nav-cta'},
      e('a',{className:'btn btn-primary', href:'index.html#download'},'Get early access', e(Icon.arrowR,{size:17})))
  );
}
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:'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 Block({ b }){
  switch(b.t){
    case 'p': return e('p',null,b.x);
    case 'h': return e('h2',null,b.x);
    case 'quote': return e('blockquote',{className:'art-quote'}, e('p',null,b.x));
    case 'list': return e('ul',{className:'art-list'}, b.items.map((it,i)=>e('li',{key:i},it)));
    case 'science':
      return e('div',{className:'sci-card'},
        e('div',{className:'sci-top'},
          e('div',{className:'sci-ic'}, e(Icon[b.icon||'flask'],{size:22})),
          e('div',null,
            e('div',{className:'sci-ttl'}, b.ingredient),
            b.sub && e('div',{className:'sci-sub'}, b.sub))),
        e('div',{className:'sci-rows'},
          b.rows.map((r,i)=> e('div',{className:'sci-row', key:i}, e('span',{className:'k'},r[0]), e('span',{className:'v'},r[1])))),
        b.note && e('div',{className:'sci-note'}, e('b',null,'Why it matters — '), b.note));
    case 'swap':
      return e('div',{className:'swap-card'},
        e('div',{className:'side from'}, e('span',{className:'lab'},'Instead of'), e('span',{className:'txt'},b.from)),
        e('div',{className:'arrow'}, e(Icon.arrowR,{size:22})),
        e('div',{className:'side to'}, e('span',{className:'lab'},'Upgrade to'), e('span',{className:'txt'},b.to)),
        b.why && e('div',{className:'swap-why'}, e('b',null,'Why it works — '), b.why));
    default: return null;
  }
}

function Related({ current }){
  const all = window.journalSorted || window.JOURNAL || [];
  const others = all.filter(a=>a.slug!==current.slug).slice(0,3);
  return e('section',{className:'related sec-pad'},
    e('div',{className:'container'},
      e('span',{className:'overline'},'Keep reading'),
      e('h2',null,'More Kitchen Science'),
      e('div',{className:'jx-grid', style:{paddingBottom:0}},
        others.map((a)=> e('a',{key:a.slug, className:'jx-card 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))))))
  );
}

function ArticlePage(){
  const all = window.JOURNAL || [];
  const slug = new URLSearchParams(location.search).get('a');
  const a = all.find(x=>x.slug===slug) || all[0];

  useEffect(()=>{
    if(!a) return;
    document.title = a.title + ' — FitMyRecipe Journal';
    const url = 'https://fitmyrecipe.com/article.html?a=' + a.slug;
    const img = 'https://fitmyrecipe.com/' + a.thumb;
    const upMeta = (prop, val) => {
      let m = document.head.querySelector('meta[property="'+prop+'"]');
      if(!m){ m=document.createElement('meta'); m.setAttribute('property', prop); document.head.appendChild(m); }
      m.setAttribute('content', val);
    };
    const upName = (name, val) => {
      let m = document.head.querySelector('meta[name="'+name+'"]');
      if(!m){ m=document.createElement('meta'); m.setAttribute('name', name); document.head.appendChild(m); }
      m.setAttribute('content', val);
    };
    let link = document.head.querySelector('link[rel="canonical"]');
    if(!link){ link=document.createElement('link'); link.setAttribute('rel','canonical'); document.head.appendChild(link); }
    link.setAttribute('href', url);
    upName('description', a.dek);
    upMeta('og:url', url);
    upMeta('og:title', a.title + ' — FitMyRecipe Journal');
    upMeta('og:description', a.dek);
    upMeta('og:image', img);
    upName('twitter:image', img);
  }, [a]);
  useEffect(()=>{
    const io = new IntersectionObserver((ents)=>ents.forEach(en=>{ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target);} }), {threshold:.1});
    document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  }, [a]);

  if(!a) return e('div',{style:{padding:'160px 20px',textAlign:'center'}}, 'Article not found. ', e('a',{href:'journal.html'},'Back to the journal'));

  const icon = CAT_ICON[a.category] || 'flask';
  const withIcon = a.body.map(b => b.t==='science' && !b.icon ? {...b, icon} : b);

  return e('div',{className:'ac-'+a.accent},
    e(SubNav),
    e('article',{className:'article'},
      e('div',{className:'container'},
        e('header',{className:'art-head'},
          e('span',{className:'cat-pill'}, e(Icon[icon],{size:13}), a.category),
          e('h1',null,a.title),
          e('p',{className:'dek'},a.dek),
          e('div',{className:'art-byline'},
            e('img',{src:'assets/chef-avatar.jpg', alt:'Sofia, FitMyRecipe AI macro chef'}),
            e('span',{className:'nm'},'Sofia'), e('span',{className:'dot'}),
            e('span',null,a.date), e('span',{className:'dot'}),
            e('span',null,a.readMin+' min read')))),
      e('div',{className:'art-hero container'},
        e('div',{className:'accent-line', style:{marginBottom:'22px'}}),
        e('div',{className:'frame'}, e('img',{src:a.thumb, alt:a.title}))),
      e('div',{className:'container'},
        e('div',{className:'art-body'},
          withIcon.map((b,i)=> e(Block,{b, key:i})),
          e('div',{className:'art-takeaways'},
            e('span',{className:'overline'},'The takeaway'),
            e('h3',null,'What to remember'),
            e('ul',null, a.takeaways.map((tk,i)=> e('li',{key:i},
              e('span',{className:'ck'}, e(Icon.check,{size:13})), e('span',null,tk))))),
          e('div',{className:'art-foot'},
            e('img',{src:'assets/chef-avatar.jpg', alt:'Sofia, FitMyRecipe AI macro chef'}),
            e('div',null, e('div',{className:'nm'},'Sofia'), e('div',{className:'rl'},'Your AI macro chef · FitMyRecipe'))),
          e('a',{className:'art-back', href:'journal.html'}, e(Icon.arrowL,{size:16}), 'Back to all articles'))) ),
    e(Related,{current:a}),
    e(SubFooter)
  );
}

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