// app-payment.jsx — DesignCanvas /paiement (ex /recap)
const { DesignCanvas, DCSection, DCArtboard } = window;
const { TweaksPanel, useTweaks, TweakSection, TweakRadio } = window;
const { TunnelHeader, ReassuranceBar, GoogleReviewsFloating } = window;
const { PaymentScreen } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{}/*EDITMODE-END*/;

function PaymentFrame({ compact = false, tweaks }) {
  return (
    <div className="va-frame" style={{
      width: compact ? 390 : 1360, background: '#fafaf6',
      fontFamily: "'Barlow', Helvetica, sans-serif", color: '#042828',
      display: 'flex', flexDirection: 'column', minHeight: '100%'
    }}>
      <TunnelHeader compact={compact} currentVisualStep={4}/>
      {compact && <ReassuranceBar compact/>}
      <div style={{flex:1, display:'flex', flexDirection:'column'}}>
        <PaymentScreen compact={compact} tweaks={tweaks}/>
      </div>
      {!compact && <GoogleReviewsFloating/>}
    </div>
  );
}

function App() {
  const [tweaks] = useTweaks(TWEAK_DEFAULTS);
  return (
    <DesignCanvas defaultZoom={0.5}>
      <DCSection id="payment" title="Étape /paiement" subtitle="Moyens de paiement en colonne large + sidebar panier (reprise /options)">
        <DCArtboard id="pay-desktop" label="Desktop · 1360×1700" width={1360} height={1700}>
          <PaymentFrame tweaks={tweaks}/>
        </DCArtboard>
        <DCArtboard id="pay-mobile" label="Mobile · 390×2400" width={390} height={2400}>
          <PaymentFrame compact tweaks={tweaks}/>
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

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