// Mobile presentation app — design canvas with iOS frames

const Frame = ({ children, dark }) => (
  <window.IOSDevice width={402} height={874} dark={dark}>
    <div style={{height:'100%', overflow:'auto'}}>
      {children}
    </div>
  </window.IOSDevice>
);

const App = () => (
  <window.DesignCanvas>
    <window.DCSection id="p1" title="Propuesta 01 — Confianza · Mobile completa">
      <window.DCArtboard id="m1-app" label="App completa · 7 pantallas + hamburguesa" width={402} height={874}>
        <window.IOSDevice width={402} height={874} dark={false}>
          <div style={{height:'100%', overflow:'auto', background:'#FBFCFB'}}>
            <window.M1App/>
          </div>
        </window.IOSDevice>
      </window.DCArtboard>
    </window.DCSection>

    <window.DCSection id="p2" title="Propuesta 02 — Vigilancia · Mobile Home">
      <window.DCArtboard id="m2-home" label="Home · menú hamburguesa" width={402} height={874}>
        <window.IOSDevice width={402} height={874} dark={true}>
          <div style={{height:'100%', overflow:'auto', background:'#0B0E0C'}}>
            <window.M2App/>
          </div>
        </window.IOSDevice>
      </window.DCArtboard>
    </window.DCSection>

    <window.DCSection id="p3" title="Propuesta 03 — Perímetro · Mobile Home">
      <window.DCArtboard id="m3-home" label="Home · menú hamburguesa" width={402} height={874}>
        <window.IOSDevice width={402} height={874} dark={false}>
          <div style={{height:'100%', overflow:'auto', background:'#FBFAF6'}}>
            <window.M3App/>
          </div>
        </window.IOSDevice>
      </window.DCArtboard>
    </window.DCSection>
  </window.DesignCanvas>
);

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