/* Shared App shell for all v2 pages */

/* ── Auto-resize iframe in parent Next.js page ── */
(function() {
  function report() {
    var h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
    window.parent.postMessage({ type: 'arcline-resize', height: h }, '*');
  }
  function scheduleReports() {
    report();
    setTimeout(report, 200);
    setTimeout(report, 800);
    setTimeout(report, 1600);
    setTimeout(report, 3000);
  }

  window.__ARCLINE_REPORT_SIZE__ = scheduleReports;

  window.addEventListener('DOMContentLoaded', scheduleReports);
  window.addEventListener('load', function() {
    scheduleReports();
  });
  window.addEventListener('resize', report);

  if (document.fonts && document.fonts.ready) {
    document.fonts.ready.then(scheduleReports).catch(function() {});
  }

  Array.prototype.forEach.call(document.images, function(img) {
    if (!img.complete) {
      img.addEventListener('load', report);
      img.addEventListener('error', report);
    }
  });

  var ro = new ResizeObserver(report);
  ro.observe(document.documentElement);

  var mo = new MutationObserver(report);
  mo.observe(document.body, { childList: true, subtree: true, attributes: true, characterData: true });
})();

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#2563EB"
}/*EDITMODE-END*/;

function HomePage({ tweaks }) {
  return (
    <React.Fragment>
      <Hero tweaks={tweaks} />
      <WhySection tweaks={tweaks} />
      <ComplexitySection tweaks={tweaks} />
      <HowItWorks tweaks={tweaks} />
      <FeaturesSection tweaks={tweaks} />
      <Outcomes tweaks={tweaks} />
      <Integrations tweaks={tweaks} />
      <Testimonials tweaks={tweaks} />
      <Pricing tweaks={tweaks} />
      <FAQ tweaks={tweaks} />
      <FinalCTA tweaks={tweaks} />
    </React.Fragment>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState(window.__INITIAL_PAGE__ || 'home');

  const navigate = React.useCallback((p) => {
    setPage(p);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);

  React.useEffect(() => {
    if (typeof window.__ARCLINE_REPORT_SIZE__ === 'function') {
      window.__ARCLINE_REPORT_SIZE__();
    }
  }, [page, tweaks]);

  let content;
  switch (page) {
    case 'how-it-works': content = <HowItWorksPage tweaks={tweaks} />; break;
    case 'features':     content = <FeaturesPage tweaks={tweaks} />; break;
    case 'integrations': content = <IntegrationsPage tweaks={tweaks} />; break;
    case 'pricing':      content = <PricingPage tweaks={tweaks} />; break;
    case 'resources':    content = <ResourcesPage tweaks={tweaks} />; break;
    default:             content = <HomePage tweaks={tweaks} />;
  }

  return (
    <React.Fragment>
      <Nav tweaks={tweaks} onNavigate={navigate} currentPage={page} />
      {content}
      <Footer tweaks={tweaks} />
      <TweaksPanel title="Tweaks">
        <TweakColor label="Accent color" value={tweaks.accentColor} onChange={v => setTweak('accentColor', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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