/* Mount design canvas with all views */

function App() {
  return (
    <DesignCanvas title="MedFlow — MVP" subtitle="Clínica corporativa interna · login, empleado, beneficiarios, reserva, médico y admin">

      <DCSection id="login" title="Login" subtitle="Acceso con código de empleado validado contra la base corporativa.">
        <DCArtboard id="login-1" label="Ingreso con código" width={1200} height={820}>
          <div data-screen-label="01 Login — Código de empleado">
            <LoginView/>
          </div>
        </DCArtboard>
      </DCSection>

      <DCSection id="employee" title="Vista del empleado" subtitle="Trazabilidad personal — próxima cita, historial clínico, salud preventiva.">
        <DCArtboard id="employee-1" label="Mi historial médico" width={1200} height={1780}>
          <div data-screen-label="02 Employee — Mi historial">
            <EmployeeView/>
          </div>
        </DCArtboard>
      </DCSection>

      <DCSection id="beneficiaries" title="Beneficiarios" subtitle="Gestión del núcleo familiar — cónyuge, hijos y padres dependientes.">
        <DCArtboard id="beneficiaries-1" label="Mi familia" width={1200} height={1280}>
          <div data-screen-label="03 Beneficiarios — Mi familia">
            <BeneficiariesView/>
          </div>
        </DCArtboard>
      </DCSection>

      <DCSection id="patient" title="Reserva de cita" subtitle="Flujo de reserva — especialidad, profesional, fecha y franja horaria.">
        <DCArtboard id="patient-1" label="Reservar cita" width={1200} height={1380}>
          <div data-screen-label="04 Patient — Reservar">
            <PatientView/>
          </div>
        </DCArtboard>
      </DCSection>

      <DCSection id="doctor" title="Vista del profesional" subtitle="Consulta en curso — notas SOAP, medicamentos prescritos y seguimiento sugerido.">
        <DCArtboard id="doctor-1" label="Consulta en curso" width={1440} height={1280}>
          <div data-screen-label="05 Doctor — Consulta">
            <DoctorView/>
          </div>
        </DCArtboard>
      </DCSection>

      <DCSection id="admin" title="Vista de administrador" subtitle="Dashboard ejecutivo con KPIs, gráficos y trazabilidad de toda la clínica.">
        <DCArtboard id="admin-1" label="Dashboard operativo" width={1440} height={1280}>
          <div data-screen-label="06 Admin — Dashboard">
            <AdminView/>
          </div>
        </DCArtboard>
      </DCSection>

    </DesignCanvas>
  );
}

/* El montaje lo maneja main.jsx — soporta ?design para el canvas y app real sin parámetros */