/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor,
   Nav, Hero, Marquee, HowItWorks, Nutrition, Gallery, Premium, CTA, Footer */
(function(){
const e = React.createElement;
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "lens",
  "accent": "#2E7D52",
  "speed": "calm"
}/*EDITMODE-END*/;

const SPEED_MAP = { calm:1.55, balanced:1.0, lively:0.62 };
const ACCENT_INK = {
  "#2E7D52":"#1d5a3a", "#E2462F":"#a32a18", "#E08A00":"#9c6200", "#7E0526":"#5e0420"
};

function App(){
  const t = TWEAK_DEFAULTS;

  // apply tweaks -> CSS vars on :root
  useEffect(()=>{
    const root = document.documentElement.style;
    root.setProperty('--accent', t.accent);
    root.setProperty('--accent-ink', ACCENT_INK[t.accent] || '#1d5a3a');
    root.setProperty('--am', String(SPEED_MAP[t.speed] ?? 1));
  }, [t.accent, t.speed]);

  // global motion: reveal observer, nav solidify, scroll parallax
  useEffect(()=>{
    const io = new IntersectionObserver((ents)=>{
      ents.forEach(en=>{ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } });
    }, { threshold:0.12, rootMargin:'0px 0px -8% 0px' });
    document.querySelectorAll('.reveal').forEach(el=>io.observe(el));

    const nav = document.getElementById('nav');
    const parEls = [...document.querySelectorAll('[data-par]')];
    const touchMode = () => matchMedia('(hover: none)').matches || window.innerWidth <= 700;
    const gCards = [...document.querySelectorAll('.g-card')];
    let ticking = false;
    function frame(){
      ticking = false;
      const y = window.scrollY;
      if(nav) nav.classList.toggle('solid', y > 36);
      parEls.forEach(el=>{
        const sp = parseFloat(el.dataset.par) || 0;
        const rot = el.dataset.rot ? `rotate(${el.dataset.rot}deg)` : '';
        const rect = el.getBoundingClientRect();
        const mid = rect.top + rect.height/2 - window.innerHeight/2;
        el.style.transform = `translateY(${ -mid*sp }px) ${rot}`;
      });
      // touch: reveal each before/after card as it scrolls up through the viewport
      if(gCards.length && touchMode()){
        const vh = window.innerHeight || 800;
        gCards.forEach(card=>{
          const r = card.getBoundingClientRect();
          const center = r.top + r.height/2;
          let p = (vh*0.86 - center) / (vh*0.86 - vh*0.42);
          p = Math.min(1, Math.max(0, p));
          const up = card.querySelector('.g-up');
          const div = card.querySelector('.g-divider');
          if(up) up.style.clipPath = `inset(0 ${(1-p)*100}% 0 0)`;
          if(div){ div.style.left = (p*100)+'%'; div.style.opacity = (p>0.02 && p<0.99) ? 1 : 0; }
          card.classList.toggle('revealing', p>0.5);
        });
      }
    }
    function onScroll(){ if(!ticking){ ticking=true; requestAnimationFrame(frame); } }
    window.addEventListener('scroll', onScroll, { passive:true });
    window.addEventListener('resize', onScroll);
    frame();

    // ---- floating tags: idle bob + hover tilt ----
    const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
    const floaters = [...document.querySelectorAll('.floaty')].map((el)=>{
      const f = { el, amp:4+Math.random()*4, sp:0.5+Math.random()*0.45, ph:Math.random()*Math.PI*2, hov:0, hovT:0, mx:0, my:0 };
      el.addEventListener('pointerenter', ()=>{ f.hovT=1; });
      el.addEventListener('pointerleave', ()=>{ f.hovT=0; f.mx=0; f.my=0; });
      el.addEventListener('pointermove', (ev)=>{ const b=el.getBoundingClientRect(); f.mx=(ev.clientX-b.left)/b.width-0.5; f.my=(ev.clientY-b.top)/b.height-0.5; });
      return f;
    });
    let fraf = 0; const t0 = performance.now();
    function floatLoop(now){
      const t = (now - t0)/1000;
      for(const f of floaters){
        f.hov += (f.hovT - f.hov)*0.16;
        const bob = reduce ? 0 : Math.sin(t*f.sp*2 + f.ph)*f.amp;
        const lift = -7*f.hov;
        const rx = (-f.my)*11*f.hov;
        const ry = (f.mx)*11*f.hov;
        const sc = 1 + 0.035*f.hov;
        f.el.style.transform = `translateY(${bob+lift}px) perspective(520px) rotateX(${rx}deg) rotateY(${ry}deg) scale(${sc})`;
      }
      fraf = requestAnimationFrame(floatLoop);
    }
    fraf = requestAnimationFrame(floatLoop);

    return ()=>{ io.disconnect(); cancelAnimationFrame(fraf); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);

  return e(React.Fragment, null,
    // decorative sprigs (parallax)
    e('img',{className:'sprig', src:'assets/sprig.png', alt:'', 'data-par':'0.04',
      style:{ top:'90px', right:'-40px', width:'380px', transform:'rotate(8deg)' } }),
    e('img',{className:'sprig', src:'assets/sprig.png', alt:'', 'data-par':'-0.05', 'data-rot':'200',
      style:{ bottom:'8%', left:'-60px', width:'320px', opacity:.35 } }),

    e(Nav),
    e(Hero, { heroStyle:t.heroStyle }),
    e(Marquee),
    e(HowItWorks),
    e(ChefSection),
    e(Nutrition),
    e(Gallery),
    e(JournalSection),
    e(Premium),
    e(CTA),
    e(Footer)
  );
}

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