/* global React, Icon, LangSwitcher, t */
// FitMyRecipe — landing sections (i18n via window.t)
(function(){
const e = React.createElement;

/* ---------------- NAV ---------------- */
function Nav(){
  return e('nav', { className:'nav', id:'nav' },
    e('a', { className:'wordmark', href:'#top', 'aria-label':'FitMyRecipe' },
      e('img',{className:'logo-img', src:'assets/logo-mark.png', alt:'FitMyRecipe'})),
    e('div', { className:'nav-links', onClick:closeMenu },
      e('a',{href:'#how'},t('nav.how')),
      e('a',{href:'#chef'},t('nav.chef')),
      e('a',{href:'#nutrition'},t('nav.nutrition')),
      e('a',{href:'#gallery'},t('nav.gallery')),
      e('a',{href:'journal.html'},t('nav.journal')),
      e('a',{href:'#premium'},t('nav.premium'))),
    e('div', { className:'nav-cta' },
      e(LangSwitcher),
      e('a',{className:'btn btn-primary', href:'#download'}, t('nav.cta'), e(Icon.arrowR,{size:17})),
      e('button',{className:'nav-burger', type:'button', 'aria-label':'Toggle menu', 'aria-expanded':'false', 'aria-controls':'nav', onClick:toggleMenu},
        e('svg',{width:22,height:22,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:2,strokeLinecap:'round'},
          e('line',{x1:4,y1:7,x2:20,y2:7}), e('line',{x1:4,y1:12,x2:20,y2:12}), e('line',{x1:4,y1:17,x2:20,y2:17}))))
  );
}
function toggleMenu(ev){ var n=document.getElementById('nav'); var open=n.classList.toggle('menu-open'); ev.currentTarget.setAttribute('aria-expanded', open?'true':'false'); }
function closeMenu(){ var n=document.getElementById('nav'); if(!n) return; n.classList.remove('menu-open'); var b=n.querySelector('.nav-burger'); if(b) b.setAttribute('aria-expanded','false'); }

/* ---------------- MARQUEE ---------------- */
function Marquee(){
  const items = [
    ['link',t('mq.paste')], ['image',t('mq.screenshot')], ['camera',t('mq.photo')],
    ['wand',t('mq.upgrade')], ['flame',t('mq.flavor')], ['trendUp',t('mq.macros')]
  ];
  const row = (key)=> e('div',{className:'track', key},
    [...items, ...items].map((it,i)=> e('span',{className:'m', key:i}, e(Icon[it[0]],{size:20}), it[1],
      e('span',{style:{color:'var(--gold-soft)', margin:'0 -28px 0 26px'}},'·'))));
  return e('div',{className:'marquee'}, row('a'));
}

/* ---------------- HOW IT WORKS ---------------- */
function HowItWorks(){
  const steps = [
    { n:t('how.s1n'), ic:'image', t:t('how.s1t'), d:t('how.s1d'), thumb:'assets/hero-before.jpg' },
    { n:t('how.s2n'), ic:'wand',  t:t('how.s2t'), d:t('how.s2d'), thumb:'assets/hero-after.jpg' },
    { n:t('how.s3n'), ic:'flame', t:t('how.s3t'), d:t('how.s3d'), thumb:'assets/g-salmon-after.jpg' },
  ];
  return e('section', { className:'container sec-pad', id:'how' },
    e('div', { className:'head center reveal' },
      e('span',{className:'overline'},t('how.eyebrow')),
      e('h2',null,t('how.h2a'), e('em',{className:'f',style:{fontStyle:'italic',color:'var(--burgundy)'}},t('how.saved')),t('how.h2b'), e('em',{className:'f',style:{fontStyle:'italic',color:'var(--burgundy)'}},t('how.upgraded')),'.'),
      e('p',null,t('how.sub'))),
    e('div', { className:'steps' },
      steps.map((s,i)=> e('div',{className:'step reveal sc d'+(i+1), key:i},
        e('span',{className:'glow'}),
        e('img',{className:'step-thumb', src:s.thumb, alt:''}),
        e('div',{className:'num'}, s.n),
        e('div',{className:'s-ic'}, e(Icon[s.ic],{size:28})),
        e('h3',null,s.t),
        e('p',null,s.d)
      )))
  );
}

/* ---------------- NUTRITION / MACROS ---------------- */
function MacroLine({ k, v, u, w, bar }){
  return e('div',{className:'macro-line'},
    e('div',{className:'ml-top'}, e('span',{className:'ml-k'},k), e('span',{className:'ml-v'}, v, e('span',{className:'u'},u))),
    e('div',{className:'bar '+bar}, e('i',{style:{'--w':w+'%'}})));
}
function Nutrition(){
  const R=78, CIRC=2*Math.PI*R, PCT=0.85;
  return e('section',{className:'nutri sec-pad', id:'nutrition'},
    e('div',{className:'container'},
      e('div',{className:'head reveal'},
        e('span',{className:'overline'},t('nut.eyebrow')),
        e('h2',null,t('nut.h2a'), e('em',{style:{fontStyle:'italic',color:'var(--burgundy)'}},t('nut.changed')),'.'),
        e('p',null,t('nut.sub'))),
      e('div',{className:'nutri-grid'},
        e('div',{className:'compare reveal sc'},
          e('div',{className:'compare-row'},
            e('div',{className:'compare-col orig'},
              e('span',{className:'tag t-orig floaty'},t('nut.orig')),
              e('div',{className:'macro-list'},
                e(MacroLine,{k:t('nut.cal'),v:'560',u:'',w:90,bar:'b-cal'}),
                e(MacroLine,{k:t('nut.pro'),v:'32',u:'g',w:42,bar:'b-pro'}),
                e(MacroLine,{k:t('nut.fib'),v:'4',u:'g',w:18,bar:'b-fib'}),
                e(MacroLine,{k:t('nut.fat'),v:'24',u:'g',w:80,bar:'b-fat'}))),
            e('div',{className:'compare-col up'},
              e('span',{className:'tag t-up floaty'},t('nut.up')),
              e('div',{className:'macro-list'},
                e(MacroLine,{k:t('nut.cal'),v:'430',u:'',w:62,bar:'b-cal'}),
                e(MacroLine,{k:t('nut.pro'),v:'48',u:'g',w:78,bar:'b-pro'}),
                e(MacroLine,{k:t('nut.fib'),v:'11',u:'g',w:55,bar:'b-fib'}),
                e(MacroLine,{k:t('nut.fat'),v:'14',u:'g',w:40,bar:'b-fat'}))))),
        e('div',{className:'confidence reveal d2'},
          e('div',{style:{display:'flex',alignItems:'center',gap:'26px',flexWrap:'wrap'}},
            e('div',{className:'conf-badge', style:{'--circ':CIRC,'--off':CIRC*(1-PCT)}},
              e('svg',{viewBox:'0 0 168 168'},
                e('defs',null,e('linearGradient',{id:'goldgrad',x1:0,y1:0,x2:1,y2:1},
                  e('stop',{offset:0,stopColor:'#F0D469'}),e('stop',{offset:1,stopColor:'#B0892A'}))),
                e('circle',{className:'track',cx:84,cy:84,r:R}),
                e('circle',{className:'prog',cx:84,cy:84,r:R})),
              e('div',{className:'ctr'}, e('div',null, e('div',{className:'pct'},'85%'), e('div',{className:'lbl'},t('nut.conf'))))),
            e('div',{style:{flex:'1 1 200px'}},
              e('p',{style:{fontFamily:'var(--display)',fontSize:'22px',color:'var(--forest)',lineHeight:1.3,margin:0}},
                t('nut.confHi')),
              e('p',{style:{fontSize:'15px',color:'var(--fg-2)',margin:'8px 0 0'}},
                t('nut.confSub')))),
          e('div',{className:'nutri-points'},
            [[t('nut.p1t'),t('nut.p1d')],[t('nut.p2t'),t('nut.p2d')],[t('nut.p3t'),t('nut.p3d')]].map((p,i)=>
              e('div',{className:'np',key:i},
                e('div',{className:'check'}, e(Icon.check,{size:14})),
                e('div',{className:'nt'}, e('b',null,p[0]), e('p',null,p[1])))))) )
    )
  );
}

/* ---------------- MEET THE CHEF ---------------- */
function ChefSection(){
  return e('section',{className:'chef container', id:'chef'},
    e('div',{className:'chef-grid'},
      e('div',{className:'chef-photo reveal sc'},
        e('img',{className:'sprig-c', src:'assets/sprig.png', alt:''}),
        e('div',{className:'frame'},
          e('img',{src:'assets/chef-main.jpg', alt:'Sofia, the FitMyRecipe macro chef, in her kitchen'})),
        e('div',{className:'chef-quote floaty'},
          e('div',{className:'q'},t('chef.quote')),
          e('div',{className:'who'},
            e('img',{src:'assets/chef-avatar.jpg', alt:'Sofia, the FitMyRecipe AI macro chef'}),
            e('div',null, e('div',{className:'nm'},t('chef.name')), e('div',{className:'rl'},t('chef.role')))))),
      e('div',{className:'chef-copy reveal d2'},
        e('span',{className:'overline'},t('chef.eyebrow')),
        e('h2',null,t('chef.h2a'), e('em',null,t('chef.h2em')),'.'),
        e('p',null,t('chef.p1')),
        e('p',null,t('chef.p2')),
        e('div',{className:'chef-stats'},
          e('div',{className:'st'}, e('div',{className:'v'},t('chef.s1v')), e('div',{className:'k'},t('chef.s1k'))),
          e('div',{className:'st'}, e('div',{className:'v'},t('chef.s2v')), e('div',{className:'k'},t('chef.s2k'))),
          e('div',{className:'st'}, e('div',{className:'v'},t('chef.s3v')), e('div',{className:'k'},t('chef.s3k')))),
        e('div',{className:'chef-sign'},
          e('img',{src:'assets/chef-avatar.jpg', alt:'Sofia, the FitMyRecipe AI macro chef'}),
          e('div',null, e('div',{className:'nm'},t('chef.name')), e('div',{className:'rl'},t('chef.roleFull'))))))
  );
}

/* ---------------- GALLERY ---------------- */
function Gallery(){
  const DISHES = [
    { t:t('gal.d1t'), m:t('gal.d1m'), before:'assets/g-pizza-before.jpg', after:'assets/g-pizza-after.jpg',
      d:[[t('gal.d1a'),'up'],[t('gal.d1b'),'up'],[t('gal.d1c'),'dn']] },
    { t:t('gal.d2t'), m:t('gal.d2m'), before:'assets/g-salmon-before.jpg', after:'assets/g-salmon-after.jpg',
      d:[[t('gal.d2a'),'up'],[t('gal.d2b'),'up'],[t('gal.d2c'),'up']] },
    { t:t('gal.d3t'), m:t('gal.d3m'), before:'assets/g-burger-before.jpg', after:'assets/g-burger-after.jpg',
      d:[[t('gal.d3a'),'up'],[t('gal.d3b'),'dn'],[t('gal.d3c'),'up']] },
    { t:t('gal.d4t'), m:t('gal.d4m'), before:'assets/g-pancakes-before.jpg', after:'assets/g-pancakes-after.jpg',
      d:[[t('gal.d4a'),'up'],[t('gal.d4b'),'dn'],[t('gal.d4c'),'up']] },
  ];
  return e('section',{className:'container sec-pad', id:'gallery'},
    e('div',{className:'head reveal'},
      e('span',{className:'overline'},t('gal.eyebrow')),
      e('h2',null,t('gal.h2a'), e('em',{style:{fontStyle:'italic',color:'var(--burgundy)'}},t('gal.h2em')),'.'),
      e('p',null,t('gal.sub'))),
    e('div',{className:'gallery'},
      DISHES.map((d,i)=> e('div',{className:'g-card reveal sc d'+(i%2+1), key:i},
        e('div',{className:'g-media'},
          e('img',{className:'g-before', src:d.before, alt:d.t}),
          e('img',{className:'g-up', src:d.after, alt:d.t}),
          e('span',{className:'g-divider'}),
          e('div',{className:'g-flags'},
            e('span',{className:'g-flag b'},t('gal.orig')),
            e('span',{className:'g-flag a'}, t('gal.up')))),
        e('div',{className:'g-body'},
          e('div',null, e('h3',null,d.t), e('div',{className:'g-meta'},d.m)),
          e('div',{className:'g-deltas'}, d.d.map((x,j)=> e('span',{className:'g-d '+x[1], key:j}, x[0])))))))
  );
}

/* ---------------- PREMIUM ---------------- */
function Premium(){
  const feats = [t('prem.f1'), t('prem.f2'), t('prem.f3'), t('prem.f4')];
  return e('section',{className:'premium container', id:'premium'},
    e('div',{className:'premium-card reveal sc'},
      e('img',{className:'leaf-art', src:'assets/sprig.png', alt:''}),
      e('div',{className:'premium-grid'},
        e('div',null,
          e('span',{className:'overline'},t('prem.eyebrow')),
          e('h2',null,t('prem.h2a'), e('em',null,t('prem.h2em')), t('prem.h2b')),
          e('p',{className:'p-lede'},t('prem.lede')),
          e('div',{className:'feat'},
            feats.map((f,i)=> e('div',{className:'f',key:i}, e('span',{className:'crn'}, e(Icon.crown,{size:15})), f)))),
        e('div',{className:'price-card'},
          e('div',{className:'crown-top'}, e(Icon.crown,{size:18}), t('prem.badge')),
          e('div',{className:'price'}, e('span',{className:'amt'},'$6.99'), e('span',{className:'per'},t('prem.per'))),
          e('div',{className:'price-note'},t('prem.note')),
          e('a',{className:'btn btn-primary btn-lg', href:'#download'},t('prem.cta'), e(Icon.arrowR,{size:18})),
          e('div',{className:'trial'},t('prem.trial'))))
    )
  );
}

/* ---------------- EARLY ACCESS (launching soon) ---------------- */
// Form delivery: POSTs to the Cloudflare Pages Function /api/waitlist (Brevo).
const FORM_ENDPOINT = '/api/waitlist';
function CTA(){
  const [mode,setMode]=React.useState('waitlist');
  const [email,setEmail]=React.useState('');
  const [status,setStatus]=React.useState('idle'); // idle | sending | sent | error
  const submit=async(ev)=>{
    ev.preventDefault();
    if(!email.trim()) return;
    setStatus('sending');
    try{
      const r=await fetch(FORM_ENDPOINT,{ method:'POST', headers:{'Content-Type':'application/json','Accept':'application/json'}, body:JSON.stringify({ email:email.trim(), plan:mode, _subject:`New ${mode==='beta'?'beta tester application':'early access signup'} — FitMyRecipe` }) });
      setStatus(r.ok ? 'sent' : 'error');
    }catch(_){ setStatus('error'); }
  };
  const isBeta = mode==='beta';
  return e('section',{className:'cta early', id:'download'},
    e('img',{className:'phone-peek reveal', src:'assets/screen-home.png', alt:'', style:{left:'-3%',bottom:'-6%',transform:'rotate(-9deg)'}}),
    e('img',{className:'phone-peek reveal', src:'assets/screen-recipe-detail.png', alt:'', style:{right:'-3%',top:'-2%',transform:'rotate(9deg)'}}),
    e('div',{className:'container'},
      e('div',{className:'reveal'},
        e('span',{className:'overline'},t('cta.eyebrow')),
        e('h2',{style:{marginTop:'16px'}},t('cta.h2a'), e('em',null,t('cta.h2em')),'.'),
        e('p',null,t('cta.p')),
        e('div',{style:{display:'flex',justifyContent:'center',marginTop:'30px'}},
          e('div',{className:'early-tabs', role:'tablist'},
            e('button',{className:'early-tab'+(!isBeta?' on':''), onClick:()=>{setMode('waitlist');setStatus('idle');}},t('cta.tabEarly')),
            e('button',{className:'early-tab'+(isBeta?' on':''), onClick:()=>{setMode('beta');setStatus('idle');}},t('cta.tabBeta')))),
        status==='sent'
          ? e('div',{className:'early-success'},
              e('span',{className:'ck'}, e(Icon.check,{size:15})),
              isBeta ? t('cta.sentBeta') : t('cta.sentWait'))
          : e('form',{className:'early-form', onSubmit:submit},
              e('input',{type:'email', required:true, placeholder:t('cta.placeholder'), value:email, disabled:status==='sending', 'aria-label':'Email address', onChange:(ev)=>setEmail(ev.target.value)}),
              e('button',{className:'btn btn-primary btn-lg', type:'submit', disabled:status==='sending'}, status==='sending' ? t('cta.sending') : (isBeta?t('cta.reqBeta'):t('cta.reqEarly')), status!=='sending' && e(Icon.arrowR,{size:18}))),
        e('div',{className:'early-note'}, status==='error'
          ? e('span',{style:{color:'var(--burgundy)'}}, t('cta.errPre'), e('a',{href:'mailto:info@fitmyrecipe.com', style:{color:'var(--burgundy)', textDecoration:'underline'}},'info@fitmyrecipe.com'), t('cta.errPost'))
          : (isBeta ? t('cta.noteBeta') : t('cta.noteWait'))),
        e('div',{style:{marginTop:'38px'}},
          e('span',{className:'overline', style:{display:'block', marginBottom:'14px'}},t('cta.launchOn')),
          e('div',{className:'store-row', style:{justifyContent:'center'}},
            e('span',{className:'store soon'}, e(Icon.apple,{size:26}), e('div',null, e('div',{className:'s-small'},t('cta.soon')), e('div',{className:'s-big'},t('cta.appStore')))),
            e('span',{className:'store soon'}, e(Icon.play,{size:24}), e('div',null, e('div',{className:'s-small'},t('cta.soon')), e('div',{className:'s-big'},t('cta.googlePlay')))))) )
      )
  );
}

/* ---------------- JOURNAL (home preview) ---------------- */
function articleMeta(a){
  return e('div',{className:'jr-meta'},
    e('span',null,a.category), e('span',{className:'dot'}), e('span',null,a.readMin+' '+t('jr.min')));
}
function JournalSection(){
  const all = (window.JOURNAL_ACTIVE && window.JOURNAL_ACTIVE()) || window.journalSorted || window.JOURNAL || [];
  const feature = all[0];
  const rest = all.slice(1,4);
  if(!feature) return null;
  return e('section',{className:'journal sec-pad', id:'journal'},
    e('div',{className:'container'},
      e('div',{className:'head-row reveal'},
        e('div',{className:'head'},
          e('span',{className:'overline'},t('jr.eyebrow')),
          e('h2',null,t('jr.h2a'), e('em',{style:{fontStyle:'italic',color:'var(--burgundy)'}},t('jr.h2em')))),
        e('a',{className:'link-more', href:'journal.html'}, t('jr.more'), e(Icon.arrowR,{size:18}))),
      e('p',{className:'reveal', style:{fontSize:'19px', color:'var(--fg-2)', maxWidth:'56ch', margin:'18px 0 0'}},
        t('jr.intro')),
      e('div',{className:'jr-grid'},
        e('a',{className:'jr-feature reveal sc ac-'+feature.accent, href:'article.html?a='+feature.slug},
          e('div',{className:'ph'}, e('img',{src:feature.thumb, alt:feature.title})),
          e('div',{className:'body'},
            e('span',{className:'cat-pill'}, e('span',{className:'d'}), feature.category),
            e('h3',null, feature.title),
            e('p',null, feature.dek),
            articleMeta(feature))),
        e('div',{className:'jr-list'},
          rest.map((a,i)=> e('a',{className:'jr-card reveal d'+(i+1)+' ac-'+a.accent, href:'article.html?a='+a.slug, key: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('h4',null, a.title),
              articleMeta(a)))))))
  );
}

function Footer(){
  return e('footer',{className:'footer'},
    e('div',{className:'container footer-grid'},
      e('a',{className:'wordmark',href:'#top','aria-label':'FitMyRecipe'},
        e('img',{className:'logo-img', src:'assets/logo-mark.png', alt:'FitMyRecipe'})),
      e('div',{className:'f-links'},
        e('a',{href:'#how'},t('ft.how')),
        e('a',{href:'#nutrition'},t('ft.nutrition')),
        e('a',{href:'journal.html'},t('ft.journal')),
        e('a',{href:'#premium'},t('ft.premium')),
        e('a',{href:'privacy.html'},t('ft.privacy')),
        e('a',{href:'terms.html'},t('ft.terms')),
        e('a',{href:'mailto:info@fitmyrecipe.com'},t('ft.contact'))),
      e('div',{className:'copy'},t('ft.copy')))
  );
}

Object.assign(window, { Nav, Marquee, HowItWorks, ChefSection, JournalSection, Nutrition, Gallery, Premium, CTA, Footer });
})();