// WorkTwins — App root, theme, reveal-on-scroll, tweaks

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": "champagne",
  "palette": "pearl",
  "density": "comfortable",
  "displayFont": "Instrument Serif",
  "showProofStrip": true
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  champagne: { gold: '#D9B679', goldDeep: '#B89358' },
  lavender:  { gold: '#B9A9DD', goldDeep: '#7E6BB8' },
  blush:     { gold: '#E5A8B2', goldDeep: '#C97F8C' },
  turquoise: { gold: '#9AD7CC', goldDeep: '#5BAA9C' },
  sky:       { gold: '#A8C9E5', goldDeep: '#6A9CC4' },
};

const PALETTE_MAP = {
  pearl: { ivory: '#FBF7F0', ivory2: '#F5EFE4' },
  mist:  { ivory: '#F4F6F8', ivory2: '#EAEEF2' },
  rose:  { ivory: '#FBF4F1', ivory2: '#F4E8E2' },
  sage:  { ivory: '#F2F5F0', ivory2: '#E6ECE2' },
};

function App() {
  const [theme, setTheme] = React.useState(() => {
    try {
      return localStorage.getItem('worktwins-theme') || 'light';
    } catch (e) { return 'light'; }
  });

  const tweaksHook = (typeof useTweaks === 'function') ? useTweaks(DEFAULT_TWEAKS) : [DEFAULT_TWEAKS, () => {}];
  const t = tweaksHook[0];
  const setTweak = tweaksHook[1];

  // theme persistence + html attribute
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('worktwins-theme', theme); } catch(e) {}
  }, [theme]);

  // apply tweak-driven CSS variables
  React.useEffect(() => {
    const accent = ACCENT_MAP[t.accent] || ACCENT_MAP.champagne;
    const palette = PALETTE_MAP[t.palette] || PALETTE_MAP.pearl;
    const r = document.documentElement;
    r.style.setProperty('--gold', accent.gold);
    r.style.setProperty('--gold-deep', accent.goldDeep);
    if (theme === 'light') {
      r.style.setProperty('--ivory', palette.ivory);
      r.style.setProperty('--ivory-2', palette.ivory2);
    }
    r.style.setProperty('--font-display', `"${t.displayFont || 'Instrument Serif'}", "Cormorant Garamond", serif`);

    // density adjusts base font-size & section padding modifier
    if (t.density === 'compact') {
      r.style.setProperty('--section-mul', '0.85');
      document.body.style.fontSize = '15px';
    } else if (t.density === 'spacious') {
      r.style.setProperty('--section-mul', '1.15');
      document.body.style.fontSize = '17px';
    } else {
      r.style.setProperty('--section-mul', '1');
      document.body.style.fontSize = '16px';
    }
  }, [t, theme]);

  // reveal on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });

  return (
    <React.Fragment>
      <Nav theme={theme} setTheme={setTheme} />
      <Hero />
      <Problem />
      <Solution />
      <WorkFootPrint />
      <Matching />
      <Privacy />
      <Audiences />
      <HappyHuman />
      <FinalCTA />
      <FAQ />
      <Footer />

      {typeof TweaksPanel === 'function' && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Theme" />
          <TweakRadio label="Mode"
            options={[{label: 'Light', value: 'light'}, {label: 'Dark', value: 'dark'}]}
            value={theme}
            onChange={setTheme}
          />
          <TweakSelect label="Background"
            options={[
              {label: 'Pearl ivory', value: 'pearl'},
              {label: 'Cool mist',  value: 'mist'},
              {label: 'Soft rose',  value: 'rose'},
              {label: 'Pale sage',  value: 'sage'},
            ]}
            value={t.palette}
            onChange={(v) => setTweak('palette', v)}
          />
          <TweakColor label="Accent"
            value={ACCENT_MAP[t.accent]?.gold || '#D9B679'}
            options={['champagne', 'lavender', 'blush', 'turquoise', 'sky'].map(k => ACCENT_MAP[k].gold)}
            onChange={(hex) => {
              const key = Object.keys(ACCENT_MAP).find(k => ACCENT_MAP[k].gold.toLowerCase() === String(hex).toLowerCase());
              if (key) setTweak('accent', key);
            }}
          />

          <TweakSection label="Type & spacing" />
          <TweakSelect label="Display font"
            options={[
              {label: 'Instrument Serif',    value: 'Instrument Serif'},
              {label: 'Cormorant Garamond',  value: 'Cormorant Garamond'},
              {label: 'Manrope (sans)',      value: 'Manrope'},
            ]}
            value={t.displayFont}
            onChange={(v) => setTweak('displayFont', v)}
          />
          <TweakRadio label="Density"
            options={[
              {label: 'Compact',     value: 'compact'},
              {label: 'Comfortable', value: 'comfortable'},
              {label: 'Spacious',    value: 'spacious'},
            ]}
            value={t.density}
            onChange={(v) => setTweak('density', v)}
          />
        </TweaksPanel>
      )}
    </React.Fragment>
  );
}

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