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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fidelity": "iso",
  "layout": "sidebar",
  "ctaStrategy": "dual",
  "trustBlock": true,
  "cautionStyle": "block"
}/*EDITMODE-END*/;

function RecapFrame({ 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} currentStep={6}/>
      {compact && <ReassuranceBar compact/>}
      <div style={{flex:1, display:'flex', flexDirection:'column'}}>
        <RecapScreen compact={compact} tweaks={tweaks}/>
      </div>
      {!compact && <GoogleReviewsFloating/>}
    </div>
  );
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <DesignCanvas defaultZoom={0.5}>
        <DCSection id="recap" title="Étape /recap — Récapitulatif avant paiement">
          <DCArtboard id="rc-desktop" label="Desktop · 1360px" width={1360} height={2600}>
            <RecapFrame tweaks={tweaks}/>
          </DCArtboard>
          <DCArtboard id="rc-mobile" label="Mobile · 390px" width={390} height={3400}>
            <RecapFrame compact tweaks={tweaks}/>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Layout (desktop)">
          <TweakSelect
            label="Présentation"
            value={tweaks.layout}
            onChange={(v)=>setTweak('layout', v)}
            options={[
              { value: 'single',   label: 'A — Colonne unique centrée' },
              { value: 'sidebar',  label: 'B — 2 cols + sidebar sticky' },
              { value: 'sections', label: 'C — Sections + bottom bar' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Stratégie CTA">
          <TweakSelect
            label="Boutons d'action"
            value={tweaks.ctaStrategy}
            onChange={(v)=>setTweak('ctaStrategy', v)}
            options={[
              { value: 'dual',    label: '2 boutons côte à côte (iso)' },
              { value: 'single',  label: '1 CTA + lien discret' },
              { value: 'toggle',  label: 'Toggle mode + 1 CTA contextuel' },
              { value: 'request', label: 'Demande de réservation (sans paiement CB)' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Caution">
          <TweakRadio
            label="Présentation"
            value={tweaks.cautionStyle}
            onChange={(v)=>setTweak('cautionStyle', v)}
            options={[
              { value: 'block', label: 'Bloc dédié' },
              { value: 'line',  label: 'Ligne' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Réassurance avant CTA">
          <TweakToggle
            label="Afficher le bloc 3 garanties"
            value={tweaks.trustBlock}
            onChange={(v)=>setTweak('trustBlock', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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