const { useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tagline": "The Team Behind You",
  "heroSub": "High-performing virtual assistants, matched to how you actually work. Get your time back and spend it on what matters most.",
  "heroCta": "Find Your Team Now",
  "matchingAngle": true,
  "bambooAccent": false,
  "primaryBlue": "#0878D8",
  "cornerRadius": 14,
  "density": "comfy",
  "fontScale": 1
}/*EDITMODE-END*/;

const TweakCtx = React.createContext(TWEAK_DEFAULTS);

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectApp(() => {
    const root = document.documentElement;
    root.style.setProperty('--blue', t.primaryBlue);
    // derive a darker shade from primary for deep
    root.style.setProperty('--radius-lg', `${t.cornerRadius + 4}px`);
    root.style.setProperty('--radius', `${t.cornerRadius}px`);
    document.body.style.fontSize = `${16 * t.fontScale}px`;
  }, [t.primaryBlue, t.cornerRadius, t.fontScale]);

  useEffectApp(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Scroll to hash target once React-mounted sections (e.g. #matching, #packages,
  // #story, #faq) actually exist in the DOM. Footer links from ICP pages land
  // here as index.html#xxx — the native browser scroll fires before mount, so
  // we poll briefly for the element and then scroll it into view ourselves.
  useEffectApp(() => {
    const hash = window.location.hash;
    if (!hash || hash.length < 2) return;
    const id = hash.slice(1);
    let tries = 0;
    const maxTries = 40; // ~2s at 50ms
    let raf = 0;
    const tryScroll = () => {
      const el = document.getElementById(id);
      if (el) {
        // Defer one frame so layout settles, then scroll without smooth-jank.
        requestAnimationFrame(() => {
          const top = el.getBoundingClientRect().top + window.scrollY - 12;
          window.scrollTo({ top, behavior: 'auto' });
        });
        return;
      }
      if (++tries < maxTries) raf = setTimeout(tryScroll, 50);
    };
    tryScroll();
    return () => clearTimeout(raf);
  }, []);

  return (
    <TweakCtx.Provider value={t}>
      <div>
        <Nav />
        <main>
          <Hero />
          {/* Pain + TimeBack live inside a single dark-indigo wrapper so the
              two sections share one continuous background. Solid var(--ink)
              with no overlay — matches the equivalent .pain-timeback-wrap
              rule in _template/icp-pages.css (the diagonal pinstripes were
              removed there earlier; this brings the homepage into alignment). */}
          <div style={{
            background: 'var(--ink)',
            position: 'relative',
            overflow: 'hidden',
            isolation: 'isolate',
          }}>
            <Pain />
            <TimeBack />
          </div>
          <Problem />
          <HumanInLoop />
          <HowItWorks />
          <Testimonials />
          <Fit />
          <Packages />
          <FAQ />
          <Story />
          <CTA />
        </main>
        <Footer />
        <TweaksPanel title="BlueMoso tweaks">
          <TweakSection label="Voice & copy">
            <TweakText label="Tagline" value={t.tagline} onChange={(v) => setTweak('tagline', v)} />
            <TweakText label="Hero sub" value={t.heroSub} onChange={(v) => setTweak('heroSub', v)} />
            <TweakText label="Primary CTA" value={t.heroCta} onChange={(v) => setTweak('heroCta', v)} />
            <TweakToggle label='Lead with "matching"' value={t.matchingAngle} onChange={(v) => setTweak('matchingAngle', v)} />
          </TweakSection>
          <TweakSection label="Brand">
            <TweakColor label="Primary blue" value={t.primaryBlue} onChange={(v) => setTweak('primaryBlue', v)} />
            <TweakToggle label="Bamboo accent motif" value={t.bambooAccent} onChange={(v) => setTweak('bambooAccent', v)} />
          </TweakSection>
          <TweakSection label="Style">
            <TweakSlider label="Corner radius" value={t.cornerRadius} min={0} max={24} unit="px" onChange={(v) => setTweak('cornerRadius', v)} />
            <TweakSlider label="Font scale" value={t.fontScale} min={0.85} max={1.15} step={0.05} unit="×" onChange={(v) => setTweak('fontScale', v)} />
          </TweakSection>
        </TweaksPanel>
      </div>
    </TweakCtx.Provider>
  );
}

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