/* RCC AI Holdings — v2 main app */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8553A",
  "loopSpeedMs": 1800,
  "showLoopBars": true,
  "heroRotateMs": 5000,
  "showFooterCTA": true
}/*EDITMODE-END*/;

const App2 = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent color to CSS var live
  React.useEffect(() => {
    document.documentElement.style.setProperty('--coral', tweaks.accent);
  }, [tweaks.accent]);

  return (
    <div className="app2">
      <Nav2 />
      <HeroStory rotateMs={tweaks.heroRotateMs} />
      <What />
      <Why loopSpeed={tweaks.loopSpeedMs} loopAccent={tweaks.accent} showBars={tweaks.showLoopBars} />
      <How />
      <About2 />
      <Book />
      <Footer2 showCTA={tweaks.showFooterCTA} />

      <TweaksPanel title="Tweaks" subtitle="RCC AI Holdings · live preview">
        <TweakSection title="Brand">
          <TweakColor label="Accent color" value={tweaks.accent} onChange={(v) => setTweak('accent', v)} />
        </TweakSection>

        <TweakSection title="Loop diagram">
          <TweakSlider
            label="Cycle speed"
            value={tweaks.loopSpeedMs}
            onChange={(v) => setTweak('loopSpeedMs', v)}
            min={600} max={4000} step={100}
            format={(v) => `${(v / 1000).toFixed(1)}s`}
          />
          <TweakToggle
            label="Show performance bars"
            value={tweaks.showLoopBars}
            onChange={(v) => setTweak('showLoopBars', v)}
          />
        </TweakSection>

        <TweakSection title="Hero">
          <TweakSlider
            label="Story rotation"
            value={tweaks.heroRotateMs}
            onChange={(v) => setTweak('heroRotateMs', v)}
            min={2000} max={10000} step={500}
            format={(v) => `${(v / 1000).toFixed(1)}s`}
          />
        </TweakSection>

        <TweakSection title="Footer">
          <TweakToggle
            label="Show 'Book a meeting' button"
            value={tweaks.showFooterCTA}
            onChange={(v) => setTweak('showFooterCTA', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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