/* Main app — page routing + tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "saffron": "#F2B544",
  "coral": "#C97863",
  "ink": "#1A1A1A",
  "bg": "#FAF7F2",
  "headingFont": "Bricolage Grotesque",
  "bodyFont": "Inter",
  "saffronAmount": "balanced",
  "heroLayout": "collage",
  "radius": 22
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = React.useState('start');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [showTweaks, setShowTweaks] = React.useState(false);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--hf-saffron', tweaks.saffron);
    r.setProperty('--hf-coral', tweaks.coral);
    r.setProperty('--hf-ink', tweaks.ink);
    r.setProperty('--hf-bg', tweaks.bg);
    r.setProperty('--font-display', `"${tweaks.headingFont}", "Inter", system-ui, sans-serif`);
    r.setProperty('--font-body', `"${tweaks.bodyFont}", system-ui, sans-serif`);
    r.setProperty('--r-lg', tweaks.radius + 'px');
    r.setProperty('--r-xl', (tweaks.radius + 10) + 'px');
  }, [tweaks]);

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'instant' });
    document.title = pageTitle(page);
  }, [page]);

  const handleNav = (id) => setPage(id);

  return (
    <div data-screen-label={pageLabel(page)}>
      <Header page={page} onNav={handleNav} />
      {page === 'start' && (
        <>
          <Hero onNav={handleNav} />
          <Marquee />
          <Services onNav={handleNav} />
          <MilonFeature onNav={handleNav} />
          <Training onNav={handleNav} />
          <Schedule />
          <QuoteBlock />
          <FAQ />
          <Contact />
        </>
      )}
      {page === 'behandlingar' && <PageBehandlingar onNav={handleNav} />}
      {page === 'traning' && <PageTraning onNav={handleNav} />}
      {page === 'milon' && <PageMilon onNav={handleNav} />}
      {page === 'boka' && <PageBoka onNav={handleNav} />}
      {page === 'om' && <PageOm onNav={handleNav} />}
      {page === 'kontakt' && <PageOm onNav={handleNav} />}
      <Footer onNav={handleNav} />
      <FabChat />

      {showTweaks && (
        <TweaksPanel title="Tweaks" onClose={() => setShowTweaks(false)}>
          <TweakSection title="Färger">
            <TweakColor label="Saffrangul (accent)" value={tweaks.saffron} onChange={v => setTweak('saffron', v)} />
            <TweakColor label="Korall" value={tweaks.coral} onChange={v => setTweak('coral', v)} />
            <TweakColor label="Bläck (text/svart)" value={tweaks.ink} onChange={v => setTweak('ink', v)} />
            <TweakColor label="Bakgrund" value={tweaks.bg} onChange={v => setTweak('bg', v)} />
          </TweakSection>
          <TweakSection title="Typografi">
            <TweakSelect label="Rubrikfont" value={tweaks.headingFont}
              options={['Bricolage Grotesque','Space Grotesk','Manrope','DM Serif Display','Instrument Serif','Archivo']}
              onChange={v => setTweak('headingFont', v)} />
            <TweakSelect label="Brödtext" value={tweaks.bodyFont}
              options={['Inter','DM Sans','Manrope','Plus Jakarta Sans','IBM Plex Sans']}
              onChange={v => setTweak('bodyFont', v)} />
          </TweakSection>
          <TweakSection title="Layout">
            <TweakSlider label="Hörnradie" min={4} max={36} step={2}
              value={tweaks.radius} onChange={v => setTweak('radius', v)} />
          </TweakSection>
          <TweakSection title="Sidor">
            <div style={{display:'grid', gap:6}}>
              {[
                ['start', 'Startsida'],
                ['behandlingar', 'Behandlingar'],
                ['traning', 'Träning & priser'],
                ['milon', 'Milon Q'],
                ['boka', 'Boka (Zoezi)'],
                ['om', 'Om / Kontakt']
              ].map(([id, label]) => (
                <button key={id} onClick={() => setPage(id)}
                  style={{
                    textAlign:'left', padding:'10px 12px', fontSize:13,
                    borderRadius:8, background: page === id ? 'var(--hf-saffron)' : 'rgba(0,0,0,0.04)',
                    border:'1px solid rgba(0,0,0,0.08)', fontWeight: page === id ? 600 : 500
                  }}>
                  {label}
                </button>
              ))}
            </div>
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

function pageTitle(page) {
  const titles = {
    start: 'Hälsofabriken Åtvidaberg — Gym, kiropraktik & effektiv träning',
    behandlingar: 'Behandlingar — Kiropraktik, fysio & massage | Hälsofabriken',
    traning: 'Träning & medlemskap | Hälsofabriken Åtvidaberg',
    milon: 'Milon Q — 4 veckor gratis | Hälsofabriken',
    boka: 'Boka tid eller pass | Hälsofabriken',
    om: 'Om oss & kontakt | Hälsofabriken Åtvidaberg',
    kontakt: 'Kontakt | Hälsofabriken Åtvidaberg',
  };
  return titles[page] || titles.start;
}
function pageLabel(page) {
  const map = { start:'01 Start', behandlingar:'02 Behandlingar', traning:'03 Träning', milon:'04 Milon Q', boka:'05 Boka', om:'06 Om', kontakt:'07 Kontakt' };
  return map[page] || '01 Start';
}

// Mount
window.addEventListener('message', (e) => {
  if (e.data?.type === '__activate_edit_mode') {
    window.__setShowTweaks?.(true);
  } else if (e.data?.type === '__deactivate_edit_mode') {
    window.__setShowTweaks?.(false);
  }
});

function Mount() {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    window.__setShowTweaks = setShow;
    window.parent.postMessage({type:'__edit_mode_available'}, '*');
  }, []);
  return <AppWithTweaks show={show} setShow={setShow} />;
}
function AppWithTweaks({ show, setShow }) {
  const [page, setPage] = React.useState('start');
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--hf-saffron', tweaks.saffron);
    r.setProperty('--hf-coral', tweaks.coral);
    r.setProperty('--hf-ink', tweaks.ink);
    r.setProperty('--hf-bg', tweaks.bg);
    r.setProperty('--font-display', `"${tweaks.headingFont}", "Inter", system-ui, sans-serif`);
    r.setProperty('--font-body', `"${tweaks.bodyFont}", system-ui, sans-serif`);
    r.setProperty('--r-lg', tweaks.radius + 'px');
    r.setProperty('--r-xl', (tweaks.radius + 10) + 'px');
  }, [tweaks]);

  React.useEffect(() => {
    window.scrollTo({ top: 0 });
    document.title = pageTitle(page);
  }, [page]);

  return (
    <div data-screen-label={pageLabel(page)}>
      <Header page={page} onNav={setPage} />
      {page === 'start' && (
        <>
          <Hero onNav={setPage} />
          <Marquee />
          <Services onNav={setPage} />
          <Team onNav={setPage} />
          <MilonFeature onNav={setPage} />
          <MilonCompare onNav={setPage} />
          <Training onNav={setPage} />
          <Schedule />
          <QuoteBlock />
          <LocalSEO />
          <BotIntro />
          <FAQ />
          <Contact />
        </>
      )}
      {page === 'behandlingar' && <PageBehandlingar onNav={setPage} />}
      {page === 'traning' && <PageTraning onNav={setPage} />}
      {page === 'milon' && <PageMilon onNav={setPage} />}
      {page === 'boka' && <PageBoka onNav={setPage} />}
      {(page === 'om' || page === 'kontakt') && <PageOm onNav={setPage} />}
      <Footer onNav={setPage} />
      <FabChat />

      {show && (
        <TweaksPanel title="Tweaks" onClose={() => setShow(false)}>
          <TweakSection title="Färger">
            <TweakColor label="Saffrangul (accent)" value={tweaks.saffron} onChange={v => setTweak('saffron', v)} />
            <TweakColor label="Korall" value={tweaks.coral} onChange={v => setTweak('coral', v)} />
            <TweakColor label="Bläck" value={tweaks.ink} onChange={v => setTweak('ink', v)} />
            <TweakColor label="Bakgrund" value={tweaks.bg} onChange={v => setTweak('bg', v)} />
          </TweakSection>
          <TweakSection title="Typografi">
            <TweakSelect label="Rubrikfont" value={tweaks.headingFont}
              options={['Bricolage Grotesque','Space Grotesk','Manrope','DM Serif Display','Instrument Serif','Archivo']}
              onChange={v => setTweak('headingFont', v)} />
            <TweakSelect label="Brödtext" value={tweaks.bodyFont}
              options={['Inter','DM Sans','Manrope','Plus Jakarta Sans','IBM Plex Sans']}
              onChange={v => setTweak('bodyFont', v)} />
          </TweakSection>
          <TweakSection title="Layout">
            <TweakSlider label="Hörnradie" min={4} max={36} step={2}
              value={tweaks.radius} onChange={v => setTweak('radius', v)} />
          </TweakSection>
          <TweakSection title="Hoppa till sida">
            <div style={{display:'grid', gap:6}}>
              {[
                ['start', 'Startsida'],
                ['behandlingar', 'Behandlingar'],
                ['traning', 'Träning & priser'],
                ['milon', 'Milon Q'],
                ['boka', 'Boka (Zoezi)'],
                ['om', 'Om / Kontakt']
              ].map(([id, label]) => (
                <button key={id} onClick={() => setPage(id)}
                  style={{
                    textAlign:'left', padding:'10px 12px', fontSize:13, cursor:'pointer',
                    borderRadius:8, background: page === id ? 'var(--hf-saffron)' : 'rgba(0,0,0,0.04)',
                    border:'1px solid rgba(0,0,0,0.08)', fontWeight: page === id ? 600 : 500
                  }}>
                  {label}
                </button>
              ))}
            </div>
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Mount />);