// app-v2.jsx — Étape /vehicles (V2 uniquement) avec tweak reassStyle

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "reassStyle": "default",
  "sidebarStyle": "default"
}/*EDITMODE-END*/;

function DesktopArtboard() {
  return (
    <div style={{background:'#fafaf6',color:'#042828',fontFamily:'Barlow,Helvetica,sans-serif',width:'100%'}}>
      <TunnelHeader currentVisualStep={1}/>
      <window.VehiclesScreenV2/>
    </div>
  );
}

function MobileArtboard() {
  return (
    <div style={{background:'#fafaf6',color:'#042828',fontFamily:'Barlow,Helvetica,sans-serif',width:'100%',position:'relative'}}>
      <TunnelHeader currentVisualStep={1} compact/>
      <ReassuranceBar compact/>
      <window.VehiclesScreenV2 compact/>
      <GoogleReviewsFloating/>
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // Propage les variantes via globals lus à chaque render des screens
  window.__vaReassVariant = tweaks.reassStyle;
  window.__vaSidebarVariant = tweaks.sidebarStyle;
  const [, force] = React.useReducer(x => x + 1, 0);
  React.useEffect(() => { force(); }, [tweaks.reassStyle, tweaks.sidebarStyle]);

  const dh = 2420;
  const mh = 3960;

  return (
    <>
      <DesignCanvas>
        <DCSection
          id="step-vehicles"
          title="Étape — /vehicles"
          subtitle="V2 · pill « Disponible » + pop-up détail véhicule"
        >
          <DCArtboard id="desktop" label={`Desktop · 1360×${dh}`} width={1360} height={dh}>
            <DesktopArtboard/>
          </DCArtboard>
          <DCArtboard id="mobile" label={`Mobile · 390×${mh}`} width={390} height={mh}>
            <MobileArtboard/>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Bloc réassurance">
          <TweakRadio
            label="Style"
            value={tweaks.reassStyle}
            onChange={(v)=>setTweak('reassStyle', v)}
            options={[
              { value: 'default', label: 'Card' },
              { value: 'softTeal', label: 'Teal doux' },
              { value: 'accent', label: 'Accent' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Sidebar Recherche">
          <TweakRadio
            label="Style"
            value={tweaks.sidebarStyle}
            onChange={(v)=>setTweak('sidebarStyle', v)}
            options={[
              { value: 'default', label: 'Standard' },
              { value: 'accentBanner', label: 'Bandeau teal' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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