// App entry — composes all sections + Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "viewport": "auto"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { isMobile, isAuto } = useEffectiveViewport(tweaks.viewport);

  // Expose viewport flag to all components reading via window
  window.__dch_isMobile = isMobile;

  // The 375 "phone frame" preview chrome only applies when the user has
  // explicitly forced the Mobile override in the Tweaks panel. On real devices
  // (auto mode) we let the layout fill the viewport naturally.
  const showPhoneFrame = !isAuto && isMobile;
  // Cache-bust child components when the EFFECTIVE viewport flips so
  // mount-time measurements (window.innerWidth etc.) re-run.
  const vpKey = isMobile ? 'm' : 'd';

  return (
    <div data-screen-label={isMobile ? 'Homepage · Mobile' : 'Homepage · Desktop'}
         style={{ minHeight: '100vh', background: showPhoneFrame ? '#050505' : '#0A0A0A', padding: showPhoneFrame ? '32px 0' : 0 }}>
      <div style={{
        margin: '0 auto',
        width: showPhoneFrame ? 375 : '100%',
        background: '#0A0A0A',
        boxShadow: showPhoneFrame ? '0 24px 64px rgba(0,0,0,0.8)' : 'none',
        outline: showPhoneFrame ? '1px solid #1A1A1A' : 'none',
        overflow: 'hidden',
      }}>
        <Header current="accueil" key={'hdr-' + vpKey} />
        <Hero key={'hero-' + vpKey} />
        <BrandMarquee
          key={'mq-' + vpKey}
          items={['BMW', 'Audi', 'Mercedes-Benz', 'Mini', 'Porsche', 'Alpine', 'Land Rover', 'Volvo', 'Jaguar', 'Lexus']}
          speed={isMobile ? 45 : 70}
        />
        <SectionApproche key={'app-' + vpKey} />
        <SectionServices key={'svc-' + vpKey} />
        <SectionPourquoi key={'pq-' + vpKey} />
        <SectionClosing key={'cl-' + vpKey} />
        <Footer key={'ft-' + vpKey} />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Aperçu">
          <ViewportTweak value={tweaks.viewport} onChange={(v) => setTweak('viewport', v)} />
        </TweakSection>
      </TweaksPanel>

      <StickyCTA />
    </div>
  );
}

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