// app-configure.jsx — Étape /configure : DesignCanvas avec artboards desktop + mobile

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "sidebarStyle": "detailed",
  "mileagePresentation": "cards",
  "mileageCardStyle": "v1",
  "insurancePresentation": "compare",
  "trustStyle": "split"
}/*EDITMODE-END*/;

function DesktopArtboard({ tweaks = {} }) {
  return (
    <div style={{background:'#fafaf6',color:'#042828',fontFamily:'Barlow,Helvetica,sans-serif',width:'100%',display:'flex',flexDirection:'column',minHeight:'100%'}}>
      <TunnelHeader currentVisualStep={2}/>
      <div style={{flex:1}}>
        <ConfigureScreen tweaks={tweaks}/>
      </div>
    </div>
  );
}

function MobileArtboard({ tweaks = {} }) {
  return (
    <div style={{background:'#fafaf6',color:'#042828',fontFamily:'Barlow,Helvetica,sans-serif',width:'100%',position:'relative',display:'flex',flexDirection:'column',minHeight:'100%'}}>
      <TunnelHeader currentVisualStep={2} compact/>
      <ReassuranceBar compact/>
      <div style={{flex:1}}>
        <ConfigureScreen compact tweaks={tweaks}/>
      </div>
    </div>
  );
}

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

  return (
    <>
      <DesignCanvas>
        <DCSection id="step-configure" title="Étape — /configure" subtitle="Configuration : kilométrage + assurance">
          <DCArtboard id="desktop" label="Desktop · 1360×2400" width={1360} height={2400}>
            <DesktopArtboard tweaks={tweaks}/>
          </DCArtboard>
          <DCArtboard id="mobile" label="Mobile · 390×3400" width={390} height={3400}>
            <MobileArtboard tweaks={tweaks}/>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Sidebar panier (desktop)">
          <TweakRadio
            label="Niveau de détail"
            value={tweaks.sidebarStyle}
            onChange={(v)=>setTweak('sidebarStyle', v)}
            options={[
              { value: 'detailed', label: 'Détaillé' },
              { value: 'minimal',  label: 'Minimal' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Cards forfait kilométrique">
          <TweakRadio
            label="Style"
            value={tweaks.mileageCardStyle}
            onChange={(v)=>setTweak('mileageCardStyle', v)}
            options={[
              { value: 'v1', label: 'v1' },
              { value: 'v2', label: 'v2' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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