// app-booking.jsx — DesignCanvas /booking
const { DesignCanvas, DCSection, DCArtboard } = window;
const { TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect } = window;
const { TunnelHeader, ReassuranceBar, GoogleReviewsFloating } = window;
const { BookingScreen } = window;

const VA_TEAL = '#11978f';
const VA_INK  = '#042828';
const VA_MUTED= '#5B7A82';

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "formLayout": "iso",
  "sidebarKind": "recap"
}/*EDITMODE-END*/;

function BookingFrame({ compact = false, tweaks }) {
  return (
    <div className="va-frame" style={{
      width: compact ? 390 : 1360,
      background:'#fafaf6',
      fontFamily:"'Barlow', Helvetica, sans-serif",
      color: VA_INK,
    }}>
      <TunnelHeader compact={compact} currentStep={5}/>
      {compact && <ReassuranceBar compact/>}
      <BookingScreen compact={compact} tweaks={tweaks}/>
      {!compact && <GoogleReviewsFloating/>}
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <DesignCanvas defaultZoom={0.55}>
        <DCSection id="booking" title="Étape /booking — Coordonnées client">
          <DCArtboard id="bk-desktop" label="Desktop · 1360px" width={1360} height={2480}>
            <BookingFrame tweaks={tweaks}/>
          </DCArtboard>
          <DCArtboard id="bk-mobile" label="Mobile · 390px" width={390} height={3200}>
            <BookingFrame compact tweaks={tweaks}/>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Layout du formulaire">
          <TweakRadio
            label="Présentation"
            value={tweaks.formLayout}
            onChange={(v)=>setTweak('formLayout', v)}
            options={[
              { value: 'iso',     label: 'Iso' },
              { value: 'cards',   label: 'Cards' },
              { value: 'stepped', label: 'Steppé' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Sidebar récap">
          <TweakSelect
            label="Variante"
            value={tweaks.sidebarKind}
            onChange={(v)=>setTweak('sidebarKind', v)}
            options={[
              { value: 'recap',    label: 'Récap voyage (départ → retour)' },
              { value: 'detailed', label: 'Panier détaillé' },
              { value: 'minimal',  label: 'Minimal (véhicule + total)' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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