/* OrthoVaultOS — root composition */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "accent": "#b91c2c",
  "theme": "light"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  '#b91c2c', // crimson (default)
  '#0f766e', // clinical teal
  '#1e3a8a', // navy
  '#0e1525', // monochrome
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent || '#b91c2c';
  const theme = t.theme || 'light';

  // Drive the CSS-variable tokens by stamping data-theme on body. That way
  // anything outside the React root (e.g. body bg) picks up the theme too.
  React.useEffect(() => {
    document.body.setAttribute('data-theme', theme);
    return () => { document.body.removeAttribute('data-theme'); };
  }, [theme]);

  // Cross-page hash links (e.g. faq.html -> index.html#pricing) land on a
  // fresh load where the browser tries to jump to the anchor before this
  // Babel/React tree has mounted the target section, so the native jump
  // silently no-ops and the link looks like it needs a second click once
  // already on the page. Do it ourselves once the full tree is committed.
  React.useEffect(() => {
    if (!window.location.hash) return;
    const el = document.querySelector(window.location.hash);
    // 'auto' defers to the CSS scroll-behavior (smooth, globally) — use
    // 'instant' explicitly so this initial landing correction snaps directly
    // instead of animating from the top of the page.
    if (el) el.scrollIntoView({ behavior: 'instant', block: 'start' });
  }, []);

  let Hero;
  if (t.heroLayout === 'centered') Hero = HeroCentered;
  else if (t.heroLayout === 'editorial') Hero = HeroEditorial;
  else Hero = HeroSplit;

  return (
    <div data-theme={theme} style={{
      fontFamily: '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      color: 'var(--text)',
      background: 'var(--bg)',
      minHeight: '100vh',
    }}>
      <Nav accent={accent} />
      <Hero accent={accent} />
      <OldWay accent={accent} />
      <HowItWorks accent={accent} />
      <BuiltForSurgeons accent={accent} />
      <InTheOR accent={accent} />
      <OtherSpecialties accent={accent} />
      <CallToAction accent={accent} />
      <Pricing accent={accent} />
      <Testimonials accent={accent} />
      <Footer accent={accent} />
      <DemoModal />
      <FeatureExplorerModal accent={accent} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            value={theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'light', label: 'Light' },
              { value: 'dark', label: 'Dark' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Hero layout">
          <TweakRadio
            value={t.heroLayout}
            onChange={(v) => setTweak('heroLayout', v)}
            options={[
              { value: 'split', label: 'Split' },
              { value: 'centered', label: 'Centered' },
              { value: 'editorial', label: 'Editorial' },
            ]}
          />
          <div style={{ fontSize: 11.5, color: '#6b7280', marginTop: 8, lineHeight: 1.5 }}>
            Three takes on the hero: classic split, big centered statement, and an editorial asymmetric layout.
          </div>
        </TweakSection>

        <TweakSection title="Accent color">
          <TweakColor
            value={t.accent}
            onChange={(v) => setTweak('accent', v)}
            options={ACCENT_OPTIONS}
          />
          <div style={{ fontSize: 11.5, color: '#6b7280', marginTop: 8, lineHeight: 1.5 }}>
            Crimson is the surgical default. Teal and navy lean clinical; mono is for the editorial direction.
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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