// App shell — routing, scroll state, menu, lead flow, sticky CTA, tweaks.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#c18491", "#8f4d58"],
  "headingFont": "ספרותי",
  "paperTone": "קרם"
}/*EDITMODE-END*/;

const SITE_FONT = "'David Libre','David','Times New Roman',serif";
const FONT_MAP = { 'ספרותי': SITE_FONT, 'חמים': SITE_FONT };
const PAPER_MAP = {
  'קרם':  { p:'#f4e7df', p2:'#ead4ca', warm:'#dfbdb2' },
  'שמנת': { p:'#f7eee9', p2:'#eedbd3', warm:'#e5c8bd' },
  'חול':  { p:'#f1e4d8', p2:'#e6cec1', warm:'#ddbba9' },
};

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState({ page:'home', id:null });
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [lead, setLead] = React.useState({ open:false, service:null });
  const [scrolled, setScrolled] = React.useState(false);
  const [sticky, setSticky] = React.useState(false);
  const histRef = React.useRef([]);
  const screenRef = React.useRef(null);

  const scrollToTop = () => {
    if (screenRef.current) screenRef.current.scrollTop = 0;
    window.scrollTo({ top:0, left:0, behavior:'auto' });
  };

  const nav = (page, id=null) => {
    histRef.current.push(route);
    setMenuOpen(false);
    setRoute({ page, id });
    scrollToTop();
  };
  const back = () => {
    const prev = histRef.current.pop();
    if (prev){ setRoute(prev); scrollToTop(); }
  };
  const openLead = (service=null) => setLead({ open:true, service });
  const closeLead = () => setLead(l => ({ ...l, open:false }));

  const onScroll = () => {
    const doc = document.documentElement;
    const top = window.scrollY || doc.scrollTop || 0;
    const height = Math.max(doc.scrollHeight, document.body.scrollHeight);
    const nearBottom = height - top - window.innerHeight < 240;
    setScrolled(top > 8);
    setSticky(top > 380 && !nearBottom);
  };
  React.useEffect(() => {
    onScroll();
    window.addEventListener('scroll', onScroll, { passive:true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, [route]);

  const ctx = { nav, back, openLead, openMenu:() => setMenuOpen(true) };

  let Page;
  switch (route.page){
    case 'services': Page = <ServicesPage />; break;
    case 'service':  Page = <ServicePage id={route.id} />; break;
    case 'gallery':  Page = <GalleryPage />; break;
    case 'about':    Page = <AboutPage />; break;
    case 'value':    Page = <ValuePage />; break;
    case 'contact':  Page = <ContactPage />; break;
    default:         Page = <HomePage />;
  }

  const pt = PAPER_MAP[t.paperTone] || PAPER_MAP['קרם'];
  const frameStyle = {
    '--rose': (t.accent && t.accent[0]) || '#c18491',
    '--rose-deep': (t.accent && t.accent[1]) || '#8f4d58',
    '--serif': FONT_MAP[t.headingFont] || FONT_MAP['ספרותי'],
    '--paper': pt.p, '--paper-2': pt.p2, '--warm': pt.warm,
    '--serif': SITE_FONT, '--serif-warm': SITE_FONT, '--sans': SITE_FONT, '--mono': SITE_FONT,
  };

  const showSticky = sticky && !lead.open && !menuOpen && route.page !== 'contact';

  return (
    <div className="stage">
      <div className="frame" style={frameStyle}>
        <div className="screen" ref={screenRef} onScroll={onScroll}>
          <StatusBar />
          <AppCtx.Provider value={ctx}>
            <Header scrolled={scrolled} page={route.page} />
            <div key={route.page + (route.id||'')}>{Page}</div>

            <div className="sticky-cta" style={{
              transform: showSticky ? 'translateY(0)' : 'translateY(140%)',
              transition:'transform .3s', pointerEvents: showSticky ? 'auto' : 'none',
            }}>
              <WAButton />
            </div>

            <Menu open={menuOpen} onClose={() => setMenuOpen(false)} />
            <ConciergeChat open={lead.open} initialService={lead.service} onClose={closeLead} />
          </AppCtx.Provider>
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="מותג" />
        <TweakColor label="גוון הוורוד" value={t.accent}
          options={[['#c18491','#8f4d58'], ['#b896a0','#896571'], ['#c69a86','#9c6f54'], ['#b27a81','#7b4b4f']]}
          onChange={v => setTweak('accent', v)} />
        <TweakRadio label="גופן כותרות" value={t.headingFont}
          options={['ספרותי','חמים']} onChange={v => setTweak('headingFont', v)} />
        <TweakSection label="רקע" />
        <TweakRadio label="גוון נייר" value={t.paperTone}
          options={['קרם','שמנת','חול']} onChange={v => setTweak('paperTone', v)} />
      </TweaksPanel>
    </div>
  );
}

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