// app-detail-full.jsx — Page détail véhicule en plein écran desktop (hors DesignCanvas)
// Rendu réel : le scroll de la fenêtre permet à l'encart sticky de fonctionner.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "sectionsStyle": "accordion"
}/*EDITMODE-END*/;

// Bascule desktop <-> mobile selon la largeur réelle du viewport.
// (Sur le canvas, `compact` est forcé par l'artboard mobile ; en standalone
//  on l'active sous 860px pour activer le layout `.vdp.is-compact` :
//  1 colonne, aside prix masqué, bottom bar prix+CTA sticky.)
function useIsCompact(bp = 860) {
  const [compact, setCompact] = React.useState(
    typeof window !== 'undefined' && window.matchMedia(`(max-width:${bp}px)`).matches
  );
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width:${bp}px)`);
    const on = (e) => setCompact(e.matches);
    setCompact(mq.matches);
    mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, [bp]);
  return compact;
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const isCompact = useIsCompact();

  return (
    <>
      <window.VehicleDetailPage
        compact={isCompact}
        sectionsStyle={tweaks.sectionsStyle}
        reviews="section"
        encart="recap"
        availabilityBadge={false}
        reassStrip="card"
        conditions={true}
        onClose={()=>{}} onSelect={(id)=>console.log('select',id)}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Sections (Données véhicule…)">
          <TweakRadio
            label="Affichage"
            value={tweaks.sectionsStyle}
            onChange={(v)=>setTweak('sectionsStyle', v)}
            options={[
              { value: 'accordion', label: 'Accordéon' },
              { value: 'accordion2', label: 'Accordéon +' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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